如何在 QML 中定义带有子占位符的“模板”？

Question

我真的很喜欢 QML。我喜欢如何定义组件（类似于类）及其属性，并从其他地方实例化它们（类似于对象）。

我可以定义，比如说，一个按钮，有一些外观和感觉，以及它上面的标签文本。例如，可以使用此组件定义 (Button.qml)：

Item {
    id: button
    property string label

    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        radius: 10
        color: "gray"

        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            text: button.label
            color: "white"
        }
    }
}

并在这个主文件中实例化 (main.qml)：

Rectangle {
    width: 300
    height: 200

    Button {
        anchors.centerIn: parent
        anchors.margins: 50
        label: "Hello button!"
    }
}

但我看到了以下限制：我只能定义一个按钮模板带有一些属性，而不是带有一些占位符。实例中定义的所有子代都将是直接子代，至少在默认情况下，我想更改此行为。

假设我想在按钮中放置一个项目（假设是一个图像，但我不想告诉Button 的定义它将是一个图像）。我想像这样：

Item {
    id: button
    property Item contents   <-- the client can set the placeholder content here

    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        radius: 10
        color: "gray"

        Item {
            id: placeholder     <-- where the placeholder should be inserted
        }
    }

    Component.onCompleted: {
        // move the contents into the placeholder...
    }
}

我怎样才能做到这一点？我不知道使用Component.onCompleted 是否正确。但是请注意，在我的情况下，内容之后永远不会改变（至少在我当前的应用程序设计中......）。

另外，我希望锚定在占位符内工作。例如，如果我将内容定义为 Text 元素，以它的父元素为中心（首先是模板本身）。然后我的代码将此 Text 实例移动到占位符中，然后父锚点应该是占位符项的那些，而不是模板项。

Answer 1

实际上，我所听到的正确答案是使用QML Loader 来完成您想要的。

[话虽这么说；我实际上还没有尝试过，但它在我的近期尝试列表中，看起来相当简单]

此外，请在 stackoverflow 中搜索其他 "QML Loader" 问题，因为有一个数字可以帮助您入门。

Answer 2

您可以使用以下代码移动项目（如果您想在占位符中支持多个项目）：

property list<Item> contents

Component.onCompleted: {
    var contentItems = [];
    for(var i = 0; i < contents.length; ++i)
        contentItems.push(contents[i]);
    placeholder.children = contentItems;
}

请注意，您不必为 content 属性提供项目列表，因为 QML 引擎也将接受单个值用于列表属性。

Answer 3

简而言之（展示想法）：

import QtQuick 1.1

Item {
    width: 200
    height: 100

    //<-- the client can set the placeholder content here
    property Item contents: Rectangle {
        anchors.fill: parent
        anchors.margins: 25
        color: "red"
    }

    Rectangle {
        id: container

        anchors.fill: parent
        radius: 10
        color: "gray"

        //<-- where the placeholder should be inserted
    }

    Component.onCompleted: {
        contents.parent = container
    }
}

稍长的版本（支持内容重新分配）：

import QtQuick 1.1

Item {
    width: 200
    height: 100

    //<-- the client can set the placeholder content here
    property Item contents: Rectangle {
        //anchors can be "presupplied", or set within the insertion code
        //anchors.fill: parent
        //anchors.margins: 25
        color: "red"
    }

    Rectangle {
        id: container

        anchors.fill: parent
        radius: 10
        color: "gray"

        //<-- where the placeholder should be inserted
        //Item {
        //    id: placeholder
        //}
    }

    //"__" means private by QML convention
    function __insertContents() {
        // move the contents into the placeholder...
        contents.parent = container
        contents.anchors.fill = container
        contents.anchors.margins = 25
    }

    onContentsChanged: {
        if (contents !== null)
            __insertContents()
    }

    Component.onCompleted: {
        __insertContents()
    }
}

希望这会有所帮助:)

Answer 4

我在 2011 年 Qt 开发者日"Qt Quick Best Practices and Design Patterns" 的演示文稿中找到了这个问题的更好答案。

他们使用default property alias ... 将子项别名到任何项的任何属性。如果您不想为 children 设置别名，而是为 alias 属性命名，只需删除 default。 （文字子项是每个 QML 定义的默认属性的值。）

Item {
    id: button
    default property alias contents: placeholder.children

    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        radius: 10
        color: "gray"

        Item {
            id: placeholder     <-- where the placeholder should be inserted
        }
    }
}

Answer 5

Necro 会回答，以防其他人像我一样来到这里。

在 Qt5 的某个地方，默认属性变为“data”而不是“children”。 这使得添加“项目”以外的其他对象类型成为可能。 例如也可以添加连接（在上面回答我自己的问题）

所以在 Qt5 中你应该这样做：

Item {
    id: button
    default property alias contents: placeholder.data

    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        radius: 10
        color: "gray"

        Item {
            id: placeholder     <-- where the placeholder should be inserted
        }
    }
}

注意： placeholder.data 而不是 placeholder.children 另请注意，您不必使用别名contents - 这可以是您喜欢的任何名称。一个例子：

Item {
    id: button
    default property alias foo: placeholder.data
    ...

}