问qml选中/取消选中列表视图中的所有复选框
EN

Stack Overflow用户

提问于 2021-07-07 19:31:53

回答 1查看 121关注 0票数 0

我有下面的代码来check/uncheck all列表视图中的其他复选框。我正在使用ButtonGroup组件来实现同样的目的。它似乎实现了它想要做的事情，但当我对它们进行uncheck all并滚动列表视图时，列表顶部和底部的一些项目会被自动再次选中。会出什么问题呢？

import QtQuick 2.15
import QtQuick.Controls 2.15


Rectangle {
    id: win
    width: parent.width
    height: parent.height
    visible: true


    ButtonGroup {
           id: childGroup
           exclusive: false
           checkState: mainCheckBox.checkState
       }

       CheckBox {
           id: mainCheckBox
           checked: true
           text: "All"
           indicator.width: 15
           indicator.height: 15
           checkState: childGroup.checkState
       }

       ListView {
           id: multiSelectCheckList
           model: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]
           height: parent.height
           width: parent.width
           anchors {
               top: mainCheckBox.bottom
               margins: 10
           }

           delegate: CheckBox {
               id: modelCheckBoxes
               checked: true
               text: modelData
               indicator.width: 15
               indicator.height: 15
               ButtonGroup.group: childGroup
           }
       }
}

qml

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-08 03:09:30

问题是ListView中的项是动态创建的，也就是说，有一个缓存。因此，在这种情况下，最好使用模板保存相关信息，然后修改模板而不是委托。

import QtQuick 2.15
import QtQuick.Controls 2.15


Rectangle {
    id: win
    width: parent.width
    height: parent.height
    visible: true

    ListModel{
        id: listModel
        dynamicRoles: true
        Component.onCompleted: {
            var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]
            for(var i in numbers){
                var number = numbers[i]
                listModel.append({"number": number, "checked": true})
            }
        }
    }
    CheckBox {
        id: mainCheckBox
        checked: true
        text: "All"
        indicator.width: 15
        indicator.height: 15
        onCheckStateChanged: {
            for(var i =0; i < listModel.count; ++i){
                listModel.setProperty(i, "checked", checked)
            }
        }
    }
    ListView {
        id: multiSelectCheckList
        model: listModel
        height: parent.height
        width: parent.width
        anchors {
            top: mainCheckBox.bottom
            margins: 10
        }

        delegate: CheckBox {
            id: modelCheckBoxes
            checked: model.checked
            text: model.number
            indicator.width: 15
            indicator.height: 15
        }
    }
}