QML ListView 的不同代表

Question

我想知道是否可以为 QML ListView 使用（多个）不同的代表。

根据ListView 模型中的单个对象，我想用不同的委托来可视化对象。

这段代码解释了我想要实现的目标：

ma​​in.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    ListModel {
        id: contactsModel
        ListElement {
            name: "Bill Smith"
            position: "Engineer"
        }
        ListElement {
            name: "John Brown"
            position: "Engineer"
        }
        ListElement {
            name: "Sam Wise"
            position: "Manager"
        }
    }

    ListView {
        id: contactsView
        anchors.left: parent.left
        anchors.top: parent.top
        width: parent.width
        height: parent.height
        orientation: Qt.Vertical
        spacing: 10
        model: contactsModel
        delegate: {
            if (position == "Engineer") return Employee;  //<--- depending on condition, load Contact{}
            else if (position == "Manager") return Manager; //<--- depending on condition, load Person{}
        }
    }
}

Employee.qml（我想用作委托的一个可能的组件）

import QtQuick 2.4

Rectangle{
    width: 200
    height: 50
    color: ListView.isCurrentItem ? "#003366" : "#585858"
    border.color: "gray"
    border.width: 1

    Text{
        anchors.centerIn: parent
        color: "white"
        text: name
    }
}

Manager.qml（我想用作委托的其他组件）

import QtQuick 2.4

Rectangle{
    width: 200
    height: 50
    color: "red"
    border.color: "blue"
    border.width: 1

    Text{
        anchors.centerIn: parent
        color: "white"
        text: name
    }
}

我将不胜感激任何建议！ 谢谢！

Answer 1

我也遇到了同样的问题，Qt 文档提供了一个很好的答案：http://doc.qt.io/qt-5/qml-qtquick-loader.html#using-a-loader-within-a-view-delegate

最简单的解决方案是使用Loader 内联Component 来设置source 文件：

ListView {
    id: contactsView
    anchors.left: parent.left
    anchors.top: parent.top
    width: parent.width
    height: parent.height
    orientation: Qt.Vertical
    spacing: 10
    model: contactsModel
    delegate: Component {
        Loader {
            source: switch(position) {
                case "Engineer": return "Employee.qml"
                case "Manager": return "Manager.qml"
            }
        }
    }
}

任何使用Loader.srcComponent 的尝试都会导致模型中缺少任何变量（包括index）。变量存在的唯一方法是子 Component 位于主 Component 内，但只能存在一个，所以没用。

Answer 2

我相信最好为所有类型的position 实现一个基本委托，它根据position 或使用Loader 的任何其他数据属性加载具体实现

BaseDelegate {
    property var position

    Loader {
        sourceComponent: {
            switch(position) {
                case "Engineer": return engineerDelegate
            }
        }
    }

    Component {
        id: engineerDelegate
        Rectangle {
             Text {  }
        }
    }
}

Answer 3

我实现如下：

ListView {
    id: iranCitiesList
    model: sampleModel
    delegate: Loader {
        height: childrenRect.height
        width: parent.width
        sourceComponent: {
            switch(itemType) {
            case "image" :
                return imageDel;
            case "video":
                return videoDel;
            }
        }
    }
    ImageDelegate { id: imageDel }
    VideoDelegate { id: videoDel }
}

ImageDelegate.qml

Component {
    Image { /*...*/ }
}

VideoDelegate.qml

Component {
    Item { /*....*/ }
}

最后一点，检查代表的宽度和高度。就我而言，我不得不再次在Loader 中设置我的代表的宽度和高度。
祝你好运 - 穆萨维

Answer 4

现在最简单的方法是使用DelegateChooser。这也允许您编辑委托的属性，这是使用 Loader 更难做到的事情！

受文档启发的示例：

import QtQuick 2.14
import QtQuick.Controls 2.14
import Qt.labs.qmlmodels 1.0

ListView {
    width: 640; height: 480

    ListModel {
        id: contactsModel
    ListElement {
        name: "Bill Smith"
        position: "Engineer"
    }
    ListElement {
        name: "John Brown"
        position: "Engineer"
    }
    ListElement {
        name: "Sam Wise"
        position: "Manager"
    }
   }

    DelegateChooser {
        id: chooser
        role: "position"
        DelegateChoice { roleValue: "Manager"; Manager { ... } }
        DelegateChoice { roleValue: "Employee"; Employee { ... } }
    }

    model: contractsModel
    delegate: chooser
}

Answer 5

就你只有两种类型而言，下面的代码既易于维护又易于理解：

delegate: Item {
    Employee { visible = position === "Engineer" }
    Manager { visible = position === "Manager" }
}

如果类型的数量会增加，这不是一个合适的解决方案，因为它很容易导致 if 语句的地狱。

Answer 6

当然，这是可能的。 ListView.delegate 是一种指向 Component 的指针，它将绘制项目以便您更改它。

例如：

Employee { id: delegateEmployee }
Manager { id: delegateManager}
...
ListView {  
    property string position   
    delegate: position == "Engineer" ? delegateEmployee : delegateManager
}