QML GridView 隐藏一个单元格答案

【问题标题】：QML GridView hide one cellQML GridView 隐藏一个单元格
【发布时间】：2018-04-27 06:52:38
【问题描述】：

可以在 GridView 中隐藏某些单元格吗？我设置了委托，但这个 GridView 元素仍然有空位。可以这样做吗？

visible: false
width: 0
height: 0

【问题讨论】：

隐藏是什么意思，例如，如果代理是一个矩形并且它在中间，您希望该空间为空，或者不留任何空间。
第二种情况，我想在网格中隐藏一个单元格并重新排列其他单元格以不留下可用空间。
你的型号是什么？
看起来你在说Layout.rowSpan
@eyllanesc QSortFilterProxyModel 是解决方案之一。另一种是改变Grid上的GridView，里面有Repeater，全部都在Flickable中。它看起来一样，工作一样，我可以使用可见、高度和宽度隐藏某些项目。

标签： qt gridview qml

【解决方案1】：

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

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
}

【讨论】：

unsortedItems ?

【解决方案2】：

另一个仅使用 QML 的简化解决方案，基于隐藏项目。

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2

Window {
    id: window
    title: "test"
    visible: true
    width: 400
    height: 400
    GridLayout {
        id: layout
        anchors.fill: parent
        columns: 4
        Repeater {
            id: container
            model: 20
            Rectangle {
                id: item
                property int itemIndex: index
                Layout.fillWidth: true
                height: 60
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                Text {
                    anchors.centerIn: parent
                    text:item.itemIndex
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        item.visible = false;
                        layout.doIt(item.itemIndex);
                    }
                }
            }
        }
        function doIt(index)
        {
            var item = container.itemAt(index);
            if(item)
                item.visible = false;
            for(var i = index - 1;i >= 0;i --)
            {
                var prev_item = container.itemAt(i);
                if(prev_item.visible) {
                    prev_item.Layout.columnSpan ++;
                    break;
                }
            }
        }
    }
}

【讨论】：