如何将属性传递给 Loader 创建的对象？

Posted 2023-02-16

【中文标题】如何将属性传递给 Loader 创建的对象？

【英文标题】：How to pass properties to a Loader created object?

【发布时间】：2017-05-30 20:16:05

【问题描述】：

我有一个 QML Loader 加载另一个 qml

Loader  id: gaugeLoader 

PieMenu 
    id: pieMenu

    MenuItem 
        text: "Add Bar Gauge"
        onTriggered: gaugeLoader.source = "qrc:/Gauges/horizontalBarGauge.qml"
    
    MenuItem 
        text: "Action 2"
        onTriggered: print("Action 2")
    
    MenuItem 
        text: "Action 3"
        onTriggered: print("Action 3")
    

如何通过参数设置加载的qml的ID、width、height等？

【参考方案1】：

方法一： Loader::setSource

构造时可以使用Loader::setSource(url source, object properties)函数设置属性，例如：

gaugeLoader.setSource("qrc:/Gauges/horizontalBarGauge.qml", "width": 100, "height": 100);

注意不能这样设置id attribute，因为它不是普通的属性属性：

一旦创建了一个对象实例，它的 id 属性的值 无法更改。虽然它可能看起来像一个普通的属性，但 id 属性不是普通的属性属性，有特殊的语义 适用于它；例如，无法访问 myTextInput.id 在上面的例子中。

相反，您可以按如下方式创建属性别名：

property alias gauge: gaugeLoader.item

方法2：相对于Loader对象的几何体

作为替代方案，您可以在Loader 对象上设置width 和height，并在horizontalBarGauge.qml 中指定相对于其父对象（即Loader 对象）的宽度和高度。

property alias gauge: gaugeLoader.item
Loader  
    id: gaugeLoader 
    width: 100
    height: 100

qrc:/Gauges/horizo​​ntalBarGauge.qml:

Item 
    anchors.fill: parent

【参考方案2】：

如果没有@m7913d，我永远不会想到这一点。我正在扩展他的答案（使用选项 2）来帮助其他试图做与我类似的事情的人：

将委托传递给显示来自 AbstractListViewModel 的数据的 GridView 委托由 Loader 注入的 SourceComponent

注意：我很难理解 Loader 正在接收 model::data(..) 返回的 UserData。

使用Loader传递model::data(.....)返回的UserData

GridView 
    id: trainingDataSelectGrid
    anchors.fill: parent

    cellWidth: parent.width/3
    cellHeight: parent.height/2

    model: trainingDataListModel
    delegate: Component 
        id: trainingDataDelegate
        Loader 
            sourceComponent: 
                if (index == 0) 
                    return trainingDataModel.addNewComp
                 else 
                    return trainingDataModel.dataComp
                
            
            // Loader binds properties to the source component
            // passed to the view delegate
            property string _name: name
            property string _author: author
            property string _author_email: author_email
            property string _created: created
            property string _updated: updated
            property int _net: net
            property int _img_width: img_width
            property int _img_height: img_height
            property int _index: index
        
    
    TrainingDataModel 
        id: trainingDataModel
        cardWidth: trainingDataSelectGrid.cellWidth
        cardHeight: trainingDataSelectGrid.cellHeight
    

我的两个源组件都存在于trainingDataModel（QML：TrainingDataModel）中。

之前：

property Component dataComp: activeCard
property Component addNewComp: addNew
property string name
property string author
property string author_email
property string created
property string updated
property int net
property int img_width
property int img_height
property int index

property int cardWidth
property int cardHeight

property int paneWidth: cardWidth * 0.95
property int paneHeight: cardHeight * 0.95
property int materialElevate: 5
property string materialBgColor: "white"

id: cardBody

Component 
    id: addNew
    Rectangle 
        id: card
    


Component 
    id: activeCard
        Rectangle......
    

之后：将变量移动到 Loader 将实例化的组件的范围内

property Component dataComp: activeCard
property Component addNewComp: addNew

property int cardWidth
property int cardHeight

property int paneWidth: cardWidth * 0.95
property int paneHeight: cardHeight * 0.95
property int materialElevate: 5
property string materialBgColor: "white"

id: cardBody

Component 
    id: addNew


Component 
    id: activeCard

    Rectangle 
        id: activeCardBackground
        width: cardWidth
        height: cardHeight
        color: "transparent"

        property string name: _name
        property string author: _author
        property string author_email: _author_email
        property string created: _created
        property string updated: _updated
        property int net: _net
        property int img_width: _img_width
        property int img_height: _img_height
        property int index: _index

        /// Use properties below
    

使用临时变量（即 _xxxx）避免命名冲突，将值从加载器传递到委托源组件