目录

一.添加模块

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.15

二.自定义CheckBox

1.CheckBox设置

2.勾选框设置

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

2.当enabled为true

3.当enabled为false

---

一.添加模块

import QtQuick.Controls 1.2

1. 作用: 引入Qt Quick Controls模块，提供了一组常见的UI控件（如按钮、文本框等），用于快速开发现代用户界面。

2. 性质: 这个模块包含了许多预定义的控件和样式，可以大大简化UI开发。版本号1.2表示你正在使用该模块的第1.2版。

import QtQuick.Controls.Styles 1.4

1. 作用: 引入Qt Quick Controls Styles模块，这个模块扩展了Qt Quick Controls模块，提供了一些额外的样式和主题支持。

2. 性质: 通过这个模块，你可以为你的应用程序应用不同的样式和主题，从而改变控件的外观。版本号1.4表示你正在使用该模块的第1.4版。

import QtGraphicalEffects 1.15

1. 作用: 引入Qt Graphical Effects模块，提供了一组图形效果类，用于为UI元素添加视觉效果，如阴影、模糊、渐变等。

2. 性质: 这个模块允许你在应用程序中实现复杂的视觉效果，提升用户体验。版本号1.15表示你正在使用该模块的第1.15版。

二.自定义CheckBox

1.CheckBox设置

activeFocusOnPress：在按下时使复选框获得焦点。

enabled：设置为 true，表示复选框可以被操作。

2.勾选框设置

1.根据 enabled 状态设置矩形的颜色。

2.根据 control.checkedState 的值设置边框颜色。如果 control.checkedState 为真，边框颜色为 #2850FF；否则为白色。

3.根据 control.checkedState 的值设置矩形的不透明度。如果 control.checkedState 等于 Qt.PartiallyChecked，不透明度为 0.5；否则为 1。

4.启用图层效果。 layer.effect: DropShadow { ... } 应用阴影效果，使矩形看起来有立体感

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

没有点击checkbox时，字体为黑色，不显示文本

2.当enabled为true

点击checkbox时，字体为黑色，显示文本并且出现勾选状态

3.当enabled为false

checkbox为不可点击状态，字体为灰色，不显示文本

四.代码

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls         1.2
import QtQuick.Controls.Styles  1.4
import QtGraphicalEffects 1.15Window {visible: truewidth: 640height: 480title: qsTr("CheckBox")CheckBox {id:_checkboxanchors.centerIn: parentactiveFocusOnPress: trueenabled:falsestyle: CheckBoxStyle {spacing:  5indicator:Rectangle {id:             indRectanglewidth:   36height:  36radius:         6color:          enabled ? "#D7E1F0" : "#8B99B2"border.width:   2border.color:   control.checkedState ? "#2850FF" : "white"opacity:        control.checkedState === Qt.PartiallyChecked ? 0.5 : 1Image {anchors.left: parent.leftanchors.bottom: parent.bottomanchors.leftMargin: 1anchors.bottomMargin: 1source:     "qrc:/new/CheckSelect.png"visible:     control.checkedState === Qt.Checked ?  true : falsemipmap:     truefillMode:   Image.PreserveAspectFit}//淡阴影layer.enabled:      truelayer.effect:       DropShadow {verticalOffset: 3radius:         8samples:        17color:          "#4d000f43"}}label: Item {width:    text.width + 36 * 0.25height:   Math.max(text.height, 36)baselineOffset: text.baselineOffsetText {id:                 texttext:               "CheckBox"font.pixelSize:     30font.bold:          enabled ? true : falsefont.family:        "微软雅黑"color:              enabled ? "black" : "#6379A5"}}}onCheckedChanged: {console.log("CheckBox状态" +　checkedState)_label.visible = !_label.visible}}Label{id:_labelanchors.top: _checkbox.bottomanchors.topMargin: 30anchors.horizontalCenter: parent.horizontalCentertext: "我是按钮状态显示"font.pixelSize: 30visible: false}
}