复选框不止选中和未选中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,或者将图片的填充模式设为自适应填充。
虽然这篇文章大概率没多少人看到,但如果真的有大神路过并且有好的建议,欢迎在评论区留言哈~