通过javascript更改QML GridView模型

Question

我有一个ListView和一个GridView。想象一下这样：第一个视图呈现类别，第二个视图呈现每个类别中的文章。当ListView的当前索引由javascript更改时，我想动态更改GridView的数据模型。我们如何做到这一点？

Answer 1

您只需分配一个新模型。以下是一个基于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模型使用的查询，而不是设置不同的模型。

Answer 2

取决于您的模型。假设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 {} 
    // ... 
}