通過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 {} 
    // ... 
}