根据属性选择代表

Question

我有一个列表视图，我想根据属性的值使用 defaultDelegate 或 customDelegate。 到目前为止，我已经尝试使用一个组件来加载不同的委托：

 Component{
    id: delegate
    Loader {
        sourceComponent: type == 3 ? customDelegate : defaultDelegate
    }
}

但是，我无法从我拥有的两个委托访问模型中的属性。我有以下错误：

ReferenceError: name is not defined

这是我使用的模型：

ListModel {
     id: test
     ListElement {
         name: "Bill"
         team: "554"
         type: 2
     }
     ListElement {
         name: "John"
         team: "555"
         type: 3
     }
     ListElement {
         name: "Sam"
         team: "556"
         type: 1
     }
 }

有没有人知道我在这里做错了什么？

Answer 1

当然，这是一个上下文问题。在您的代码中，ListView 插入到delegate 的上下文中的name、team 和type 上下文属性对于您的代表内部的组件是不可访问的，因为Loader 使用的创建上下文customDelegate 和 defaultDelegate 在实例化它们时作为父上下文，name、team 和 type 不引用该上下文链中的任何内容。 一种解决方案是将所需信息显式设置为Loader 的属性（这是因为Loader 将自身设置为其正在加载的组件的上下文对象）。

以下工作示例：

ListModel {
     id: testModel
     ListElement {
         name: "Bill"
         team: "554"
         type: 2
     }
     ListElement {
         name: "John"
         team: "555"
         type: 3
     }
     ListElement {
         name: "Sam"
         team: "556"
         type: 1
     }
 }

ListView {
    anchors.fill: parent
    model: testModel

    delegate: myDelegate
}

Component {
    id: myDelegate // yourDelegate
    Loader {
        property string modelName: model.name
        property string modelTeam: model.team
        property int modelType: model.type
        sourceComponent: modelType === 3 ? colonDelegate : semicolonDelegate
    }
}

Component {
    id: colonDelegate
    Text { text: modelName + ": " + modelTeam }
}

Component {
    id: semicolonDelegate
    Text { text: modelName + "; " + modelTeam }
}

为了进一步阅读和改进，我强烈建议您阅读this。