Qml-展开收起面板

搜了一下网上没有类似功能的UI，实现了一个给大家参考。

AccordionElement.qml 由一个layout组成，layout里包含标题和内容组件，可以在外部实现内容组件进行替换，如isOpen为false，内容组件将收缩起来，反之则展开。

import QtQuick 2.5
import QtQuick.Layouts 1.1

ColumnLayout {
    id: rootElement
    property bool isOpen: false
    property string title: ""
    property alias color: accordionHeader.color
    property alias indicatRectColor: indicatRect.color
    default property alias accordionContent: contentPlaceholder.data
    spacing: 0

    Layout.fillWidth: true;

    Rectangle {
        id: accordionHeader
        color: "red"
        Layout.alignment: Qt.AlignTop
        Layout.fillWidth: true;
        height: 48

        Rectangle{
            id:indicatRect
           x: 16; y: 20
           width: 8; height: 8
           radius: 8
           color: "white"
        }

        Text {
            x:34;y:13
            font.family: "微软雅黑"
            font.pixelSize: 14
            color: "#FFFFFF"
            text: rootElement.title
        }
        Image {
            y:20
            anchors.right:  parent.right
            anchors.rightMargin: 20
            width: 6; height: 10
            id: indicatImg
            source: "qrc:/collapse_normal.png"
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                rootElement.isOpen = !rootElement.isOpen
                if(rootElement.isOpen)
                {
                    indicatImg.source = "qrc:/expand_normal.png"
                    indicatImg.width = 10; indicatImg.height = 6
                }else{
                    indicatImg.source = "qrc:/collapse_normal.png"
                    indicatImg.width = 6; indicatImg.height = 10
                }
            }
        }
    }

    // This will get filled with the content
    ColumnLayout {
        id: contentPlaceholder
        visible: rootElement.isOpen
        Layout.fillWidth: true;
    }
}

使用时可以将其包含至一个ScrollView，包含的内容超过ScrollView的高度时，可以将其滑动。

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3

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

    ScrollView{
//        width: 100
//        height: 200
        anchors.fill: parent
        contentHeight: scrollViewRect.height

        Rectangle{
            id: scrollViewRect
            implicitHeight: childrenRect.height
            implicitWidth: childrenRect.width
            AccordionElement {
                id: acc1
                title: "Title1"
                color: "#666666"
                indicatRectColor: "white"
                width: 640
                accordionContent: Rectangle {
                    Layout.fillWidth: true;
                    height: 120
                    color: "green"
                }
            }
            AccordionElement {
                id: acc2
                title: "Title2"
                indicatRectColor: "white"
                color: "#666666"
                width: 640
                anchors.top: acc1.bottom
                anchors.topMargin: 10
                accordionContent: Rectangle {
                    Layout.fillWidth: true;
                    height: 250
                    color: "green"
                }
            }

            AccordionElement {
                anchors.top: acc2.bottom
                anchors.topMargin: 10
                color: "#666666"
                title: "Title3"
                indicatRectColor: "white"
                width: 640
                accordionContent: Rectangle {
                    Layout.fillWidth: true;
                    height: 330
                    color: "green"
                }
            }
        }
    }
}

效果如图：

demo下载 下载地址