首页 > 解决方案 > QML GridView 隐藏一个单元格

问题描述

可以在 GridView 中隐藏某些单元格吗?我设置了委托,但这个 GridView 元素仍然有空位。有可能做到这一点吗?

visible: false
width: 0
height: 0

标签: qtgridviewqml

解决方案


正如评论中所说,您确实可以使用 QSortFilterProxy 模型,但这是另一种解决方案。你可以实现一个纯 QML FilterProxyModel,使用DelegateModelDelegateModelGroup

import QtQuick 2.10
import QtQml.Models 2.3

DelegateModel {

    property var filterAccepts: function(item) {
        return true
    }

    onFilterAcceptsChanged: refilter()

    function refilter() {
        if(hidden.count>0)
            hidden.setGroups(0, hidden.count, "default")
        if(items.count>0)
            items.setGroups(0, items.count, "default")
    }

    function filter() {
        while (unsortedItems.count > 0) {
            var item = unsortedItems.get(0)
            if(filterAccepts(item.model))
                item.groups = "items"
            else
                item.groups = "hidden"
        }
    }

    items.includeByDefault: false
    groups: [
        DelegateModelGroup {
            id: default
            name: "default"
            includeByDefault: true
            onChanged: filter()
        },
        DelegateModelGroup {
            id: hidden
            name: "hidden"
        }
    ]

}

解释:每次将一个项目添加到模型中时,它都会添加到“默认”组中,这会触发onChanged将调用的处理程序filter()

Filter() 将在默认组中查找项目,并将它们移动到items组中(这将使它们可见)或hidden组中,具体取决于 filterAccepts 函数的结果。

当 filterAccept 更改时,SortProxyModel 会将每个项目移动到默认组以触发全局重新过滤。

然后,您可以像这样使用您的代理模型:

FilterProxyModel
{
    id: filterProxyModel

    model: <YourBaseModel>
    delegate: <YourDelegate>

    filterAccepts: function(item) {
          // Eg: Only "small" items will be displayed
          return item.size == "small"
    }
}

GridView
{
    anchors.fill: parent
    model: filterProxyModel
    cellHeight: 100
    cellWidth: 100
}

推荐阅读