Qt Quick：CheckBox 复选框

复选框不止选中和未选中2种状态哦，它还有1种部分选中的状态。这3种状态都是Qt自带的，如果想让复选框有部分选中这个状态，需要将三态属性（tristate）设为true。

 未选中的状态值为0，部分选中是1，选中是2。

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    CheckBox {
        x: 20; width: 100; height: 50; text: "CheckBox"

        tristate: true              // 三态开启：未选中0、部分选中1、选中2

        onCheckStateChanged: {
            console.log(checkState) // 当状态改变，打印当前状态：0/1/2
        }
    }
}

自定义CheckBox需要使用indicator：

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    CheckBox {
        id: checkBox
        x: 20
        width: 100; height: 50
        text: "CheckBox"
        font.pixelSize: 16

        tristate: true              // 三态开启：未选中0、部分选中1、选中2

        onCheckStateChanged: {
            console.log(checkState) // 当状态改变，打印当前状态：0/1/2
        }

        indicator: Item {
            width: parent.width; height: parent.height

            Image {
                id: checkboxIcon
                width: checkBox.height; height: checkBox.height
                source: switch (checkBox.checkState) {
                        case 0:
                            return "./imgs/9055251_bxs_checkbox_icon.png"
                        case 1:
                            return "./imgs/9055239_bxs_checkbox_minus_icon.png"
                        case 2:
                            return "./imgs/9055095_bxs_checkbox_checked_icon.png"
                        }
            }

            Label {
                text: checkBox.text
                font: checkBox.font

                anchors.left: checkboxIcon.right
                anchors.leftMargin: 2
                anchors.verticalCenter: checkboxIcon.verticalCenter
            }
        }
    }
}

图标就是用的Image，锯齿很明显，效果不如Material风格。还有个问题是，Label和Image之间需要留出间距，这个间距会导致Label被裁剪，右侧相同间距点击不再生效。

次日补充：

图标用Image实现时，在制作或下载图片之前就要想好尺寸了，因为我测试了一下发现，如果你的控件大小和图片大小保持一致，那么锯齿状就没那么明显了（2个尺寸差不多也可以，比如下载的图片64x64，实际显示是48x48也没问题）。

如果还是不行，可以试试抗锯齿属性设为true，或者将图片的填充模式设为自适应填充。

虽然这篇文章大概率没多少人看到，但如果真的有大神路过并且有好的建议，欢迎在评论区留言哈~