如何根据属性将元素添加到 DelegateModelGroup [英] How to add elements to a DelegateModelGroup depending on a property

问题描述

我有一个 ListModel 和一个 DelegateModel、一个 ListView 和 3 个按钮.DelegateModel 有一个组:myGroup单击前两个按钮，我将具有不同属性的元素添加到 ListModel，然后将用于将它们添加或不将它们添加到 myGroup.第三个按钮用于切换过滤器.

ListModel {id:根模型}委托模型{id:视觉模型型号:rootModel组:[DelegateModelGroup { 名称:'myGroup'}]委托:矩形{宽度:model.width高度:模型.高度颜色:model.color边框宽度:1Component.onCompleted: DelegateModel.inMyGroup = Qt.binding(function() {return width == 80})}}列表显示 {宽度:300高度:480模型:视觉模型}长方形 {编号:b1×:350宽度:100高度:50颜色:轻钢蓝"文本 {anchors.centerIn:父级文字:'加80'}鼠标区域{anchors.fill:父级onClicked: rootModel.append( { width: 80, height: 30, color: 'steelblue' })}}长方形 {编号: b2×:350y:70宽度:100高度:50颜色:紫罗兰色"文本 {anchors.centerIn:父级文字:'加50'}鼠标区域{anchors.fill:父级onClicked: rootModel.append( { width: 50, height: 30, color: 'violet' })}}长方形 {编号:b3×:350y:140宽度:100高度:50颜色:'绿色'文本 {anchors.centerIn:父级文字:'过滤'}鼠标区域{anchors.fill:父级属性布尔切换:false已点击:{visualModel.filterOnGroup = 切换?'' : '我的组'切换 = ! 切换}}}

到目前为止一切都很好，只要不设置过滤器，我可以将两种类型的元素添加到模型中，然后我就可以过滤了.但是，只要我设置了过滤器，我就无法向模型(组)添加元素.这很明显，默认情况下不添加元素，因此组件未完成，也没有向组添加任何内容，直到我再次取消设置过滤器，所有待处理的元素都被实例化、完成并最终添加.

因此，我寻找另一种方法来根据属性自动将元素添加到组中，或者将它们排除.

我知道，我可以设置 includeByDefault: true 然后在它们被实例化一次后将它们扔掉.虽然这解决了这个特定问题，但它并没有解决下一个问题，我将更改属性，因此将其从组中删除，然后再将其更改回来.在组件再次重​​新实例化之前，它不会重新出现.

哦，我知道，我可以用 C++ 解决这个问题，但我不想，除非有必要.

解决方案

问题是 DelegateModel.inMyGroup = Qt.binding(function() {return width == 80}) 只求值一旦显示对象.但是当过滤器打开时，如果一个元素被添加，它不属于 myGroup 组，所以它不会显示并且永远没有机会评估条件.

这是一个快速修复，我添加了一个每次添加元素时执行的函数.默认组似乎是 'items' 而不是 ''.

窗口{可见:真实宽度:640高度:480属性布尔切换:true列表模型{id:根模型onCountChanged:visualModel.setGroups()}委托模型{id:视觉模型型号:rootModelfilterOnGroup:切换?项目":我的组"组:[DelegateModelGroup { id: myGroup;名称:'myGroup' }]函数 setGroups() {var newItem = rootModel.get(rootModel.count - 1)变量组；if (newItem.width == 80){组 = ['items', 'myGroup'];}别的{组 = ['物品'];}items.setGroups(rootModel.count - 1, 1, 组)}委托:矩形{宽度:model.width高度:模型.高度颜色:model.color边框宽度:1}}列表显示 {宽度:300高度:480模型:视觉模型}长方形 {编号:b1×:350宽度:100高度:50颜色:轻钢蓝"文本 {anchors.centerIn:父级文字:'加80'}鼠标区域{anchors.fill:父级onClicked: rootModel.append( { width: 80, height: 30, color: 'steelblue' })}}长方形 {编号: b2×:350y:70宽度:100高度:50颜色:紫罗兰色"文本 {anchors.centerIn:父级文字:'加50'}鼠标区域{anchors.fill:父级onClicked: rootModel.append( { width: 50, height: 30, color: 'violet' })}}长方形 {编号:b3×:350y:140宽度:100高度:50颜色:'绿色'文本 {anchors.centerIn:父级文字:'过滤'}鼠标区域{anchors.fill:父级已点击:{切换 = ! 切换}}}}

I have a ListModel and a DelegateModel, a ListView and 3 Buttons. The DelegateModel has one Group: myGroup With a click on of the first two buttons, I add elements to the ListModel with different properties, that then will be used to add them or not add them to myGroup. The third button is used to toggle the filter.

