QML：如何访问列表元素

Question

我是 QML 新手，需要一些帮助。

我正在通过 python 代码填充列表视图。

每个列表元素都包含一个复选框和相关文本。此外，我想使用 2 个按钮一次 select/deselect 所有复选框。在按钮的onClicked函数中，我可以访问itemName，但是我无法访问选中状态。

我该如何解决这个问题？

            Rectangle{
                
                ListModel {
                    id: sportItems
                }

                Component{
                    id:sportRow   
                    CheckBox{
                        text: "<font color=\"white\">"+itemName+"</font>"
                        checked: true
                        onClicked : {
                            console.log(itemName+" :::: "+ checked);
                        }
                    }
                }

                ListView{
                    id: sports
                    objectName: "sports"
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.topMargin: 10
                    anchors.leftMargin: 10
                    model: sportItems
                    delegate: sportRow

                    function addItem(entry){
                        sportItems.append({itemName: entry})
                        sports.height = sports.height+20
                    }
                }
                Row{
                    anchors.top: sports.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    
                    Button{
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        text: "All"
                        onClicked: {
                            for(var x =0; x< sports.model.get(0).count; x++){
                                sports.model.get(x).checked = true
                            }
                        }

                    }

                    Button{
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        text: "Nothing"
                        onClicked: {
                            for(var x =0; x< sports.model.get(0).count; x++){
                                sports.model.get(x).checked = false
                            }
                        }
                    }
                }
            }

Answer 1

如果您打算在委托之外修改选中状态（即从“全部选中”按钮），那么选中状态实际上应该是模型的一部分。所以你可以添加一个名为“isChecked”的角色（这样它就不会与 CheckBox 的 built-in checked 属性冲突）：

function addItem(entry) {
    sportItems.append({ 
        itemName: entry, 
        isChecked: true    // Keep the checked state
    })
    sports.height = sports.height+20
}

然后确保代表实际上 read/write 来自模型的数据：

Component {
    id:sportRow   
    CheckBox {
        text: "<font color=\"white\">"+itemName+"</font>"
        checked: isChecked   // Read from the model
        onClicked : {
            // Write back to the model
            sportItems.setProperty(index, "isChecked", !isChecked)
        }
    }
}

在“全选”按钮中，您只需设置模型值：

Button {
    anchors.left: parent.left
    anchors.leftMargin: 10
    text: "All"
    onClicked: {
        for(var i = 0; i < sports.model.count; i++) {
            sports.model.setProperty(i, "isChecked", true)
        }
    }
}

QML：如何访问列表元素

QML: How to access Listelements

listview

qml

components