Qt Quick:CheckBox 复选框

发布于:2024-12-23 ⋅ 阅读:(16) ⋅ 点赞:(0)

复选框不止选中和未选中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,或者将图片的填充模式设为自适应填充。

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