QML学习五：自定义RoundCheckBox

若该文为原创文章，转载请注明原文出处

编写登录界面时，有记住密码和自动登陆等选择，这时需要自定义控件，在此特意了解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