通过javascript更改QML GridView模型

Change QML GridView model by javascript

本文关键字：GridView 模型 QML 更改 javascript 通过      更新时间：2023-10-01

我有一个ListView和一个GridView。想象一下：第一个视图显示类别，第二个视图显示每个类别中的文章。当ListView的当前索引通过javascript更改时，我想动态更改GridView的数据模型。我们该怎么做？

您只需要分配一个新模型。下面是一个基于ListModel文档的示例。此模型在左侧的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模型使用的查询，而不需要设置不同的模型。

取决于您的型号。假设CategoriesModel具有category角色，ArticlesModel具有setCategory方法：

ListView {
    model: CategoriesModel {}
    delegate: Item {
        MouseArea {
            anchors.fill: parent
            onClicked: {
                grid_view.model.setCategory(model.category)
            }
        }
        // ...
    }
}
GridView {
    id: grid_view
    model: ArticlesModel {}
    // ...
}
相关文章：