javascript - QML GridView モデルを JavaScript で変更する

Question

私は 1 つの ListView と 1 つの GridView を持っています。次のように想像してください。最初のビューはカテゴリを表示し、2 番目のビューは各カテゴリの記事を表示します。ListView の現在のインデックスが javascript によって変更されたときに、GridView のデータ モデルを動的に変更したいと考えています。どうやってそれを行うのですか？

Answer 1

新しいモデルを割り当てるだけです。ListModel のドキュメントに基づく 1 つの例を次に示します。このモデルは、モデル内の果物を左側の ListView に表示します。デリゲートをクリックすると、右側の GridView のモデルがattributesロールによって定義されたリストに設定されます。

import QtQuick 1.0

Item {
    width: 600; height: 400

    ListView {
        width: 300; height: 400
        model: fruitModel
        delegate: Text {
            font.pixelSize: 20
            text: name
            width: 300
            MouseArea {
                anchors.fill: parent
                onClicked: grid.model = attributes
            }
        }
    }

    GridView {
        id: grid
        x: 300; width: 300; height: 400
        delegate: Text {
            text: description
            font.pixelSize: 20
        }
    }

    ListModel {
     id: fruitModel

     ListElement {
         name: "Apple"
         cost: 2.45
         attributes: [
             ListElement { description: "Core" },
             ListElement { description: "Deciduous" }
         ]
     }
     ListElement {
         name: "Orange"
         cost: 3.25
         attributes: [
             ListElement { description: "Citrus" }
         ]
     }
     ListElement {
         name: "Banana"
         cost: 1.95
         attributes: [
             ListElement { description: "Tropical" },
             ListElement { description: "Seedless" }
         ]
     }
    }
}

これはネストされたモデルの例ですが、他にも可能性があります。たとえば、データベースからデータを取得している場合、別のモデルを設定するのではなく、GridView のモデルで使用されるクエリを変更するだけでよい場合があります。

Answer 2

モデルによって異なります。役割があり、メソッドがあるCategoriesModelと仮定します。categoryArticlesModelsetCategory

ListView {
    model: CategoriesModel {}
    delegate: Item {
        MouseArea {
            anchors.fill: parent
            onClicked: {
                grid_view.model.setCategory(model.category)
            }
        }
        // ...
    }
}

GridView {
    id: grid_view
    model: ArticlesModel {}
    // ...
}