如何將元素添加到DelegateModelGroup，具體取決於屬性

Question

我有一個ListModel和一個DelegateModel，一個ListView和3個按鈕。 DelegateModel有一個組：myGroup 點擊前兩個按鈕，我將元素添加到具有不同屬性的ListModel，然後將用它們添加它們或不將它們添加到myGroup。第三個按鈕用於切換過濾器。

ListModel { 
    id: rootModel 
} 


DelegateModel { 
    id: visualModel 
    model: rootModel 
    groups: [DelegateModelGroup { name: 'myGroup' }] 

    delegate: Rectangle { 
     width: model.width 
     height: model.height 
     color: model.color 
     border.width: 1 

     Component.onCompleted: DelegateModel.inMyGroup = Qt.binding(function() {return width == 80}) 
    } 
} 

ListView { 
    width: 300 
    height: 480 
    model: visualModel 
} 

Rectangle { 
    id: b1 
    x: 350 
    width: 100 
    height: 50 
    color: 'lightsteelblue' 
    Text { 
     anchors.centerIn: parent 
     text: 'add 80' 
    } 

    MouseArea { 
     anchors.fill: parent 
     onClicked: rootModel.append({ width: 80, height: 30, color: 'steelblue' }) 
    } 
} 

Rectangle { 
    id: b2 
    x: 350 
    y: 70 
    width: 100 
    height: 50 
    color: 'violet' 
    Text { 
     anchors.centerIn: parent 
     text: 'add 50' 
    } 

    MouseArea { 
     anchors.fill: parent 
     onClicked: rootModel.append({ width: 50, height: 30, color: 'violet' }) 
    } 
} 
Rectangle { 
    id: b3 
    x: 350 
    y: 140 
    width: 100 
    height: 50 
    color: 'green' 
    Text { 
     anchors.centerIn: parent 
     text: 'filter' 
    } 

    MouseArea { 
     anchors.fill: parent 
     property bool toggle: false 
     onClicked: { 
      visualModel.filterOnGroup = toggle ? '' : 'myGroup' 
      toggle = !toggle 
     } 
    } 
} 

到目前爲止，只要不設置過濾器，我可以將兩種類型的元素添加到模型中，然後我就可以過濾。 但是，只要設置了過濾器，我就不能將元素添加到模型（組）中。這很明顯，因爲默認情況下不添加元素，所以組件未完成，並且沒有任何內容添加到組中，直到我再次取消設置該過濾器，並且所有待處理元素都被實例化，完成並最終添加爲止。

因此，我尋找另一種方法來根據屬性自動添加元素到組中，或者排除它們。

我知道，我可以設置includeByDefault: true，然後在實例化一次之後丟棄它們。雖然這解決了這個特定的問題，但它並沒有解決下一個問題，我將在那裏更改屬性，因此將它從組中移出，然後將其更改回來。直到組件重新恢復爲止，它纔會重新出現。

哦，我知道，我可以用C++解決這個問題，但我不想，除非必要。

Answer 1

問題是DelegateModel.inMyGroup = Qt.binding(function() {return width == 80})只有在顯示對象後才被評估。但是，當過濾器打開時，如果添加了一個元素，則它不屬於myGroup組，因此它不會顯示，並且從來沒有機會評估條件。

這是一個快速修復，我添加了一個函數，每次添加一個元素時都會執行。默認組似乎是'items'而不是''。

Window { 
    visible: true 
    width: 640 
    height: 480 
    property bool toggle: true 


    ListModel{ 
     id: rootModel 
     onCountChanged: visualModel.setGroups() 
    } 

    DelegateModel { 
     id: visualModel 
     model: rootModel 
     filterOnGroup: toggle ? 'items' : 'myGroup' 
     groups: [DelegateModelGroup { id: myGroup; name: 'myGroup' }] 

     function setGroups() { 
      var newItem = rootModel.get(rootModel.count - 1) 
      var groups; 
      if (newItem.width == 80){ 
       groups = ['items', 'myGroup']; 
      }else{ 
       groups = ['items']; 
      } 
      items.setGroups(rootModel.count - 1, 1, groups) 
     } 

     delegate: Rectangle { 
      width: model.width 
      height: model.height 
      color: model.color 
      border.width: 1 
     } 
    } 

    ListView { 
     width: 300 
     height: 480 
     model: visualModel 
    } 

    Rectangle { 
     id: b1 
     x: 350 
     width: 100 
     height: 50 
     color: 'lightsteelblue' 
     Text { 
      anchors.centerIn: parent 
      text: 'add 80' 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: rootModel.append({ width: 80, height: 30, color: 'steelblue' }) 
     } 
    } 

    Rectangle { 
     id: b2 
     x: 350 
     y: 70 
     width: 100 
     height: 50 
     color: 'violet' 
     Text { 
      anchors.centerIn: parent 
      text: 'add 50' 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: rootModel.append({ width: 50, height: 30, color: 'violet' }) 
     } 
    } 
    Rectangle { 
     id: b3 
     x: 350 
     y: 140 
     width: 100 
     height: 50 
     color: 'green' 
     Text { 
      anchors.centerIn: parent 
      text: 'filter' 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: { 
       toggle = !toggle 
      } 
     } 
    } 
} 

Answer 2

對於那些有興趣的人，用user2436719的提示，我能夠將這個模型破解在一起。 它是一個ListModel，並且具有兩個DelegateModel，其中具有根據listmodel的角色添加元素的組。

ListModel{ 
    id: rootModel 
    onCountChanged: setGroups(count - 1) 
    onDataChanged: setGroups(arguments[0].row) 
    property DelegateModel sub1: 
     DelegateModel { 
      id: subModel1 
      model: rootModel 
      groups: [ 
       DelegateModelGroup { name: 'myGroup' }, 
       DelegateModelGroup { name: 'notMyGroup' } 
      ] 
      delegate: Rectangle { 
       width: model.width 
       height: model.height 
       color: model.color 
       border.width: 1 
      } 
      filterOnGroup: (root.toggle ? 'myGroup' : 'notMyGroup') 
     } 
    property DelegateModel sub2: 
     DelegateModel { 
      id: subModel2 
      model: rootModel 
      groups: [ 
       DelegateModelGroup { name: 'myGroup' }, 
       DelegateModelGroup { name: 'notMyGroup' } 
      ] 
      delegate: Rectangle { 
       radius: 5 
       width: model.width 
       height: model.height 
       color: model.color 
       border.width: 1 

       Text { 
        anchors.centerIn: parent 
        text: DelegateModel.groups.toString() 
       } 
      } 
      filterOnGroup: (root.toggle ? 'myGroup' : 'notMyGroup') 
     } 

    function setGroups(index) { 
     console.log('set Groups for', index) 
     var i = get(index) 
     subModel1.items.setGroups(index, 1, ['items', (i.width === 80 ? 'myGroup' : 'notMyGroup')]) 
     subModel2.items.setGroups(index, 1, ['items', (i.width !== 80 ? 'myGroup' : 'notMyGroup')]) 
    } 
}