qt - QML の ListView の問題

Question

ドロップダウンに多層ナビゲーションを持つアプリケーションを開発しようとしています。以下は、要件のスナップショットです。QSR をクリックすると、QSR のサブアイテムのみが適切に配置されて表示されます。

しかし、私の実装では、次の結果が得られています。ポップアウトウィンドウは整列されていませんが、リストに拡張されています。

以下は私のコードスニペットです

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

元の要件を達成するための助けはかなりのものです。

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

}