Question

我正在尝试创建像this这样的手风琴qml控件。首先我认为我可以使用组合框并定制它，但现在我认为这是不可能的。我可以使用任何标准控件吗？如果没有，你能帮我控制结构吗？

Answer 1

只玩QML

PanelItem.qml

import QtQuick 2.7
import QtQuick.Layouts 1.2

Item {
    default property var contentItem: null
    property string title: "panel"
    id: root
    Layout.fillWidth: true
    height: 30
    Layout.fillHeight: current
    property bool current: false
    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        Rectangle {
            id: bar
            Layout.fillWidth: true
            height: 30
            color:  root.current ? "#81BEF7" : "#CEECF5"
            Text {
                anchors.fill: parent
                anchors.margins: 10
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                text: root.title
            }
            Text {
                anchors{
                    right: parent.right
                    top: parent.top
                    bottom: parent.bottom
                    margins: 10
                }
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                text: "^"
                rotation: root.current ? "180" : 0
            }
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    root.current = !root.current;
                    if(root.parent.currentItem !== null)
                        root.parent.currentItem.current = false;

                    root.parent.currentItem = root;
                }
            }
        }
        Rectangle {
            id: container
            Layout.fillWidth: true
            anchors.top: bar.bottom
            implicitHeight: root.height - bar.height
            clip: true
            Behavior on implicitHeight {
                PropertyAnimation { duration: 100 }
            }
        }
        Component.onCompleted: {
            if(root.contentItem !== null)
                root.contentItem.parent = container;
        }
    }
}

用法：

import QtQuick 2.7
import QtQuick.Layouts 1.2
import QtQuick.Window 2.0

Window {
    visible: true
    width: 400
    height: 400

    ColumnLayout {
        anchors.fill: parent
        spacing: 1
        property var currentItem: null
        PanelItem {
            title: "Panel 1"
            Rectangle {
                color: "orange"
                anchors.fill: parent
            }
        }
        PanelItem {
            title: "Panel 2"
            Rectangle {
                color: "lightgreen"
                anchors.fill: parent
            }
        }
        PanelItem {
            title: "Panel 3"
            Rectangle {
                color: "lightblue"
                anchors.fill: parent
            }
        }
        PanelItem {
            title: "Panel 4"
            Rectangle {
                color: "yellow"
                anchors.fill: parent
            }
        }
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

Answer 2

如下所示更新MouseArea单击部分，并增加了一些条件。感谢folibis提供此qml手风琴菜单。

network calls

Answer 3

如何使用我在这里使用的开源组件？ Accordion component，并在此处Accordion component example使用。

您只需要初始化：

Components.Accordion {
    id: acordion
    anchors.fill: parent
    anchors.margins: 10
}

并像这样动态创建数据：

propertyAcordion.model = [
{
    'menuTitle': value,
    'children': [
        {
            'menuTitle': value,
            'children': [
...

使用qml创建手风琴控制的正确方法

3 个答案: