qml CheckBox 复选框

CheckBox 复选框

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

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    CheckBox {
        text: "Option 1"
        onClicked: {
            console.log("CheckBox state:", checked ? "Checked" : "Unchecked")
        }
    }
}

常用属性
text: 复选框旁边显示的文本。
checked: 表示复选框是否被选中，默认为false。
tristate: 控制复选框是否支持三种状态（未选中、半选中和选中），默认为false。
partiallyChecked: 表示复选框是否处于半选中状态，只有在tristate为true时有效。
常用信号
onClicked: 当复选框被点击时触发。
onCheckedChanged: 当复选框的选中状态改变时触发。
onPartiallyCheckedChanged: 当复选框的半选中状态改变时触发。

Window {
    width: 640
    height: 480
    visible: true// 控制窗口是否可见，默认为 true
    title: qsTr("Hello World")

    ButtonGroup {
        id: buttonGroup
        exclusive: true// 互斥按钮组
       buttons:cl.children// 按钮组包含所有子元素
    }


    Column{// 垂直布局
        id : cl

        CheckBox {
            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
            // 是否为互斥模式，即一次只能选中一个按钮，这里设置为 false
            exclusive: false
            // 按钮组的状态由 parentCheckBox 的状态决定
            checkState: parentCheckBox.checkState
        }

        // 父 CheckBox，用于控制子 CheckBox 的状态
        CheckBox {
            id: parentCheckBox
            // 是否支持三种状态（未选中、半选中和选中）
            tristate: true
            // CheckBox 显示的文本
            text: "Parent CheckBox"
            // CheckBox 的状态由按钮组的状态决定
            checkState: childGroup.checkState
        }

        // 子 CheckBox 1
        CheckBox {
            id: childCheckBox1
            // CheckBox 显示的文本
            text: "Child CheckBox 1"
            // 初始状态为选中
            checked: true
            // 左侧填充，使文本与指示器之间有一定的间距
            leftPadding: indicator.width + 5
            // 将该 CheckBox 添加到 childGroup 按钮组中
            ButtonGroup.group: childGroup
        }

        // 子 CheckBox 2
        CheckBox {
            id: childCheckBox2
            // CheckBox 显示的文本
            text: "Child CheckBox 2"
            // 左侧填充，使文本与指示器之间有一定的间距
            leftPadding: indicator.width + 5
            // 将该 CheckBox 添加到 childGroup 按钮组中
            ButtonGroup.group: childGroup
        }
    }