QML 将CheckBox添加到一个组,同一时间只能勾选一个,具有排他性
效果:
需要使用到 ButtonGroup 部件;
exclusive 属性需要设置为true,保持组中的按钮的排他性,有且只能选中一个按钮;
buttons 属性,给其赋值 list<AbstractButton> 参数即可将按钮组组合到一起;
使用一个布局类的children属性也可以实现;
// 按钮的组
ButtonGroup {
id: childGroup
// 保持组中的按钮的排他性,有且只能选中一个按钮
exclusive: true
buttons: col.children // 使用方式2的话,这里可以注释掉
}
// 垂直属性
Column {
id: col
CheckBox {
text: "first checkbox"
checked: true // 设置是否勾选
//ButtonGroup.group: childGroup // 方式2,也可以这样添加到组里
}
CheckBox {
text: "second checkbox"
checked: false // 设置是否勾选
//ButtonGroup.group: childGroup // 方式2,也可以这样添加到组里
}
CheckBox {
text: "third checkbox"
checked: false // 设置是否勾选
//ButtonGroup.group: childGroup // 方式2,也可以这样添加到组里
}
}
也可以在CheckBox中直接添加到组里,ButtonGroup.group: childGroup
CheckBox 的 tristate 可以设置是否启用三种状态; Qt.Unchecked 0 没勾选 Qt.PartiallyChecked 1 - Qt.Checked 2 勾选
CheckBox {
text: "first checkbox"
checked: true // 设置是否勾选
// 设置为true,checkbox会有三个状态
tristate: true
onCheckStateChanged: {
console.log(checkState)
}
}
官方案例:
1.通过一个checkbox来控制全部checkbox的勾选
效果:
Column {
ButtonGroup {
id: childGroup
exclusive: false
checkState: parentBox.checkState
}
CheckBox {
id: parentBox
text: qsTr("Parent")
checkState: childGroup.checkState
}
CheckBox {
checked: true
text: qsTr("Child 1")
leftPadding: indicator.width
ButtonGroup.group: childGroup
}
CheckBox {
text: qsTr("Child 2")
leftPadding: indicator.width
ButtonGroup.group: childGroup
}
}
2.可以自己控制勾选状态
效果:
CheckBox {
tristate: true
// 可以控制勾选
nextCheckState: function() {
// 如果当前时为勾选状态
if (Qt.Unchecked === checkState) {
// 返回勾选状态
return Qt.Checked
} else if (Qt.Checked === checkState) {
return Qt.PartiallyChecked
} else {
return Qt.Unchecked
}
}
}
完!