Qt Quick：CheckBox 复选框

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

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

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.MaterialWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")CheckBox {x: 20; width: 100; height: 50; text: "CheckBox"tristate: true              // 三态开启：未选中0、部分选中1、选中2onCheckStateChanged: {console.log(checkState) // 当状态改变，打印当前状态：0/1/2}}
}

自定义CheckBox需要使用indicator：

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.MaterialWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")CheckBox {id: checkBoxx: 20width: 100; height: 50text: "CheckBox"font.pixelSize: 16tristate: true              // 三态开启：未选中0、部分选中1、选中2onCheckStateChanged: {console.log(checkState) // 当状态改变，打印当前状态：0/1/2}indicator: Item {width: parent.width; height: parent.heightImage {id: checkboxIconwidth: checkBox.height; height: checkBox.heightsource: 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.textfont: checkBox.fontanchors.left: checkboxIcon.rightanchors.leftMargin: 2anchors.verticalCenter: checkboxIcon.verticalCenter}}}
}

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

次日补充：

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

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

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