4

如何制作一些可重用的 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
}
4

3 回答 3

4

我链接的答案是这样的：

主.qml

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

卡片.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" }
            }
        }
    }
}
于 2016-09-21T11:56:33.893 回答
4

我还想提出一个基于默认属性和重新设置的解决方案：

可以嵌入另一个 Item 的 Item：

我的项目.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是这种情况下的最佳解决方案

于 2016-09-21T12:47:02.563 回答
2

Loader将 a与组件一起使用不是强制性的。你可以去：

Loader {
   source: "Something.qml"
}

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

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

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

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

此外，从您的main.qml代码示例中 - 一个 qml 文件中的根元素不能超过一个。

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

default property alias innerObject: innerColumn.children

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

还有不使用默认属性的选项，这在根项仍需要有自己的子项但仍具有将声明性对象重定向为子对象的子项的能力时很有用：

property alias content: innerColumn.children
// and then
content: [ Obj1{}, Obj2{}, Obj3{} ] // will become children of innerColumn
于 2016-09-21T11:37:23.453 回答