QML 自定义CheckBox控件(两种方式)

          此系列文章同QML自定义控件，都会给出Controls 1和Controls 2两个版本的自定义控件，后续不再重复此步骤，文章格式上下文为两种方式自定义Control代码，应用实例代码，运行展示。

        QtQuick库提供的Controls库，不管QtQuick.Controls1.0版本中的CheckBox，还是QtQuick.Controls2.0版本中的CheckBox，都没有直接给出复选框的背景和字体等属性，每次使用时都需要自行定义1.0的style和2.0版本的deleget等，使用起来非常不方便，因此本文将给出两种方式的CheckBox控件。

1. 采用自行方法，自定义需要的CheckBox属性(包括背景大小，形状，字体，信号等全部属性)来实现，具体见代码。

2. 采用QtQuick.Templates提供的模板方式，直接在模板中定义此控件的部分属性，在外界可直接使用，但是对于部分属性还需自行定义，不过相比第一种方式更加便洁，建议使用。

方式一 

        采用QtQuick.Controls 1 moudle版本，定义CheckBox样式的同时，需自定义需要使用到的所有属性，具体见CheckBox1.qml代码：

/*
* 自定义QML CheckBox控件
* Since:Qt 5.1 采用QtQuick.Controls 1.4库(1.0版)
* 此方式对于CheckBox的所有需要使用的属性都需自定义
*/

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Rectangle {
    id: rec;

    // 自定义控件属性
    property int checkBoxSize: 16;  // CheckBox大小 默认正方形
    // 复选框字体属性
    property int fontSize: 12; // 复选框 文字大小
    property string fontFamily: "Microsoft YaHei";  // 文字字体
    property color fontColor: "#333333"; // 字体颜色
    property string text: "";
    //  此处还可定义复选框选中颜色等属性

    // CheckBox自身属性
    property alias checked: control.checked;       // 复选框选中
    property alias checkedState: control.checkedState; // 选中状态
    property alias exclusiveGroup: control.exclusiveGroup; // 复选框互斥组

    // CheckBox 大小颜色
    width: control.width + text.length;
    height: checkBoxSize;
    color: "transparent";

    CheckBox {
        id: control;
        style: CheckBoxStyle {
            spacing: 3;
            // 复选框形状 用颜色和边框宽度区分选中状态 也可采用jpg png svg等格式图片来代替
            indicator: Rectangle {
                implicitWidth: checkBoxSize;
                implicitHeight: checkBoxSize;
                color: !control.enabled ? "#E5E5E5" : "transparent";  // 颜色，使能与不使能
                border.color: control.activeFocus ? "#E5E5E5" : "#EEEFF7";
                border.width: 2;
                radius: 2;
                Rectangle {
                    implicitWidth: checkBoxSize;
                    implicitHeight: checkBoxSize;
                    visible: control.checked;
                    border.color: control.checked ? "#0B81FF" : "#E5E5E5";
                    border.width: control.checked ? 5 : 2;
                    radius: 2;
                    anchors.fill: parent
                }
            }
            // 复选框 名称
            label: Label {
                text: rec.text;
                font.family: rec.fontFamily;
                font.pixelSize: rec.fontSize;
                color: rec.fontColor;
                leftPadding: 3;
            }
        }
    }
}

方式二 

        采用QtQuick.Controls 2 moudle版本，定义CheckBox样式的同时，只需自定义CheckBox使用到的部分属性，具体见CheckBox2.qml代码：

/*
* 自定义QML CheckBox
* Since:Qt 5.7 采用QtQuick.Controls 2.12库(2.0版)
*/

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T

T.CheckBox {
    id: control;

    // 自定义控件属性
    property int checkBoxSize: 16;  // CheckBox大小 默认正方形
    // 复选框字体属性
    property int fontSize: 12; // 复选框 文字大小
    property string fontFamily: "Microsoft YaHei";  // 文字字体
    property color fontColor: "#333333"; // 字体颜色
    //  此处还可定义复选框选中颜色等属性

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding); // 适应当前control宽
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding,
                             implicitIndicatorHeight + topPadding + bottomPadding); // 适应当前control高
    padding: 6;
    spacing: 3; // 间距

    // CheckBox 外形属性定义
    // 此处也可直接用jpg png svg等格式Image
    indicator: Rectangle {
        width: checkBoxSize;
        height: checkBoxSize; // 长宽
        anchors.verticalCenter: parent.verticalCenter; // 位置
        color: !control.enabled ? "#E5E5E5" : "transparent";  // 颜色，使能与不使能
        border.color: control.checked ? "#0B81FF" : "#E5E5E5";// 选中边框颜色
        border.width: control.checked ? 5 : 2; // 选中边界宽度
        radius: 2;
    }

    // CheckBox 名称属性定义
    contentItem: Text {
        color: fontColor;   // 字体颜色
        text: control.text; //
        font.pointSize: fontSize;  // 大小
        font.family: fontFamily; // 字体
        leftPadding: control.indicator.width + control.spacing; // 左间距
        renderType: Text.NativeRendering;  // 防止 Controls 2 字体模糊
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignHCenter; // 文字位置
    }
}

自定义控件应用

      在main.qml中引入两种控件qml路径as成My，并使用此Controls具体见代码实现：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.12
import "myControl" as My

Window {
    visible: true;
    width: 640;
    height: 480;
    title: qsTr("自定义Control");

    My.CheckBox1 {
        id: check1;
        anchors.top: parent.top;
        anchors.topMargin: 50;
        anchors.left: parent.left;
        anchors.leftMargin: 50;
        text: qsTr("Controls 1版本");

        onCheckedChanged: {
            console.log("Controls 1版本复选框状态变化");
        }
    }

    My.CheckBox2 {
        id: check2;
        anchors.top: check1.bottom;
        anchors.topMargin: 50;
        anchors.left: parent.left;
        anchors.leftMargin: 50;
        text: qsTr("Controls 2版本");

        onCheckedChanged: {
            console.log("Controls 2版本复选框状态变化");
        }
    }

    CheckBox {
        id: check3;
        anchors.top: check2.bottom;
        anchors.topMargin: 50;
        anchors.left: parent.left;
        anchors.leftMargin: 50;
        text: qsTr("Qt 未定义样式版本");

        onCheckedChanged: {
            console.log("Qt 未定义样式版本复选框状态变化");
        }
    }

}

控件展示

1. 未选中的CheckBox样式

2. 选中状态的CheckBox

 

         结束！