プロパティに応じてDelegateModelGroupに要素を追加する方法

Question

私はListModelとDelegateModel、ListViewと3つのボタンを持っています。 DelegateModelには1つのグループがあります。myGroup 最初の2つのボタンをクリックすると、ListModelにさまざまなプロパティを追加し、追加したり、myGroupに追加したりしません。 3番目のボタンは、フィルターを切り替えるために使用されます。

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 2つの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')]) 
    } 
}