Question

我需要创建嵌套列表视图，如下所示，并突出显示不同颜色的主列表和子列表我已尝试使用ListView高亮显示，但有一个问题，如显示为儿童和父母的高亮显示在图像下面。

我正在使用here中的代码进行一些小修改。

这是完整的代码

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1

ApplicationWindow {

    id: loginWindow
    //visibility: "Maximized"
    visible: true
    width: 720
    height: 720

    Item {
        width: 200
        height: 720

        ListView {
            id: list
            anchors.fill: parent
            model: nestedModel
            delegate: categoryDelegate
            highlight: Rectangle {
                color: "#FF00AAFF" //"#FF59ACFF";
                radius: 2
            }
        }

        ListModel {
            id: nestedModel
            ListElement {
                categoryName: "Veggies"
                collapsed: true

                // A ListElement can't contain child elements, but it can contain
                // a list of elements. A list of ListElements can be used as a model
                // just like any other model type.
                subItems: [
                    ListElement {
                        itemName: "Tomato"
                    },
                    ListElement {
                        itemName: "Cucumber"
                    },
                    ListElement {
                        itemName: "Onion"
                    },
                    ListElement {
                        itemName: "Brains"
                    }
                ]
            }

            ListElement {
                categoryName: "Fruits"
                collapsed: true
                subItems: [
                    ListElement {
                        itemName: "Orange"
                    },
                    ListElement {
                        itemName: "Apple"
                    },
                    ListElement {
                        itemName: "Pear"
                    },
                    ListElement {
                        itemName: "Lemon"
                    }
                ]
            }

            ListElement {
                categoryName: "Cars"
                collapsed: true
                subItems: [
                    ListElement {
                        itemName: "Nissan"
                    },
                    ListElement {
                        itemName: "Toyota"
                    },
                    ListElement {
                        itemName: "Chevy"
                    },
                    ListElement {
                        itemName: "Audi"
                    }
                ]
            }
        }

        Component {
            id: categoryDelegate
            Column {
                width: 200

                Rectangle {
                    id: categoryItem
                    border.color: "black"
                    border.width: 5
                    color: "#33FF5225"
                    height: 50
                    width: 200

                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        x: 15
                        font.pixelSize: 24
                        text: categoryName
                    }

                    Rectangle {
                        color: "red"
                        width: 30
                        height: 30
                        anchors.right: parent.right
                        anchors.rightMargin: 15
                        anchors.verticalCenter: parent.verticalCenter

                        MouseArea {
                            anchors.fill: parent

                            // Toggle the 'collapsed' property
                            onClicked: {
                                list.currentIndex = index
                                nestedModel.setProperty(index, "collapsed",
                                                        !collapsed)
                            }
                        }
                    }
                }

                Loader {
                    id: subItemLoader

                    // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
                    // the Loader element retains the same height it had when sourceComponent was set. Setting visible
                    // to false makes the parent Column treat it as if it's height was 0.
                    visible: !collapsed
                    property variant subItemModel: subItems
                    sourceComponent: collapsed ? null : subItemColumnDelegate
                    onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
                }
            }
        }

        Component {
            id: subItemColumnDelegate
            Column {
                property alias model: subItemRepeater.model
                width: 200
                Repeater {
                    id: subItemRepeater
                    delegate: Rectangle {
                        x: 10
                        color: "#33FF5225"
                        height: 40
                        width: 190
                        border.color: "black"
                        border.width: 2

                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            x: 30
                            font.pixelSize: 18
                            text: itemName
                        }
                    }
                }
            }
        }
    }
}

我如何克服这个问题。基本上我需要用不同颜色突出显示父项和子项。

修改

我可以使用代码

突出显示父列表

color:categoryDelegate.ListView.isCurrentItem ? "#FF00AAFF" : "#CCBBBBBB"

但是请找到类似的方法来更改点击子列表（子列表）的颜色。

Answer 1

根据您的选择更改color中delegate的{{1}}属性。

实施例

subItemRepeater

同样更改Component { id: subItemColumnDelegate Column { ... Repeater { id: subItemRepeater delegate: Rectangle { ... color: "purple" ... } } } }中的color属性categoryItem。实施例

categoryDelegate

修改

在这种情况下，整体概念是错误的。在原始代码的评论中，作者撰写了Component { id: categoryDelegate Column { ... Rectangle { id: categoryItem ... color: "blue" ... } } }。所以我们无法突出显示子项。但是以下方法会给你带来好结果。

A ListElement can't contain child elements, but it can contain a list of elements

带有突出显示的QML嵌套列表视图

1 个答案: