根据 listElement 键切换 listView 的委托

Question

我有一个动态填充的ListModel。我想为模型中的一个元素选择/切换委托（所有其他元素都应该与另一个委托一起查看），这可能吗？

我的 QML 模型有两个加载的组件委托。我希望当listElement 的“键”与一个值（“link”）匹配时，委托被设置为其中一个组件。我通过设置listView.delegate 来做到这一点；问题是选择似乎有效，但它会递归地更改所有元素的委托，包括已加载的元素，我最终只为listView 加载了一个委托。

我在 SO 中看到了许多解决方案，但没有一个与我的用例相匹配，在大多数情况下，post 看起来很相似，但它动态加载委托组件，我不确定它是否有效，我不知道希望最终动态加载组件。这是我的 QML 代码，包括我如何填充模型和选择委托：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3

Window {
    visible: true
    id: mainQML
    width: 640
    height: 480

    title: qsTr("Offers View")
    Item {
        id: offersPage

        ListModel{
            id: barcdeLockupOffers
            // model will be dynamically populated.
            // Depending on value of key , I want to select listView delegete.
            ListElement {
                key: ""
                value: ""
            }
        }
        Component {
            id: offersTextDelegate
            Rectangle {
                id: offersRect
                anchors { left: parent.left; right: parent.right}
                height: offersColumn.implicitHeight + 4
                border.width: 1
                border.color: "lightsteelblue"
                radius: 2
                Column {
                    id: offersColumn
                    //Text { text: "Merchent: " + merchant ; property bool useStyle: true}
                    Text {
                        id: offerdata
                        text: '<font color="blue" size=14> <b>' + key +':' + '</b> </font>'  + value + '\n\n';
                        width: mainQML.width - 40
                        height: 30
                        wrapMode: Text.Wrap
                    }
                }
            }
        }
        Component {
            id: offersHTTPDelegate
            Rectangle {
                id: offersRect2
                anchors { left: parent.left; right: parent.right}
                height: offersColumn2.implicitHeight + 4
                border.width: 1
                border.color: "lightsteelblue"
                radius: 2
                Column {
                    id: offersColumn2
                    Text {
                        text: "<a href=" + value + ">" + "Click here for Offer details" + "</a>"
                        color: "blue"
                        property bool useStyle: true
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                parent.color="grey"
                                Qt.openUrlExternally(value)
                            }
                        }
                    }
                }
            }
        }

        ListView {
            id: offersView
            anchors.top: parent.top
            height: mainQML.height - 100
            anchors.margins: 10
            model: barcdeLockupOffers
        }
    }
    Component.onCompleted: {
        barcdeLockupOffers.clear();
        var listModelKeys= ["Title", "Price", "Condition", "Avalability", "link"]
        var listModelValues = ["Coffee Machine", "14", "New", "Available", "https://www.amazon.com/Nespresso-VertuoPlus-Coffee-Espresso-DeLonghi/dp/B01NBJ2UT5/ref=sr_1_1_sspa?s=home-garden&ie=UTF8&qid=1527543544&sr=1-1-spons&keywords=coffee+maker&psc=1"]

        for (var x = 0 ; x < listModelKeys.length ; x++){
            barcdeLockupOffers.append({key: listModelKeys[x] , value: listModelValues[x]})
            //console.log("Key = : " +  listModelKeys[x])
            if (listModelKeys[x] === "link")
                offersView.delegate = offersHTTPDelegate
            else
                offersView.delegate = offersTextDelegate
        }
    }
}

Answer 1

如您所知，delegate 对所有项目都是通用的，您不能为指定项目分配不同的委托。 最简单的方法是使用Loader，例如：

import QtQuick 2.10
import QtQuick.Window 2.2

Window {
    visible: true
    width:480
    height: 640
    title: qsTr("Test")

    Component {
        id: type1
        Rectangle {
            color: "yellow"
            anchors.fill: parent
        }
    }
    Component {
        id: type2
        Rectangle {
            color: "orange"
            anchors.fill: parent
        }
    }

    ListView {
        anchors.fill: parent
        model: 10
        delegate: Loader {
            sourceComponent: index % 2 ? type1 : type2
            height: 30
            width: parent.width
        }
    }
}