目录
一.添加模块
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
-
作用: 引入Qt Quick Controls模块，提供了一组常见的UI控件（如按钮、文本框等），用于快速开发现代用户界面。
-
性质: 这个模块包含了许多预定义的控件和样式，可以大大简化UI开发。版本号1.2表示你正在使用该模块的第1.2版。
import QtQuick.Controls.Styles 1.4
-
作用: 引入Qt Quick Controls Styles模块，这个模块扩展了Qt Quick Controls模块，提供了一些额外的样式和主题支持。
-
性质: 通过这个模块，你可以为你的应用程序应用不同的样式和主题，从而改变控件的外观。版本号1.4表示你正在使用该模块的第1.4版。
import QtGraphicalEffects 1.15
-
作用: 引入Qt Graphical Effects模块，提供了一组图形效果类，用于为UI元素添加视觉效果，如阴影、模糊、渐变等。
-
性质: 这个模块允许你在应用程序中实现复杂的视觉效果，提升用户体验。版本号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}
}
