目录
一.添加模块
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.15
Window {
visible: true
width: 640
height: 480
title: qsTr("CheckBox")
CheckBox {
id:_checkbox
anchors.centerIn: parent
activeFocusOnPress: true
enabled:false
style: CheckBoxStyle {
spacing: 5
indicator:Rectangle {
id: indRectangle
width: 36
height: 36
radius: 6
color: enabled ? "#D7E1F0" : "#8B99B2"
border.width: 2
border.color: control.checkedState ? "#2850FF" : "white"
opacity: control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
Image {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.leftMargin: 1
anchors.bottomMargin: 1
source: "qrc:/new/CheckSelect.png"
visible: control.checkedState === Qt.Checked ? true : false
mipmap: true
fillMode: Image.PreserveAspectFit
}
//淡阴影
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 3
radius: 8
samples: 17
color: "#4d000f43"
}
}
label: Item {
width: text.width + 36 * 0.25
height: Math.max(text.height, 36)
baselineOffset: text.baselineOffset
Text {
id: text
text: "CheckBox"
font.pixelSize: 30
font.bold: enabled ? true : false
font.family: "微软雅黑"
color: enabled ? "black" : "#6379A5"
}
}
}
onCheckedChanged: {
console.log("CheckBox状态" + checkedState)
_label.visible = !_label.visible
}
}
Label{
id:_label
anchors.top: _checkbox.bottom
anchors.topMargin: 30
anchors.horizontalCenter: parent.horizontalCenter
text: "我是按钮状态显示"
font.pixelSize: 30
visible: false
}
}