Question

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

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

当委托在gridview中不可见时删除空格

3 个答案: