如何防止内容出现在qml过渡高度以下?

时间:2019-01-10 14:10:34

标签: qt qml

为了更好地解释该问题,我将使用图像,但总而言之,我将有一个component,它将把height0转换为height对应于孩子的身高。这个问题是所有items的孩子都会transition开始出现

为说明一下,Panel 1的子div的高度为0: enter image description here

然后我单击,过渡过程将耗时5000ms,并且发生这种情况:

enter image description here

在5000ms的结尾我有这个:

enter image description here

我在此示例中使用的代码是:

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: 200
    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 })
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
}

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

}

我希望我能很好地解释问题。

解决这个问题的最佳方法是什么?

0 个答案:

没有答案