QML StackView如何推送定义在单独文件中的组件？答案

【问题标题】：QML StackView how to push a component defined in a separate file?QML StackView如何推送定义在单独文件中的组件？
【发布时间】：2018-02-12 12:27:46
【问题描述】：

我在 Qt 5.9 中使用 Qt Quick 2.1 时遇到了一些困难。具体来说，我正在努力让 StackView QML 组件完成我需要它做的事情。我正在尝试使用属性推送在单独的 QML 文件中定义的项目，这是对我所做工作的描述。

qml/main.qml

这包含保存屏幕的 StackView QML 组件。 initialItem 正确显示 OverView 屏幕，因此您可以说这基本上按预期工作。

// import ...
import "screens"

StackView {
    id: mainView
    initialItem: OverviewScreen {}
}

qml/screens/OverviewScreen.qml

这是 OverView 屏幕，其中包含一个 GridView。当单击 GridView 的委托时，我想使用 GridView 委托上的附加属性“Id”初始化 ItemDetailScreen 的实例，这是附加模型的角色。

// import ...
import "screens"

Item {
    // ...
    GridView {
        // model: ...
        delegate: Item {
            // ...
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    mainView.push({item: ItemDetailScreen, parameters: {id: Id}}) // ERROR
                }
            }
        }
    }
}

qml/screens/ItemDetailScreen.qml

这包含各种 QML 组件，但它遵循熟悉的模式，以 Item 作为根组件。

// import ...

Item {
    // ...
}

问题是，当 GridView 委托的 onClicked 处理程序被执行时，我会在屏幕上打印一个错误，引用 ItemDetailScreen 被推送到 mainView 的行。

如果我像这样向 OverviewScreen 添加一个组件属性：property Component detailScreen: ItemDetailScreen {} 然后将推送更改为 mainView.push(detailScreen) 然后推送成功并且我看到了屏幕，但是我仍然无法传递任何属性，因为mainView.push({item: detailScreen, properties: {id: Id}}) 也因错误而失败。

所以我的问题确实是这样的：使用属性推送 ItemDetailScreen 实例的正确方法是什么？

【问题讨论】：

id 不是一个属性，你正在尝试做什么很可能不是正确的方法。
如果可能的话，您能否参考一个正确方法的示例？

标签： qt qml

【解决方案1】：

你必须创建一个对象实例：

mainView.push(Qt.createComponent("qml/screens/ItemDetailScreen.qml").createObject())

id 不是常规属性，您无法按照您尝试的方式设置它，它必须在 QML 源中预定义，您只能设置常规属性：

Qt.createComponent("qml/screens/ItemDetailScreen.qml").createObject(parentItem, {"width" : 50, "height" : 50})

另一种指定属性的方法是使用Component：

Component {
  id: iComp
  ItemDetailScreen { width: 50; height: 50 } // specify property bindings
}
...
iComp.createObject(parentItem) // create an instance of the component

【讨论】：