Qt ListView + Grid + GridView 使用注意事项

ListView 

Auto Remove empty spaces when the delegate is not visible。

Grid

Auto Remove empty spaces when the delegate is not visible。

GridView

Leave empty spaces when the delegate is not visible。

How to get rid of the empty spaces?

解决方法：
（1）使用 groups + delegateModel.items.remove(i,1) 
（2）使用 groups + delegateModel.items.setGroups(0,1, "test2")
（3）使用 groups + delegateModel.items.addGroups(i,1, "test2")

 

GridView {
    id: gridView
    …
    model: DelegateModel {
        id: delegateModel
        model:filtersmodel
               
        groups: [  
            DelegateModelGroup {  
                includeByDefault: false  
                name: "test"  
            },
            DelegateModelGroup {  
                includeByDefault: false  
                name: "test1"  
            },
            DelegateModelGroup {  
                includeByDefault: false  
                name: "test2"  
            }, 
        ]  
               
        delegate: MouseArea {
            id: delegateRoot
            …

            Rectangle {  //界面具体显示
                …
            }
        }
    }


    function refreshView()
    {
        delegateModel.filterOnGroup = "test" 
        
        for(var i = filtersmodel.rowCount() - 1; i > -1 ; i--)
        {
            if(! filtersmodel.isVisible(i))
                delegateModel.items.remove(i, 1)
        }
        
        delegateModel.filterOnGroup = "items" 
    }

    function refreshView2()
    {
        delegateModel.filterOnGroup = "test" 
        
        for(var i = filtersmodel.rowCount() - 1; i > -1 ; i--)
        {
            if(! filtersmodel.isVisible(i))
                delegateModel.items.setGroups(0, 1, "test1")
            else
                delegateModel.items.setGroups(0, 1, "test2")
        }
        
        delegateModel.filterOnGroup = "test2" 
    }

    function refreshView3()
    {
        delegateModel.filterOnGroup = "test" 
        
        for(var i = filtersmodel.rowCount() - 1; i > -1 ; i--)
        {
            if(! filtersmodel.isVisible(i))
                delegateModel.items.addGroups(i, 1, "test1")
            else
                delegateModel.items.addGroups(i, 1, "test2")
        }
        
        delegateModel.filterOnGroup = "test2" 
    }              

    onCountChanged: {
        refreshView()

        //refreshView2()   //第二种方法

        //refreshView3()   //第三种方法
    }

}

（1）当 filtersmodel 变量发生变化时，onCountChanged会被触发，这里的变化不是说filtersmodel的count发生改变，而是这个变量。

（2）当 filtersmodel 变量发生变化时，delegateModel.items 会跟随变化，如filtersmodel增加一项，items也会增加一项，但不会重新赋值为filtersmodel。
      譬如第一次赋值时，delegateModel.items的count 和 filtersmodel count 相等为initCount；之后delegateModel.items.remove(0,3) remove 3个item,此时delegateModel.items的count = initCount - 3；filtersmodel count =initCount；此时filtersmodel发生改变时，增加一项 filtersmodel count =initCount + 1，delegateModel.items的count 也增加一项，delegateModel.items的count = initCount - 3 + 1。

（3）支持两种实现方法：
      groups + delegateModel.items.remove(i,1) 直接在items中移除不需要显示的item。最后再显示items 组即可，delegateModel.filterOnGroup = "items"。
      groups + delegateModel.items.setGroups(0,1, "test2")  直接将需要显示的item从items组中设置到新的group："test2" 中，最后再显示test2 组即可，delegateModel.filterOnGroup = "test2"。setGroups方法会在items中移除这个item再添加到其它组中。此操作影响items。
      groups + delegateModel.items.addGroups(i,1, "test2")  直接将需要显示的item添加到新的group："test2" 中，最后再显示test2 组即可，delegateModel.filterOnGroup = "test2"。addGroups方法会将items中指定位置的item复制添加到其它组中，此操作不影响items。

 

 

参考资料：
1 https://stackoverflow.com/questions/19207913/removing-empty-spaces-when-the-delegate-is-not-visible-in-a-gridview

2 https://stackoverflow.com/questions/50056880/qml-gridview-hide-one-cell