如何定义“模板"?QML 中有子占位符? [英] How to define a "template" with child placeholders in QML?

问题描述

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

I really like QML. I like how I can define components (comparable to classes) and their properties, and instantiate them from somewhere else (comparable to objects).

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

I can define, let's say, a button, having some look and feel, and a label text on it. This could be done, for example, using this component definition (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)中实例化:

and instanciated in this main file (main.qml):

Rectangle {
    width: 300
    height: 200

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

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

But I see the following restriction: I can only define a button template with some properties, not with some placeholder. All children defined in the instance will be direct children, at least per default, and I want to change this behavior.

假设我想在按钮中放置一个项目(假设是一个图像，但我不想告诉 Button 的定义它将是一个图像).我想像这样:

Let's say I want to place an item (let's say an image, but I don't want to tell the definition of Button that it will be an image) in the button. I imagine something like this:

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 是否正确.但是请注意，在我的情况下，内容之后永远不会改变(至少在我当前的应用程序设计中......).

How can I achieve this? I don't know if using Component.onCompleted is the correct way. Note that, however, that in my case the contents will never change afterwards (at least in my current design of the application...).

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

Also, I want anchoring to work within the placeholder. For example, if I define the contents to be a Text element, being centered in its parent (which will first be the template itself). Then my code moves this Text instance into the placeholder and the parent anchors should then be those of the placeholder item, not the template item.

推荐答案

我在 2011 年 Qt 开发者日的演示文稿中找到了一个更好的答案来解决这个问题 Qt Quick 最佳实践和设计模式".

I found a much nicer answer to this question, suggested in a presentation of the Qt Developer Days 2011 "Qt Quick Best Practices and Design Patterns".

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

They use default property alias ... to alias the child items to any property of any item. If you don't want to alias the children but give the alias property a name, just remove default. (Literal children are per QML definition the value of the default property.)

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
        }
    }
}

这篇关于如何定义“模板"?QML 中有子占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！