QML 行：如何从其他文件扩展 qml 容器（行或列）

Question

看来应该是有解决办法的。假设我有一个包含以下内容的 Test.qml 文件：

import QtQuick 2.0

Rectangle {
    color: "green"

    Row {
        id: row
        spacing: 10
        anchors.fill: parent
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
        Rectangle {
            color: "red";
            width: 100;
            height: 100;
        }
    }
}

现在假设我们想在另一个文件中使用这个 Test.qml，例如 main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Test {
        anchors.fill: parent;
        // I want to be able to add new items (rects) to the row inside Test.qml
    }
}

现在假设我们想将项目扩展到 Test.qml 中的行对象，但我们想从 main.qml 中添加。我们如何做到这一点？这可能吗？

（仅供参考：此功能的应用是开发一个占位符表单并将项目填写在其他项目中，这样我们就可以跳过重复代码。）

Answer 1

你可以create objects dynamically:

MyRow.qml:
Row {
    id: row
    spacing: 10
    anchors.fill: parent
    Rectangle {
        color: "red";
        width: 100;
        height: 100;
    }
}
      
main.qml:
MyRow{
    id: myRow
    Component.onCompleted: Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "green"; width: 100; height: 100}', myRow)
}

Answer 2

您可以在不动态创建对象的情况下执行此操作。您需要使用别名为行内容的 default property。默认属性意味着添加到您的对象的项目实际上将分配给该属性。在 Test.qml 中添加：

Rectangle {
    color: "green"
    default property alias contents: row.data

    Row {
        id: row
        ...
     }
}

现在您可以从 main.qml 添加其他项目，如下所示：

    Test {
        anchors.fill: parent;
        
        // Automatically gets added to 'row'
        Rectangle {
            color: "blue"
            width: 100
            height: 100
        }
    }

QML 行：如何从其他文件扩展 qml 容器（行或列）

QML Row: How to extend qml containers (Row or Column) from other file

qt

qml

qtquick2