如何加载相同的 QML 文件并传递不同的属性

Posted 2023-02-17

【中文标题】如何加载相同的 QML 文件并传递不同的属性

【英文标题】：How to load the same QML file and pass them different properties

【发布时间】：2019-04-17 12:16:49

【问题描述】：

我有一个 index.qml 文件，它由两个以 3:1 的比例填充屏幕的矩形组成。在他们两个中，我都加载了相同的 window.qml 文件。我需要为属性 ORIENT 分配不同的值，因此 window.qml 的行为会有所不同。

看下面的例子。这个 ORINET 只是为了展示我想要达到的目标......

index.qml

Rectangle 
    id: rootA
    anchors.left: parent.left
    anchors.top: parent.top
    width: parent.width * 0.65

    // set some property or function so it will be seen in loaded window.qml
    // sth like:
    property ORINET: "horizontal"

    Loader 
        anchors.left: parent.left; anchors.top: parent.top;
        anchors.right: parent.right; anchors.bottom: parent.bottom
        source: "window.qml"
    


Rectangle 
    id: rootB
    anchors.right: parent.right
    anchors.top: parent.top
    width: parent.width * 0.35

    // set some property or function so it will be seen in loaded window.qml
    // sth like:
    property ORINET: "vertical"

    Loader 
        anchors.left: parent.left; anchors.top: parent.top;
        anchors.right: parent.right; anchors.bottom: parent.bottom
        source: "window.qml"
    

window.qml

Rectangle 
    id: windowBox
    state [
        ...
    ]
    ...
    Component.onCompleted: 
        windowBox.state = ORINET
    

【参考方案1】：

根据这个documentation，您可以为Loader 提供一个属性，该属性也可用于加载的项目：

Loader 
    anchors.fill: parent
    property int ORINET: "vertical
    source: "window.qml"

window.qml：

Rectangle 

    states: [
        ...
    ]
    state: ORINET

请注意，在 QtCreator 中，state: ORINET 可能看起来像斜体和蓝色，就好像它不存在一样，但这只是编辑器

【讨论】：

我没有根据您的示例进行定制，因为我不完全了解您打算如何使用状态，是不是 QML 状态机制？

@pi.314 我编辑了我的答案以更多地反映您的情况。另请注意，您可以只做anchors.fill: parent，而不是单独做所有四个边;-)