当委托在GridView中不可见时删除空白空间 [英] Removing empty spaces when the delegate is not visible in a gridview

问题描述

我试图在网格视图中使用以下模型和委托组件。该模型具有一个布尔角色vis，它可以打开或关闭代表的可见属性。后来，我打算将这个vis属性绑定到我的后端。在这个示例中，绿色按钮不会按预期显示，而是在红色按钮和棕色按钮之间留出空白区域。我如何摆脱空的空间。我只想将棕色按钮放在红色按钮旁边。

这是我的模型组件

  ListModel {
 ListElement {
 rectcolor：red
 vis：true 
} 
 ListElement {
 rectcolor：green 
 vis：false 
} 
 ListElement 
 {rectcolor：brown
 vis：true 
} 
} 
  code> 

这是我的委托

  Rectangle {
 width：100 
 height：62 
 visible：model.vis 
 Button {color：model.rectcolor} 
} 
  
 
 
对于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 
 
列：{
 Math.floor （宽度/ 150）
} 
 
移动：过渡{
 NumberAnimation {属性：x，y;持续时间：200; easing.type：Easing.OutSine} 
} 
 
 Repeater {
 model：model 
 delegate：Rectangle {
 color：rectColor 
 visible ：
} 
} 
} 
} 
  
 
I am trying to use the following model and delegate components in a grid view. The model has a boolean role vis which turns the visible property of the delegate on or off. Later on I intend to bind this vis property to my backend.In this example the green button does not show up as intended but leaves an empty space between red and brown buttons. How do I get rid of the empty space. I just want the brown button to be next to red button

This is my model component
ListModel { 
    ListElement {
        rectcolor:"red"
        vis:true
    }
    ListElement {
        rectcolor:"green"
        vis:false
    }
    ListElement
    {rectcolor:"brown"
     vis:true
    }
}
This is my delegate
Rectangle {
    width: 100
    height: 62
    visible:model.vis
    Button{color:model.rectcolor}
}

解决方案
For anyone still interested in hiding delegates of a GridView without a filter model, the solution is to create a Grid instead, inside a Flickable element. This will even allow your grid to have animations when hiding delegates.

For a live example on Grid, check the Qt QML example 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
            }
        }
    }
}


                        
这篇关于当委托在GridView中不可见时删除空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！