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

Question

我正在尝试在网格视图中使用以下模型并委托组件。该模型有一个布尔角色 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}
}

Answer 1

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

有关 Grid 的实时示例，请查看 Qt QML 示例定位器。

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

Answer 2

如果您想从ListView（或GridView等）集合中排除项目visible并将enable变量排除delegate在false

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