qt - Diferentes delegados para QML ListView

qtquick2

Question

Me gustaría saber si es posible usar (varios) delegados diferentes para un ListView QML.

Dependiendo del objeto individual en el modelo ListView , me gustaría visualizar los objetos con diferentes delegados.

Esta pieza de código explica lo que quiero lograr:

main.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 (un componente posible que me gustaría usar como delegado)

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 (otro componente que me gustaría usar como delegado)

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
}
}

¡Apreciaría cualquier consejo! ¡Gracias!

Answer 1

Claro, es posible. ListView.delegate es un tipo de puntero a un Component que dibujará los elementos para que pueda cambiarlo.

Por ejemplo:

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

Answer 2

Creo que sería mejor implementar un delegado base para todo tipo de position que cargue la implementación concreta en función de la position o cualquier otra propiedad de datos utilizando Loader

BaseDelegate {
property var position
Loader {
sourceComponent: {
switch(position) {
case "Engineer": return engineerDelegate
}
}
}
Component {
id: engineerDelegate
Rectangle {
Text { }
}
}
}

Answer 3

En la medida en que solo tiene dos tipos, el siguiente código es tan fácil de mantener como fácil de entender:

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

En caso de que el número de tipos crezca, no es una solución adecuada, ya que fácilmente conduce a una sentencia if if.

Answer 4

He tenido el mismo problema, la documentación de Qt proporciona una respuesta bastante buena: http://doc.qt.io/qt-5/qml-qtquick-loader.html#using-a-loader-within-a-view-delegate

La solución más fácil es un Component línea con un Loader para establecer un archivo de 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"
}
}
}
}

Cualquier intento de usar Loader.srcComponent hará que falte alguna variable del modelo (incluido el index ). La única forma de que las variables estén presentes es que el Component esté dentro del Component principal, pero entonces solo puede estar presente uno, por lo que es inútil.

Answer 5

Lo implementé de la siguiente manera:

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 { /*....*/ }
}

Última nota, consultar ancho y alto de delegados. En mi caso, tuve que establecer el ancho y la altura de mi delegado en el Loader nuevo.
Buena suerte - Mousavi