Как добавить элементы в группу 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 и examplewise two DelegateModels с группами, к которым добавляются элементы в зависимости от роли 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')]) 
    } 
}