若该文为原创文章,转载请注明原文出处
编写登录界面时,有记住密码和自动登陆等选择,这时需要自定义控件,在此特意了解CheckBox。
一、例子
这个功能相对简单,直接上代码,工程模板以hello工程模块:
1、创建RoundCheckBox.qml文件
import QtQuick 2.12
import QtQuick.Controls 2.12
CheckBox {
id: root
property alias textColor: captionText.color
property alias borderColor: borderRect.border.color
property alias iconColor: iconText.color
text: "Check Box"
checked: true
indicator: Rectangle {
id: borderRect
width: 16
height: 16
radius: 8
x: root.leftPadding
y: (parent.height - height) / 2
border.color: "lightgray"
Text {
id: iconText
anchors.centerIn: parent
text: "\u2713" // ✓ 的 unicode 码
visible: root.checked
color: "black"
}
}
contentItem: Text {
id: captionText
text: root.text
font: root.font
opacity: enabled ? 1.0 : 0.3
verticalAlignment: Text.AlignVCenter
color: "black"
leftPadding: root.indicator.width + root.spacing
}
}
2、编写main.qml文件
import QtQuick 2.12
import QtQuick.Window 2.12
import "./Module"
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
RoundCheckBox { /* 调用qml,文件名头字母需要大写 */
id: roundCheckbox
text: qsTr("记住密码")
textColor: "black"
checked: true
anchors {
rightMargin: 10
topMargin: 10
}
onCheckedChanged: {
console.log("onCheckedChanged check: " + checked);
}
}
}
3、测试结果
点击复选框时,会打印Log.
二、涉及的一些属性
1、property
property⽤来⾃定义⼀个属性,并且可以进⾏初始化,且没有public、private、protected等限制.
property定义属性的类型可以是QML基本类型、也可以是QML对象类型,也可以是var泛型类型,⽽基本类型⽀持的有bool、double、int、list、real、string、url类型
⾃定义的属性默认会有个属性值改变信号,可以通过on<Property>Changed信号处理器来接受该信号。
2、alias
alias别名,一般用在实例化其它控件,而需要修改实例化后的子控件属性时候使用。比如A.qml中实例化了B(来源B.qml),又想改其子控件的具体属性,这个时候就可以用“alias”。
简单理解,以例子为例,main.qml调用RoundCheckBox修改textColor文本颜色,就要用alias.
3、onCheckedChanged
点击checked改变,自带功能。
4、打印
打印用console.log("内容")
三、总结
1、自定义Checkbox学习,详情可以参考QT助手,很好的文档工具。
2、property和alias属性应用,在很多工程上都会涉及。
3、文件可以直接调用,也可以根据自己需求修改。
如有侵权,请及时联系博主删除,VX:18750903063