Qt QML 将子属性绑定到父属性答案

【问题标题】：Qt QML binding child property to parent propertyQt QML 将子属性绑定到父属性
【发布时间】：2018-07-24 03:28:23
【问题描述】：

我想通过子元素“mainLayout”的最小宽度和高度将 ApplicationWindow 设置为最小宽度和高度。我无法在父 QML ApplicationWindow 中使用“mainLayout”的属性。我试图通过创建别名来使属性可见。不确定这是否是正确的解决方案。这是行不通的。但是我运行时也没有错误。

我的代码如下所示：

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2

ApplicationWindow {
visible: true
width: 1500
height: 1200
property int margin: 11

minimumWidth: serial.mainLayout.minimumWidth + 2 * margin //this one is not working
minimumHeight: serial.mainLayout.minimumHeight + 2 * margin //this one is not working


Serial {
        id: serial
        anchors.fill: parent
    }
}

Serial.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import io.qt.serialComm 1.0

Item {

    anchors.fill: parent
    id: item
    property alias mainLayout: mainLayout

    ColumnLayout {
        id: wrapper
        width: parent.width/2
        height: parent.height/2

        ColumnLayout {
            id: mainLayout
            anchors.fill: parent
            anchors.margins: margin
            GroupBox {
                id: rowBox
                title: "Row layout"
                Layout.fillWidth: true

                RowLayout {
                    id: rowLayout
                    anchors.fill: parent
                    TextField {
                        placeholderText: "This wants to grow horizontally"
                        Layout.fillWidth: true
                    }
                    Button {
                        text: "Button"
                    }
                }
            }

            GroupBox {
                id: gridBox
                title: "Grid layout"
                Layout.fillWidth: true

                GridLayout {
                    id: gridLayout
                    rows: 3
                    flow: GridLayout.TopToBottom
                    anchors.fill: parent

                    Label { text: "Line 1" }
                    Label { text: "Line 2" }
                    Label { text: "Line 3" }

                    TextField { }
                    TextField { }
                    TextField { }

                    TextArea {
                        text: "This widget spans over three rows in the GridLayout.\n"
                            + "All items in the GridLayout are implicitly positioned from top to bottom."
                        Layout.rowSpan: 3
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }
                }
            }
            TextArea {
                id: t3
                text: "This fills the whole cell"
                Layout.minimumHeight: 30
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
            GroupBox {
                id: stackBox
                title: "Stack layout"
                implicitWidth: 200
                implicitHeight: 60
                Layout.fillWidth: true
                Layout.fillHeight: true
                StackLayout {
                    id: stackLayout
                    anchors.fill: parent

                    function advance() { currentIndex = (currentIndex + 1) % count }

                    Repeater {
                        id: stackRepeater
                        model: 5
                        Rectangle {
                            color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)
                            Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
                        }
                    }
                }
            }
        }
    }
}

当我将代码放在一个文件中时，它可以工作，并且 ApplicationWindow 不会小于子元素“mainLayout”的最小高度和宽度。但是分成2个文件是行不通的..

【问题讨论】：

解决了， minimumWidth: serial.mainLayout.Layout.minimumWidth

标签： qt qml

【解决方案1】：

您无法使用 ID 为 mainLayout 的 QML 元素的属性 minimumWidth （如 serial.mainLayout.minimumWidth）的原因是它没有。

但是，有问题的 QML 元素确实有一个附加属性 Layout.minimumWidth，因为它是 ColumnLayout 中的一个项目，id 为 wrapper。您已经发现可以通过serial.mainLayout.Layout.minimumWidth 访问它。

为mainLayout 启用 minimumWidth 的Attached property mechanism 不是最容易理解的。简而言之，它使对象能够使用额外的属性进行注释，这些属性对对象来说是不可用的，但在某些情况下是相关的。在这种情况下 minimumWidth 被认为与 ColumnLayout 的子项相关。 ColumnLayout 中的项目支持这些附加的properties。

【讨论】：