当代理在gridview中不可见时删除空白

我试图在网格视图中使用以下模型和委托组件。该模型具有一个布尔角色vis，用于打开或关闭委托的visible属性。稍后我打算将这个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委托的人，解决方案是在Flickable元素中创建网格。这甚至允许网格在隐藏代理时具有动画

对于网格上的实时示例，请检查Qt QML示例定位器

谢谢我之前将
visible
设置为
false
，将
height
设置为
0
。但是用5000多个代理更新视图需要几秒钟。通过将
enabled
设置为
false
而不是将
高度设置为零，现在是即时的。将代理大小调整为零会在大型模型上造成巨大的延迟，我相信是
列表视图
重新计算每个代理的位置（请参阅我对@Dcow答案的评论）。@Dcow给出的答案是正确的，而且它的优点是更简单。对于试图运行代码的任何人，请向Repeater委托添加宽度和高度属性。如果没有，它将不会显示任何内容。
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
        }
    }
}

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
            }
        }
    }
}