QML编写自定义控件：垂直手风琴收缩

代码：

DelegateItem.qml

import QtQuick 2.0

Item
{
    id:root
    width: ListView.view.width
    height: 50

    Rectangle
    {
        id:titleRect
        color: Qt.rgba(0,0,0,0.4)
        height: 50
        radius:6
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        Text
        {
            anchors.leftMargin: 10
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            verticalAlignment:Text.AlignVCenter
            text: title
            color: "#FFFFFF"
            font.pixelSize: 24
            clip: true
        }

        Canvas
        {
            id: icon
            width: 10
            height: 10
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: 20
            property color lineColor:body.state === "bodyShow" ? "#FFFFFF" : "#C2A9A6"

            onPaint:
            {
                var ctx = getContext("2d")
                ctx.strokeStyle = lineColor
                ctx.lineWidth = 3
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(5,10);
                ctx.lineTo(10,0);
                ctx.stroke();
            }
        }

        MouseArea
        {
            id:mouseArea
            anchors.fill: parent
            onClicked:
            {
                body.state = (body.state === "bodyShow" ? "" : "bodyShow")
                icon.requestPaint()
            }
        }
    }
    Rectangle
    {
        id:body
        color: Qt.rgba(0,0,0,0.1)
        radius:6
        anchors.top: titleRect.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        state : "bodyHide"
        states:
        [
            State
            {
                name: "bodyShow"
                PropertyChanges
                {
                    target: root
                    height: 200
                }
                PropertyChanges
                {
                    target: icon
                    rotation: 180
                }
            },
            State
            {
                name: "bodyHide"
                PropertyChanges
                {
                    target: root
                    height: 50
                }
                PropertyChanges
                {
                    target: icon
                    rotation: 0
                }
            }
        ]
        transitions: Transition
        {
            NumberAnimation
            {
                properties: "height"
                easing.type: body.state === "bodyShow" ? Easing.OutBounce : Easing.Linear
                duration: body.state === "bodyShow" ? 700 : 200
            }
            NumberAnimation
            {
                properties: "rotation"
                easing.type: body.state === "bodyShow" ? Easing.OutBounce : Easing.Linear
                duration: body.state === "bodyShow" ? 700 : 200
            }
        }

        Text
        {
            anchors.fill: body
            text: detailed
            color: "#ffffff"
            font.pixelSize: 20
            clip: true
            wrapMode:Text.WrapAnywhere
        }
    }
}

main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle
    {
        id:rect
        anchors.fill: parent

        gradient:btnGradient

        Gradient
        {
            id:btnGradient
            orientation:Gradient.Horizontal
            GradientStop { position: 0.0; color: "#B9CBB5" }
            GradientStop { position: 0.33; color: "#E0C58C" }
            GradientStop { position: 0.66; color: "#B3D0A9" }
            GradientStop { position: 1.0; color: "#82DADB" }
        }

        ListView
        {
            id:view
            anchors.fill: parent
            orientation: Qt.Vertical
            spacing: 3
            model:ListModel
            {
                ListElement{title:"标题1";detailed:"黄河之水天上来，奔流到海不复回。高堂明镜悲白发，朝如青丝暮成雪。古来圣贤皆寂寞，惟有饮者留其名。";}
                ListElement{title:"标题2";detailed:"黄河之水天上来，奔流到海不复回。高堂明镜悲白发，朝如青丝暮成雪。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。";}
            }
            delegate:DelegateItem{}
            focus: true
        }
    }
}

效果：

QWidget 版本的：Qt编写自定义控件：垂直手风琴收缩部件

有个知识点注意一下：想要透明度不影响子项需要使用 color 属性设置透明度而不是使用 opacity 属性。