Qml，更新listview项中的网格视图

Question

我有一个列表视图，在这个列表中，每个项目都有一个网格视图：

ListView{
           id:list_roi
           anchors.fill: parent

           delegate: roi_item_view
           model: roi_item_model

           spacing: 5
           clip: true
           focus: true
           ScrollBar.vertical: ScrollBar {}

           onCurrentIndexChanged: {
                valueUpdater.selected_roi_changed(list_roi.currentIndex)
           }
           highlight: Rectangle {
               color: 'lightgray'
           }

       }

ListModel{
           id:roi_item_model
           ListElement {roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
       }

Component{
           id:roi_item_view
           MouseArea {
               anchors.fill: parent
               onClicked: list_roi.currentIndex = index
           }
           GridLayout{
               id:layout_wrapper
               anchors.fill: parent
               rows: 3
               columns: 5

               GridView {
                   id:grid_sub_region
                   Layout.row: 2
                   Layout.column: 0
                   Layout.columnSpan:5
                   Layout.alignment: Qt.AlignHCenter
                   width: roi_cols * 30; height: roi_rows * 30
                   cellWidth: 30; cellHeight: 30
                   visible : true

                   model: roi_subregion_model
                   delegate: contactsDelegate
                   focus: true

               }

               Component {
                   id: contactsDelegate
                   CellBox{
                       id: wrapper
                       width: 30
                       height: 30
                       Text {
                           anchors.verticalCenter: parent.verticalCenter
                           anchors.horizontalCenter: parent.horizontalCenter
                           id: contactInfo
                           text: _text
                       }
                   }
               }

           }
       }

如您所见，在模型中，我有3个属性(roi_rows、roi_cols、roi_subregion_model)，它应该在更改每个单元格中的行、列和数据时更改它们的视图。

但是，当我更改这些值时，Gridview中的单元格数不会改变。当我将roi_rows和toi_cols初始化为2时，在创建listview项之后，我将拥有2x2网格视图。但是在初始化之后，我不能更改它。似乎我必须做一些事情来刷新Listview中特定项的UI，以便重新绘制该项中的Gridview。

更新

基于注释: GridView的宽度和高度将基于roi_rows、roi_cols进行设置，这是Listview模型的一部分。由于CellWidth和CellHeight是常量，因此单元格的数量(Gridview的行和列)将被更改。

Answer 1

好吧我找到答案了。在Model，View，Delegate结构中，当我们创建一个委托并希望将它与模型内部的一个键绑定时，在某些情况下，如“text”表示“Label”，它将自动绑定。在本例中：

ListModel{
       id:roi_item_model
       ListElement {label_text:"Hello" ,roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
   }


Component{
       id:roi_item_view
       MouseArea {
           anchors.fill: parent
           onClicked: list_roi.currentIndex = index
       }
       GridLayout{
           id:layout_wrapper
           anchors.fill: parent
           rows: 3
           columns: 5
           
           Label{ text:label_text }

           GridView {
               id:grid_sub_region
               Layout.row: 2
               Layout.column: 0
               Layout.columnSpan:5
               Layout.alignment: Qt.AlignHCenter
               width: roi_cols * 30; height: roi_rows * 30
               cellWidth: 30; cellHeight: 30
               visible : true

               model: roi_subregion_model
               delegate: contactsDelegate
               focus: true

           }

           Component {
               id: contactsDelegate
               CellBox{
                   id: wrapper
                   width: 30
                   height: 30
                   Text {
                       anchors.verticalCenter: parent.verticalCenter
                       anchors.horizontalCenter: parent.horizontalCenter
                       id: contactInfo
                       text: _text
                   }
               }
           }

       }
   }

label_text内部模型将自动绑定到标签的text属性，这意味着如果更改label_text，标签的内容将自动更改。但是对于某些属性，我们应该手工地绑定。在外部示例中，将此添加到ListView的委托中：

 Binding {
      target: grid_sub_region
      property: 'height'
      value: roi_rows * 30
 }

 Binding {
      target: grid_sub_region
      property: 'width'
      value: roi_cols * 30
 }