如何制作一些可重用的QML对象，它可以注入另一个QML对象

Question

如何制作一些可重用的QML对象，它可以注入另一个对象?

我曾经尝试过使用Component &Loader，但似乎不是我想要的。(它仍然封装了整个QML类型，缺乏弹性，难以重用)

使用例子:

Card.qml

import QtQuick 2.0
import QtQuick.Layouts 1.3
Rectangle {
    default property var innerObject
    property string titleText: "[Hello Untitled Title]"
    id: root
    color: "#fff"
    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            id: header
            height: 10
            width: parent.width
            color: "#666"
            RowLayout {
                Text { text: titleText; color: "#fff" }
            }
        }
        // How to inject innerObject in here ?
    }
}

main.qml

import QtQuick 2.0
import QtQuick.Layouts 1.3
Card {
    titleText: "Image Information"
    ColumnLayout { /* .......*/ }   // innerObject
}
Card {
    titleText: "Image Viewer"
    Rectangle { /* .......*/ }      // innerObject
}

Answer 1

我链接的答案如下:

Main.qml

Card {
    titleText: "Image Viewer"
    innerObject: Rectangle {
        Component.onCompleted: {
            console.log(parent.objectName)
        }
    }
}

Card.qml

Rectangle {
    property string titleText: "[Hello Untitled Title]"
    default property alias innerObject : innercolumn.children

    id: root
    color: "#fff"
    ColumnLayout {
        id: innercolumn
        objectName: "column"
        anchors.fill: parent
        Rectangle {
            id: header
            height: 10
            width: parent.width
            color: "#666"
            RowLayout {
                Text { text: titleText; color: "#fff" }
            }
        }
    }
}

Answer 2

我还想提出一个基于默认属性和重定位的解决方案:

可以嵌入另一个Item的Item:

MyItem.qml

import QtQuick 2.7
import QtQuick.Layouts 1.2
Rectangle {
    id: root
    default property Item contentItem: null
    border {
        width: 1
        color: "#999"
    }
    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            Layout.fillWidth: true
            height: 30
            color: "lightgreen"
        }
        Item {
            id: container
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
    onContentItemChanged: {
        if(root.contentItem !== null)
            root.contentItem.parent = container;
    }
}

的用法如下:

main.qml

import QtQuick 2.7
import QtQuick.Window 2.0
Window {
    visible: true
    width: 600
    height: 600
    MyItem{
        width: 400
        height: 400
        anchors.centerIn: parent
        Text {
            text: "Hello!"
            anchors.centerIn: parent
        }
    }
}

但我仍然同意@ddriver的Loader是这种情况下的最佳解决方案

Answer 3

在组件中使用Loader并不是强制性的。你可以输入:

Loader {
   source: "Something.qml"
}

当源代码是可以同步加载的东西时，您可以直接使用加载器的item来处理绑定之类的东西，而不必担心是否创建了它。如果您通过网络加载，则必须延迟绑定，直到项目完成，并使用Binding元素或Qt.binding()分别以声明式或命令式的方式完成绑定。

在您的情况下，加载器将是合适的，并且内部动态对象的属性不应该是Component。通过这种方式，您可以使用内联组件或现有源代码中的Qt.createComponent()来填充它。

property Component innerObject
...
innerObject: Component { stuff }
...
innerObject: Qt.CreateComponent(source)

当然，还有更高级的方法可以做到这一点，例如，我在这里概述的"通用QML模型对象"。它允许快速轻松地以声明式和命令式方式创建任意数据结构树，并且由于对象也是一个模型，因此您可以直接使用带有中继器的listview或定位器元素来布局gui，而无需每次都实际编写UI代码。

同样，从您的main.qml代码示例中-您不能在qml文件中有多个根元素。

编辑:如果元素被移动到它自己的qml文件中，default property方法实际上是有效的，所以基本上你也可以:

default property alias innerObject: innerColumn.children

其中innerColumn是ColumnLayout的id。另外，innerObject可以是任何合法的名称，因为作为默认属性，它实际上不会被使用。

还可以选择不使用默认属性，这在根项仍然需要有自己的子项，但仍然能够将声明性对象重定向为子对象时非常有用:

property alias content: innerColumn.children
// and then
content: [ Obj1{}, Obj2{}, Obj3{} ] // will become children of innerColumn