当代理在网格视图中不可见时删除空格答案

【问题标题】：Removing empty spaces when the delegate is not visible in a gridview当代理在网格视图中不可见时删除空格
【发布时间】：2013-10-13 00:39:24
【问题描述】：

我正在尝试在网格视图中使用以下模型并委托组件。该模型有一个布尔角色 vis，它可以打开或关闭委托的可见属性。稍后我打算将此 vis 属性绑定到我的后端。在此示例中，绿色按钮未按预期显示，但在红色和棕色按钮之间留有空白区域。我如何摆脱空白空间。我只希望棕色按钮在红色按钮旁边

这是我的模型组件

ListModel { 
    ListElement {
        rectcolor:"red"
        vis:true
    }
    ListElement {
        rectcolor:"green"
        vis:false
    }
    ListElement
    {rectcolor:"brown"
     vis:true
    }
}

这是我的代表

Rectangle {
    width: 100
    height: 62
    visible:model.vis
    Button{color:model.rectcolor}
}

【问题讨论】：

标签： gridview qml

【解决方案1】：

对于仍然有兴趣在没有过滤器模型的情况下隐藏 GridView 代表的任何人，解决方案是在 Flickable 元素内创建一个 Grid。这甚至可以让您的网格在隐藏代理时拥有动画。

对于 Grid 上的实时示例，请查看 Qt QML 示例 positioners。

ListModel {
    id: model
    ListElement {
        rectcolor:"red"
        vis:true
    }
    ListElement {
        rectcolor:"green"
        vis:false
    }
    ListElement {
        rectcolor:"brown"
        vis:true
    }
}    

Flickable {
    anchors.fill: parent

    contentWidth: width
    contentHeight: grid.height

    clip: true

    Grid {
        id: grid
        width: parent.width
        height: childrenRect.height + 40
        rowSpacing: 10
        columnSpacing: 10

        property int cellSize: 140

        columns: {
            Math.floor(width / 150)
        }

        move: Transition {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.OutSine }
        }

        Repeater {
            model: model
            delegate: Rectangle {
                color: rectColor
                visible: vis
            }
        }
    }
}

【讨论】：

对于尝试运行代码的任何人，请将宽度和高度属性添加到中继器委托。如果不是，则不会显示任何内容。

【解决方案2】：

如果您想从ListView（或GridView 等）中排除项目，请将delegate 中的visible 和enable 变量设置为false

【讨论】：

谢谢！我之前将visible 设置为false 和height 设置为0。但是用 5000 多个代表更新视图需要几秒钟的时间。通过将enabled 设置为false 而不是将height 置零，它现在是即时的。

【解决方案3】：

您可以通过将其大小调整为零来隐藏委托（作为快速和肮脏方法的变体）

ListView {
    anchors.fill: parent
    delegate: Rectangle {
        width: model.vis ? 100 : 0
        height: model.vis ? 62 : 0
        visible:model.vis
        Rectangle {
            anchors.fill: parent
            color: model.rectcolor
        }
    }
    model: ListModel {
        ListElement {
            rectcolor: "red"
            vis:true
        }
        ListElement {
            rectcolor: "green"
            vis:false
        }
        ListElement {
         rectcolor: "brown"
         vis:true
        }
    }
}

【讨论】：

将代表的大小调整为零会导致大型模型出现巨大滞后，我相信这是ListView 重新计算每个代表的位置（请参阅我对@Dcow 答案的评论）。正确答案是@Dcow给出的答案，而且它还有一个优点是更简单。