QML GridView如何隐藏单个单元格？设置属性仍有空位问题

这个问题我之前也碰到过，直接在delegate里设置visible: false或者width: 0/height: 0确实没法解决空位问题——因为GridView是严格按照model的条目数量来预分配单元格位置的，哪怕delegate不可见，对应的格子位置还是会被预留出来。下面给你几个可行的解决思路：

方案一：通过过滤Model移除不需要显示的条目 #

最彻底的方法是直接让GridView的Model不包含那些需要隐藏的条目，这样就不会生成对应的单元格。可以用FilterProxyModel来实现动态过滤：

import QtQuick 2.15
import QtQml.Models 2.15

GridView {
    width: 400
    height: 400
    cellWidth: 100
    cellHeight: 100

    // 原始数据Model
    ListModel {
        id: sourceModel
        ListElement { text: "显示项1"; isVisible: true }
        ListElement { text: "隐藏项1"; isVisible: false }
        ListElement { text: "显示项2"; isVisible: true }
        ListElement { text: "隐藏项2"; isVisible: false }
    }

    // 过滤代理Model，只保留isVisible为true的条目
    FilterProxyModel {
        id: filteredModel
        sourceModel: sourceModel
        filterRole: "isVisible"
        filterValue: true
    }

    model: filteredModel

    delegate: Rectangle {
        width: 100
        height: 100
        color: "lightblue"
        Text {
            anchors.centerIn: parent
            text: model.text
        }
    }
}

这种方法的好处是完全不会产生空位，GridView会自动重新排布剩余的条目。如果需要动态切换显示/隐藏，只需要修改sourceModel中对应条目的isVisible属性即可。

方案二：用Loader动态加载Delegate #

如果不想修改Model，可以在Delegate中使用Loader，当需要隐藏时，让Loader不加载实际的内容，这样就不会占据单元格空间：

GridView {
    width: 400
    height: 400
    cellWidth: 100
    cellHeight: 100

    model: ListModel {
        ListElement { text: "显示项1"; isVisible: true }
        ListElement { text: "隐藏项1"; isVisible: false }
        ListElement { text: "显示项2"; isVisible: true }
        ListElement { text: "隐藏项2"; isVisible: false }
    }

    delegate: Loader {
        // 只有当isVisible为true时才加载实际的Delegate组件
        active: model.isVisible
        sourceComponent: Rectangle {
            width: 100
            height: 100
            color: "lightblue"
            Text {
                anchors.centerIn: parent
                text: model.text
            }
        }
        // 确保Loader本身不占空间
        implicitWidth: active ? 100 : 0
        implicitHeight: active ? 100 : 0
    }
}

这里要注意设置implicitWidth和implicitHeight，让Loader在不激活时尺寸为0，这样GridView就不会为它预留位置。

方案三：动态调整GridView的cell尺寸（不推荐） #

如果你实在不想用代理Model或Loader，可以尝试动态修改对应Delegate的implicitWidth和implicitHeight为0，同时设置visible: false，但需要确保GridView的cellWidth和cellHeight不是固定值——不过这种方法可能会导致布局错乱，因为GridView的单元格尺寸是全局的，所以只适合特殊场景：

GridView {
    width: 400
    height: 400
    // 不要固定cellWidth/cellHeight，让它自适应Delegate的implicit尺寸
    cellWidth: delegateItem.implicitWidth
    cellHeight: delegateItem.implicitHeight

    model: ListModel {
        ListElement { text: "显示项1"; isVisible: true }
        ListElement { text: "隐藏项1"; isVisible: false }
    }

    delegate: Rectangle {
        id: delegateItem
        implicitWidth: model.isVisible ? 100 : 0
        implicitHeight: model.isVisible ? 100 : 0
        visible: model.isVisible
        color: "lightblue"
        Text {
            anchors.centerIn: parent
            text: model.text
        }
    }
}

这种方法的局限性很大，因为所有单元格的尺寸会跟着变化，所以只适合所有显示项尺寸一致的情况。

总结一下，方案一（过滤Model）是最推荐的，逻辑清晰且不会有布局问题；方案二更适合无法修改Model的场景。

内容的提问来源于stack exchange，提问作者kluszon