qml CheckBox 复选框

CheckBox 复选框

在QML中，CheckBox是一个用于表示二进制状态（选中或未选中）的控件。它通常用于允许用户从两个互斥的选项中进行选择，例如“是/否”或“开/关”。CheckBox属于QtQuick.Controls模块，继承自AbstractButton，因此它具有AbstractButton的所有属性和方法。

import QtQuick 2.15
import QtQuick.Controls 2.15ApplicationWindow {visible: truewidth: 640height: 480CheckBox {text: "Option 1"onClicked: {console.log("CheckBox state:", checked ? "Checked" : "Unchecked")}}
}常用属性
text: 复选框旁边显示的文本。
checked: 表示复选框是否被选中，默认为false。
tristate: 控制复选框是否支持三种状态（未选中、半选中和选中），默认为false。
partiallyChecked: 表示复选框是否处于半选中状态，只有在tristate为true时有效。
常用信号
onClicked: 当复选框被点击时触发。
onCheckedChanged: 当复选框的选中状态改变时触发。
onPartiallyCheckedChanged: 当复选框的半选中状态改变时触发。

Window {width: 640height: 480visible: true// 控制窗口是否可见，默认为 truetitle: qsTr("Hello World")ButtonGroup {id: buttonGroupexclusive: true// 互斥按钮组buttons:cl.children// 按钮组包含所有子元素}Column{// 垂直布局id : clCheckBox {text: "CheckBox"// 复选框checked: true// 默认选中//tristate: true// 三状态onCheckedChanged: {// 当选中状态改变时触发console.log("checked changed: " + checked)// 打印选中状态}onCheckStateChanged: {// 当三状态状态改变时触发console.log("check state changed: " + checkState)// 打印三状态状态}}CheckBox {text: "CheckBox"// 复选框checked: true// 默认选中//tristate: true// 三状态}CheckBox {text: "CheckBox"// 复选框checked: true// 默认选中//tristate: true// 三状态}}

父子 关联

Column {// 按钮组，用于管理一组按钮（如 CheckBox）的状态ButtonGroup {id: childGroup// 是否为互斥模式，即一次只能选中一个按钮，这里设置为 falseexclusive: false// 按钮组的状态由 parentCheckBox 的状态决定checkState: parentCheckBox.checkState}// 父 CheckBox，用于控制子 CheckBox 的状态CheckBox {id: parentCheckBox// 是否支持三种状态（未选中、半选中和选中）tristate: true// CheckBox 显示的文本text: "Parent CheckBox"// CheckBox 的状态由按钮组的状态决定checkState: childGroup.checkState}// 子 CheckBox 1CheckBox {id: childCheckBox1// CheckBox 显示的文本text: "Child CheckBox 1"// 初始状态为选中checked: true// 左侧填充，使文本与指示器之间有一定的间距leftPadding: indicator.width + 5// 将该 CheckBox 添加到 childGroup 按钮组中ButtonGroup.group: childGroup}// 子 CheckBox 2CheckBox {id: childCheckBox2// CheckBox 显示的文本text: "Child CheckBox 2"// 左侧填充，使文本与指示器之间有一定的间距leftPadding: indicator.width + 5// 将该 CheckBox 添加到 childGroup 按钮组中ButtonGroup.group: childGroup}}