Question

我正在开发类似手风琴的组件，该组件基于在stackoverflow上发布的另一个组件，但进行了一些修改。

我想在这里发生的事情是，当我打开一个panel时，它会打开，而我想关闭其他可能打开的panel。

如果当我单击panel而没有打开其他panel时，唯一发生的是被单击的panel打开。

为了说明，假设我有这个：

我打开以下面板之一：

现在，当我单击另一个面板时，我希望打开的另一个面板关闭：

我有我使用过的代码，

main.qml：

import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 500
    title: qsTr("Tabbars")

    Item{
        id:item
        anchors.fill:parent
            ScrollView{
                anchors.fill:parent
                Column {
                    width:item.width
                    PanelItem {
                        id:panel1
                        title: "Panel 1"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent.implicitHeight
                            width: configContent.implicitWidth
                            ColumnLayout{
                                id:configContent
                                anchors.topMargin: 10
                                anchors.bottomMargin: 10
                                anchors.fill:parent
                                TextField {
                                    id: companyNameText1
                                    placeholderText: qsTr("Company name")
                                    Layout.fillWidth: true
                                    selectByMouse: true
                                }
                                ComboBox {
                                    id: languagesComboBox1
                                    textRole: "text"
                                    objectName: "language"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        ListElement {text: QT_TR_NOOP("English"); oid: 0}
                                        ListElement {text: QT_TR_NOOP("Portuguese"); oid: 1}
                                        ListElement {text: QT_TR_NOOP("Spanish"); oid: 2}
                                        ListElement {text: QT_TR_NOOP("Italian"); oid: 3}
                                        ListElement {text: QT_TR_NOOP("French"); oid: 4}
                                        ListElement {text: QT_TR_NOOP("Portuguese(Brasil)"); oid: 5}
                                    }
                                }
                                ComboBox {
                                    id: devSndrModeComboBox1
                                    textRole: "text"
                                    objectName: "test_dev_sndr_mode"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("None"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Subpanel"), oid: 1 })
                                            append({ text: QT_TR_NOOP("All"), oid: 2 })
                                        }
                                    }
                                }
                            }
                        }
                    }
                    PanelItem {
                        id:panel2
                        title: "Panel 2"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent2.implicitHeight
                            width: configContent2.implicitWidth
                            ColumnLayout{
                                id:configContent2
                                anchors.fill:parent
                                ComboBox {
                                    id: sndrModeComboBox1
                                    textRole: "text"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                        }
                                    }
                                }
                            }
                        }
                        Component.onCompleted: {
                            //resetOtherAccordions.connect(panel1.resetHeight)
                            console.log("panel 2 height "+panel2.height)
                        }
                    }
                    PanelItem {
                        id:panel3
                        title: "Panel 3"
                        width:parent.width
                        content: Item {
                            property string title: "teste"
                            height: configContent3.implicitHeight
                            width: configContent3.implicitWidth
                            ColumnLayout{
                                id:configContent3
                                anchors.fill:parent
                                ComboBox {
                                    id: sndrModeComboBox2
                                    textRole: "text"
                                    Layout.fillWidth: true
                                    model: ListModel {
                                        Component.onCompleted: {
                                            append({ text: QT_TR_NOOP("Preset"), oid: 0 })
                                            append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
                                        }
                                    }
                                }
                            }
                        }
                        Component.onCompleted: {
                            console.log("panel 3 height "+panel2.height)
                        }
                    }
                }
            }
        }
}

PanelItem.qml

import QtQuick 2.7
import QtQuick.Layouts 1.2

Item {
    id: root
    property Component content
    property string title: "panel"
    property bool isSelected: false
    clip: true
    height: container.height + bar.height
    Rectangle{
        id: bar
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: 30
        color:  root.isSelected ? "#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.isSelected ? "180" : 0
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: function(){
                isSelected = !isSelected
            }



        }
    }
    Rectangle{
        id: container
        anchors.top: bar.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: loader.item && isSelected ? loader.item.height : 0
        Loader {
            id: loader
            visible: isSelected
            sourceComponent: content
            anchors.top: container.top
        }
        Behavior on height {
            PropertyAnimation { duration: 1000 }

        }
    }
}

我知道可以使用signals和slots，但是我有点困惑如何在此处实现它们。有谁知道最好的方法吗？

如何像Component一样在手风琴中使组件之间相互通信？

0 个答案: