调整 QML RowLayout 附加属性

Question

我正在尝试一个简单的 RowLayout 矩形。（参见下面的代码。）当我尝试在 Qt Creator 中 compile/run 时，我得到：

qrc:/main.qml:31 Do not create objects of type Layout

当我尝试使用 Layout.minimumWidth:200 或 Layout { minimumWidth:200 }

Qt documentation for RowLayout 显示第一个表单有效。我错过了什么？

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    title: "RB3Jay"
    width:1280; height:960
    minimumWidth:600; minimumHeight:300
    visible: true

    Rectangle {
        id: pseudocontent
        height: parent.height - (header.height + footer.height)
        color:'orange'
        anchors {
          top:header.bottom
          bottom:footer.top
          left:parent.left
          right:parent.right
        }
    }

    header: RowLayout {
        id: header
        spacing: 0
        height: 100
        width: parent.width
        Rectangle {
            color:'red'
            Layout {
                minimumWidth:200; maximumWidth:200; preferredWidth:200
                fillHeight:true
            }
        }
        Rectangle {
            color:'green'
            Layout {
                minimumWidth: 200
                preferredWidth: parent.width*0.7
                fillWidth:true; fillHeight:true
            }
        }
        Rectangle {
            color:'blue'
            Layout {
                minimumWidth: 200
                preferredWidth: parent.width*0.3
                fillWidth:true; fillHeight:true
            }
        }
    }

    footer: Inspector {
        id: footer
        height:100
    }
}

Answer 1

虽然 foo { bar: 1; baz: 2 } 语法适用于 grouped properties, Foo { } is reserved for creating an instance of QML type Foo. For attached properties，但您必须使用 Foo.bar: 1 语法。

Layout 不是可创建的类型，它只提供附加属性。因此，您必须使用 Foo.bar: 1 -syntax.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    title: "RB3Jay"
    width:1280; height:960
    minimumWidth:600; minimumHeight:300
    visible: true

    Rectangle {
        id: pseudocontent
        height: parent.height - (header.height + footer.height)
        color:'orange'
        anchors {
          top:header.bottom
          bottom:footer.top
          left:parent.left
          right:parent.right
        }
    }

    header: RowLayout {
        id: header
        spacing: 0
        height: 100
        width: parent.width
        Rectangle {
            color:'red'
            Layout.minimumWidth:200
            Layout.maximumWidth:200
            Layout.preferredWidth:200
            Layout.fillHeight:true
        }
        Rectangle {
            color:'green'
            Layout.minimumWidth: 200
            Layout.preferredWidth: parent.width*0.7
            Layout.fillWidth:true; Layout.fillHeight:true
        }
        Rectangle {
            color:'blue'
            Layout.minimumWidth: 200
            Layout.preferredWidth: parent.width*0.3
            Layout.fillWidth:true; Layout.fillHeight:true
        }
    }

    footer: Inspector {
        id: footer
        height:100
    }
}

调整 QML RowLayout 附加属性

Adjusting QML RowLayout attached properties

qt

qml

qtquick2