ListModel {
    id: rootModel
}


DelegateModel {
    id: visualModel
    model: rootModel
    groups: [DelegateModelGroup { name: 'myGroup' }]

    delegate: Rectangle {
        width: model.width
        height: model.height
        color: model.color
        border.width: 1

        Component.onCompleted: DelegateModel.inMyGroup = Qt.binding(function() {return width == 80})
    }
}

ListView {
    width: 300
    height: 480
    model: visualModel
}

Rectangle {
    id: b1
    x: 350
    width: 100
    height: 50
    color: 'lightsteelblue'
    Text {
        anchors.centerIn: parent
        text: 'add 80'
    }

    MouseArea {
        anchors.fill: parent
        onClicked: rootModel.append( { width: 80, height: 30, color: 'steelblue' })
    }
}

Rectangle {
    id: b2
    x: 350
    y: 70
    width: 100
    height: 50
    color: 'violet'
    Text {
        anchors.centerIn: parent
        text: 'add 50'
    }

    MouseArea {
        anchors.fill: parent
        onClicked: rootModel.append( { width: 50, height: 30, color: 'violet' })
    }
}
Rectangle {
    id: b3
    x: 350
    y: 140
    width: 100
    height: 50
    color: 'green'
    Text {
        anchors.centerIn: parent
        text: 'filter'
    }

    MouseArea {
        anchors.fill: parent
        property bool toggle: false
        onClicked: {
            visualModel.filterOnGroup = toggle ? '' : 'myGroup'
            toggle = !toggle
        }
    }
}

So far so good, as long as not filter is set, I can add elements of both types to the model, and then I can filter. However I can't add elements to the model (Group) as long as I have set the filter. This is obvious, as per default the element is not added, so the component is not completed, and nothing is added to the group, until I unset the filter again, and all pending elements are instanciated, completed, and finally added.

Therefore I look for another way to automatically add the elements depending on a property to the group, or to exclude them.

I know, I could set includeByDefault: true and then throw them out after they have been instanciated once. While this solves this particular issue, it does not solve the next, where I would change the property, therefore throw it out of the group, and then change it back. It won't reappear until the component is reinstanciated again.

Oh, and I know, I could solve this with C++, but I don't want to, unless necessary.

解决方案

The problem is that DelegateModel.inMyGroup = Qt.binding(function() {return width == 80}) is evaluated only once the object is displayed. But when filter is on, if an element is added it does not belongs to myGroup group, so it is not displayed and never has a chance to evaluate the condition.

Here is a quick fix, I added a function that executes every time an element is added. The default group seems to be 'items' and not ''.

Window {
    visible: true
    width: 640
    height: 480
    property bool toggle: true


    ListModel{
        id: rootModel
        onCountChanged: visualModel.setGroups()
    }

    DelegateModel {
        id: visualModel
        model: rootModel
        filterOnGroup: toggle ? 'items' : 'myGroup'
        groups: [DelegateModelGroup { id: myGroup; name: 'myGroup' }]

        function setGroups() {
            var newItem = rootModel.get(rootModel.count - 1)
            var groups;
            if (newItem.width == 80){
                groups = ['items', 'myGroup'];
            }else{
                groups = ['items'];
            }
            items.setGroups(rootModel.count - 1, 1, groups)
        }

        delegate: Rectangle {
            width: model.width
            height: model.height
            color: model.color
            border.width: 1
        }
    }

    ListView {
        width: 300
        height: 480
        model: visualModel
    }

    Rectangle {
        id: b1
        x: 350
        width: 100
        height: 50
        color: 'lightsteelblue'
        Text {
            anchors.centerIn: parent
            text: 'add 80'
        }

        MouseArea {
            anchors.fill: parent
            onClicked: rootModel.append( { width: 80, height: 30, color: 'steelblue' })
        }
    }

    Rectangle {
        id: b2
        x: 350
        y: 70
        width: 100
        height: 50
        color: 'violet'
        Text {
            anchors.centerIn: parent
            text: 'add 50'
        }

        MouseArea {
            anchors.fill: parent
            onClicked: rootModel.append( { width: 50, height: 30, color: 'violet' })
        }
    }
    Rectangle {
        id: b3
        x: 350
        y: 140
        width: 100
        height: 50
        color: 'green'
        Text {
            anchors.centerIn: parent
            text: 'filter'
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                toggle = !toggle
            }
        }
    }
}

这篇关于如何根据属性将元素添加到 DelegateModelGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！