Question

这可能是一个愚蠢的问题，但是我正在开发类似手风琴的组件，在其中我将属性content传递给了我想要的内容。问题是当我在元素打开时单击它时，我找不到如何获取这些项目的高度。

关闭时的示例：

打开时的示例：

在这里，我们看到panel 2组件应该关闭

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: 480
    title: qsTr("Tabbars")

    Rectangle{
        anchors.fill:parent
        PanelItem {
            id:panel1
            title: "Panel 1"
            anchors.top:parent.top
            anchors.left:parent.left
            anchors.right:parent.right
            content: Item {
                property string title: "teste"
                anchors.fill:parent
                height:configContent.implicitHeight
                ColumnLayout{
                    id:configContent
                    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 })
                            }
                        }
                    }
                }
            }
            Component.onCompleted: {
                resetOtherAccordions.connect(panel2.resetHeight)
                console.log("panel 1 height "+panel1.height)
            }
        }
        PanelItem {
            id:panel2
            title: "Panel 2"
            anchors.topMargin: 5
            anchors.top:panel1.bottom
            anchors.left:parent.left
            anchors.right:parent.right
            content: Item {
                property string title: "teste"
                anchors.fill:parent
                height:configContent2.implicitHeight
                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.qml

中的代码

import QtQuick 2.7
import QtQuick.Layouts 1.2

Item {
    default property var contentItem: null
    property Component content
    property string title: "panel"
    id: root
    height: 30
    property bool current: false
    signal resetOtherAccordions()
    function resetHeight(){
        root.children[0].children[1].visible = false
        root.children[0].children[1].height = 0
        root.current = false
    }
        Rectangle {
            id: bar
            anchors.top:root.top
            anchors.left:root.left
            anchors.right:root.right
            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: bar
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    root.current = !root.current; //toggle ao current
                    resetOtherAccordions()
                    if(root.current) {
                        root.children[1].visible = true
                        root.children[1].height = root.children[1].children[0].children[0].height
                        console.log("childrenRect height of: "+root.children[1].children[0].children[0].height)//gives 0
                        console.log("height of: "+root.children[1].children[0].children[0].childrenRect.height)//gives 0
                        console.log("title of: "+root.children[1].children[0].children[0].title)//gives teste
                        root.height = 30+root.children[1].height
                    }
                    else {
                        root.children[1].visible = false
                        root.children[1].height = 0
                        root.height = 30
                    }
                }
            }
        }
        Rectangle {
            id: container
            anchors.top:bar.bottom
            anchors.left:root.left
            anchors.right:root.right
            color:"white"
            height:0
            visible:false
            Loader {
                id: yourLoader
                anchors.fill:container
                anchors.top:container.top
                sourceComponent: root.content
            }
            Behavior on height {
                PropertyAnimation { duration: 100 }
            }
        }
}

我想念什么？谢谢

Answer 1

我看到您使自己变得过于复杂，其基本思想是PanelItem的高度是内容的高度加上条，并且使用加载程序可以在必要时隐藏内容。

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
    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: 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: 100 }
        }
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabbars")
    Rectangle{
        anchors.fill:parent
        Column{
            anchors.fill: parent
            PanelItem{
                width: parent.width
                title: "Panel 1"
                content: Item {
                    property string title: "teste"
                    height: configContent.implicitHeight
                    width: configContent.implicitWidth
                    ColumnLayout{
                        id:configContent
                        width: root.width
                        //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{
                width: parent.width
                title: "Panel 1"
                content: Item {
                    property string title: "teste"
                    height:configContent2.implicitHeight
                    width: configContent2.implicitWidth
                    ColumnLayout{
                        id:configContent2
                        width: root.width
                        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 })
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

根据qml中的内容获取项目高度的正确方法？

1 个答案: