当代理在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

，如果你想从ListView（或GridView排除项目等）设置visible和enable变量delegate至false

Answer 2

您可以通过调整他到零（快速和肮脏的方法的变体）

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

Answer 3

对于任何人躲在一个GridView的代表没有一个过滤器模型仍有意隐瞒委托，该解决方案是创建一个网格，而不是，里面一个Flickable元素。这甚至会让你的网格在隐藏代表时有动画。

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