在 QML 中定义一个矩形作为别名属性

Question

我设计了一个简单的 window 使用矩形，在 qml 文件中有一个 header 条和主要部分，例如 MyWindow.qml:

Item {
    id: root
    width: 300
    height: 300

    property alias title: txtTitle.text
    property alias color: backgroundItem.color

    Rectangle {
        id: backgroundItem
        anchors.fill: parent
        color: "lightgreen"
        anchors.margins: 5

        Rectangle {
            id: headerBar
            width: parent.width
            height: 30
            color: Qt.darker(parent.color)

            Rectangle {
                id: rectTitle
                height: 20
                anchors.left: headerBar.left
                anchors.leftMargin: 10
                anchors.verticalCenter: headerBar.verticalCenter

                Text {
                    id: txtTitle
                    text: "Window"
                    anchors.fill: parent
                    color: "white"
                    verticalAlignment: Text.AlignVCenter
                }
            } //rectTitle
        } //headerBar

        Rectangle {
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            Rectangle {
                id: rectMain

            }
        }
    }
}

现在，当我在 main.qml 中使用 MyWindow 时，我需要放置一个矩形而不是 rectMain。这意味着：

Rectangle {
    width: 200

    MyWindow {
        id: innerWindow
        anchors.fill: parent
        color: "lightgreen"
        title: "Green"
        // I want create my desire rectangle here instead of 'rectMain' in MyWindow
    }
}

所以，我在 MyWindow.qml 中定义了一个属性，如下所示：

property alias mainPart: rectMain

而且我在 innerWindow 中使用它而不是在 main.qml 中的注释部分：

Rectangle {
    width: 200

    MyWindow {
        id: innerWindow
        anchors.fill: parent
        color: "lightgreen"
        title: "Green"
        mainPart: Rectangle {
            id: myDesireRect
            anchors.fill: parent
        }
    }
}

但是发生了以下错误：

Invalid property assignment: "mainPart" is a read-only property

正确的做法是什么？

Answer 1

我相信您想要的是一个嵌套在 MyWindow.qml 中的容器，您可以从该文件外部访问或分配其内容。这样做的一种方法是给包含 Rectangle 的 rectMain 一个 ID（例如 recMainContainer），然后在您的顶部声明 property Rectangle mainPart 而不是别名文件。旁注，分配给此属性的 Rectangle 默认情况下没有父项，但您可以使用 onMainPartChanged:

进行管理

Item {
    id: root
    width: 300
    height: 300

    property alias title: txtTitle.text
    property alias color: backgroundItem.color
    property Rectangle mainPart     // new Rectangle property instead of alias

    onMainPartChanged: mainPart.parent = rectMainContainer // assign parent whenever mainPart changes

    Rectangle {
        id: backgroundItem
       //...condensed code...//

        Rectangle {
            id: rectMainContainer     // new id
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            // removed rectMain from here
        }
    }
}

Answer 2

为了能够将子项放入 rectMain，您需要为其 data 添加别名属性。

property alias mainPart: rectMain.data

然后当你使用它时，你就可以像这样在里面放置物品：

Rectangle {
    MyWindow {
        mainPart: SomeOtherItem {}
    }
}

在 QML 中定义一个矩形作为别名属性

Define a rectangle as alias property in QML

qt

qml

alias

在 QML 中定义一个矩形作为别名 属性

Define a rectangle as alias property in QML

qt

qml

alias

在 QML 中定义一个矩形作为别名属性