qt - ListView issue in QML

Question

I'm trying to develop an application which has multi-layered navigation in drop-downs. Below is the snapshot of the requirement. On clicking QSR only the subitems of QSR should pop out with proper alignment.

But with my implementation, I'm getting following result. The pop out window is not aligned, but extending itself to the list.

Below is the my code snippet

import QtQuick 1.1

Item {
    width: 500
    height: 300

    ListView {
        anchors.fill: parent
        model: nestedModel
        delegate: categoryDelegate
    }

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

            subItems: [
                ListElement { itemName: "KFC" },
                ListElement { itemName: "Mc Donalds" },
                ListElement { itemName: "Pizza Hut" },
                ListElement { itemName: "Brain's" }
            ]
        }

        ListElement {
            categoryName: "Drinks"
            collapsed: true
            subItems: [
                ListElement { itemName: "Pepsi" },
                ListElement { itemName: "Coke" },
                ListElement { itemName: "7up" },
                ListElement { itemName: "Bacardi" }
            ]
        }
    }

    Component {
        id: categoryDelegate
        Column {
            width: 200

            Rectangle {
                id: categoryItem
                border.color: "black"
                border.width: 5
                color: "white"
                height: 50
                width: 200
                anchors.left: parent.right

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

                MouseArea {
                    anchors.fill: parent
                    onClicked: nestedModel.setProperty(index, "collapsed", !collapsed)
                }

            }


            Loader {
                id: subItemLoader
                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 {
                    color: "#cccccc"
                    height: 40
                    width: 200
                    border.color: "black"
                    border.width: 2

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

Any help to achieve original requirement will be appreciable.

Answer 1

仔细查看主列表视图的委托：它是Column主菜单项和Loader弹出菜单的（将项目放在每个项目的顶部）。显然，一旦您加载一个弹出菜单，它就会显示在列表中相应的菜单项下。

要获得您想要的行为，您必须将Loader弹出菜单的 移出ListView：

import QtQuick 1.1

Item {
    width: 400
    height: 300

    Row {
        anchors.fill: parent

        Loader {
            id: subItemLoader
            width: 200
            height: parent.height
            property variant subItemModel: null
            sourceComponent: subItemModel == null? null: subItemColumnDelegate
            function setModel() {
                if (status == Loader.Ready) item.model = subItemModel
            }
            onStatusChanged: setModel()
            onSubItemModelChanged: setModel()
        }

        ListView {
            width: 200
            height: parent.height
            model: nestedModel
            delegate: categoryDelegate
        }
    }


    ListModel {
        id: nestedModel
        ListElement {
            categoryName: "QSR"

            subItems: [
                ListElement { itemName: "KFC" },
                ListElement { itemName: "Mc Donalds" },
                ListElement { itemName: "Pizza Hut" },
                ListElement { itemName: "Brain's" }
            ]
        }

        ListElement {
            categoryName: "Drinks"
            subItems: [
                ListElement { itemName: "Pepsi" },
                ListElement { itemName: "Coke" },
                ListElement { itemName: "7up" },
                ListElement { itemName: "Bacardi" }
            ]
        }
    }

    Component {
        id: categoryDelegate

        Rectangle {
            id: categoryItem
            border.color: "black"
            border.width: 5
            color: "white"
            height: 50
            width: 200

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

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (subItemLoader.subItemModel != subItems)
                        subItemLoader.subItemModel = subItems
                    else
                        subItemLoader.subItemModel = null
                }
            }
        }

    }

    Component {
        id: subItemColumnDelegate
        Column {
            property alias model : subItemRepeater.model
            width: 200
            height: 500
            Repeater {
                id: subItemRepeater
                delegate: Rectangle {
                    color: "#cccccc"
                    height: 40
                    width: 200
                    border.color: "black"
                    border.width: 2

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

}