一、概述

CheckBox 提供了一个选项按钮，也叫复选框，可以打开(选中)或关闭(未选中)。复选框通常用于从一组选项中选择一个或多个选项。对于较大的选项集，例如列表中的选项，请考虑使用 CheckDelegate，对于大量数据就选用modelview的模式来做。

CheckBox 从 AbstractButton 继承其API。例如，可以使用checked属性设置复选框的状态。还有很多外观也是继承了，像图标，文字设置等等。
在这里插入图片描述

二、使用

1. 常见用法

常见的用法，像上面的效果就是下面的代码功能

  ColumnLayout {
    
    
      CheckBox {
    
    
          checked: true
          text: qsTr("First")
      }
      CheckBox {
    
    
          text: qsTr("Second")
      }
      CheckBox {
    
    
          checked: true
          text: qsTr("Third")
      }
  }

2. 部分检查

除了已检查和未检查状态之外，还有第三种状态：部分已检查。可以使用trstate属性启用部分检查状态。该状态表示无法确定常规的选中/未选中状态；通常是因为其他影响复选框的状态。

例如，当树视图中选择了几个子节点的时候，就需要用这个功能。

在这里插入图片描述

层次化的复选框组可以用非独占的ButtonGroup来管理。

  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
      }
  }

三、外观定制

1. 效果一

CheckBox也是非常容易定制外观的
在这里插入图片描述

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  CheckBox {
    
    
      id: control
      text: qsTr("CheckBox")
      checked: true

      indicator: Rectangle {
    
    
          implicitWidth: 26
          implicitHeight: 26
          x: control.leftPadding
          y: parent.height / 2 - height / 2
          radius: 3
          border.color: control.down ? "#17a81a" : "#21be2b"

          Rectangle {
    
    
              width: 14
              height: 14
              x: 6
              y: 6
              radius: 2
              color: control.down ? "#17a81a" : "#21be2b"
              visible: control.checked
          }
      }

      contentItem: Text {
    
    
          text: control.text
          font: control.font
          opacity: enabled ? 1.0 : 0.3
          color: control.down ? "#17a81a" : "#21be2b"
          verticalAlignment: Text.AlignVCenter
          leftPadding: control.indicator.width + control.spacing
      }
  }

2. 效果二

这种效果的话，改一些简单的参数，或者用好的图片给替代了就好啦。
在这里插入图片描述

CheckBox {
    
    
            id: control
            text: qsTr("CheckBox")
            checked: true

            leftPadding: indicator.width
            ButtonGroup.group: childGroup
            indicator: Rectangle {
    
    
                implicitWidth: 22
                implicitHeight: 22
                x: control.leftPadding
                y: parent.height / 2 - height / 2
                radius: 11
                border.color: control.down ? "#17a81a" : "#21be2b"

                Rectangle {
    
    
                    width: 10
                    height: 10
                    x: 6
                    y: 6
                    radius: 5
                    color: control.down ? "#17a81a" : "#21be2b"
                    visible: control.checked
                }
            }

            contentItem: Text {
    
    
                text: control.text
                font.pixelSize: 14
                opacity: enabled ? 1.0 : 0.3
                color: control.down ? "#17a81a" : "#21be2b"
                verticalAlignment: Text.AlignVCenter
                padding: control.indicator.width + control.spacing
            }
        }

Qt Quick - CheckBox理论

CheckBox理论