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