QML 自定义控件Button 采用QtQuick.Controls 1.0和2.0两版本实现

在开发QtQuick项目时，对于界面上的控件Controls往往会重复使用，单个界面上会有多个同样的Controls。在调用系统Controls库时，往往一些属性，如字体、样式、大小等需要多次去编写，造成代码重复冗余，而且一些项目要求的特殊属性系统Controls也无法全部满足，因此，在QtQuick项目中，自定义自己项目的控件对于项目的开发具有很大好处。

QT对于QtQuick.Controls库提供的1.0和2.0版本，两个版本的相同控件并不支持混用，同时QtQuick.Controls的Button控件无法直接指定字体大小等属性，无法满足指定属性项目的需求，因此需要自定义此Controls。因此本文对于1.0和2.0版本的Button给出了两个自定义的控件版本，具体自定义实现见下文。

1.0版本自定义Button

1.0版本即qml文件头引入QtQuick.Controls 1.0 - 1.4库的适用版本，具体见自定义控件代码：

/** 自定义QML Button控件* Since:Qt 5.1 采用QtQuick.Controls 1.4库(1.0版)* 此方式同样也可采用2.0版本方式定义*/import QtQuick 2.12import QtQuick.Controls 1.4Rectangle {id: control;// 定义Button字体属性property alias text: buttonText.text; // 按钮名称property alias fontSize: buttonText.font.pixelSize; // 名称字体大小property alias fontFamily: buttonText.font.family; // 名称字体样式// 定义Button可响应信号signal clicked; // 单击signal doubleClicked; // 双击signal pressed; // 压signal released;signal entered;signal exited;// 定义Button形状implicitWidth: 60; // 最小宽度implicitHeight: 30;// 最小高度color: control.enabled ? (mouse.pressed ? "#0b81ff" : "transparent") : "#E5E5E5"; // 自定义Button颜色border.width: 1; // 边框宽度border.color: mouse.hovered ? "#0b81ff" : "#E5E5E5"; // 边框颜色radius: 5;// 弧度// 定义按钮名称Text {id: buttonText;anchors.centerIn: parent;text: control.text;font.pixelSize: 12; // 默认字体大小font.family: "Microsoft YaHei"; // 字体样式color: "#333333"; // 字体颜色renderType: Text.NativeRendering; // 防止字体模糊}// 定义按钮鼠标点击事件MouseArea {id: mouse;anchors.fill: parent;hoverEnabled: true; // 悬停事件使能onEntered: {control.entered();}onExited: {control.exited();}onClicked: {control.clicked();}onDoubleClicked: {control.doubleClicked();}onPressed: {control.pressed();}onReleased: {control.released();}}}

此版本的Button，由外框矩形和内部Text组成，按钮的事件信号由鼠标事件定义完成。

1.0版本自定义Button有如下的缺点：

1. button的背景大小无法自适应按钮文文字大小，需求根据当前的按钮名称指定按钮宽度。

2. 无法监测鼠标悬停事件。

3. 控件本身鼠标焦点在选中后难以转移，会出现点击其他控件出现两次才会响应，可采用forceActiveFocus()函数来转移焦点。

2.0版本自定义Button

2.0版本即qml文件头引入QtQuick.Controls 2.0 - 2.12库的适用版本，具体见自定义控件代码：

/** 自定义QML Button控件* Since:Qt 5.7 采用QtQuick.Controls 2.12库(2.0版)*/import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Controls.impl 2.12import QtQuick.Templates 2.12 as TT.Button {id: control;property alias fontSize: control.font.pixelSize; // 名称字体大小property alias fontFamily: control.font.family; // 名称字体样式// 按钮属性implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,implicitContentHeight + topPadding + bottomPadding); // 最小高度implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,implicitContentWidth + leftPadding + rightPadding); // 最小宽度hoverEnabled: true;padding: 6; spacing: 6;horizontalPadding: padding + 2; //2.0版本属性font.family: "Microsoft YaHei";font.pixelSize: 12;// 按钮名称属性contentItem: Label {height: back.height;width: back.width;horizontalAlignment: Text.AlignHCenter;verticalAlignment: Text.AlignHCenter; // 字体位置 水平和垂直的中心text: control.text;font: control.font;color: "#333333";renderType: Text.NativeRendering;}// 按钮背景属性background: Rectangle {id: back;implicitWidth: 60;implicitHeight: 30;visible: !control.flat || control.down || control.checked || control.highlighted;color: control.enabled ? (control.pressed ? "#0b81ff" : "transparent") : "#E5E5E5";border.width: 1;border.color: control.hovered ? "#0b81ff" : "#E5E5E5";radius: 5;}}

自定义2.0版本的Button的属性于目前使用来说，体验比较良好，如果项目不要求版本，建议使用此版本的自定义Button。

自定义Button应用

在main.qml中使用自定义的Controls Button时，需先引入定义此控件的路径，并且最好将包含自定义控件的的路径as成专用的首字母大写的关键字，如下代码：

import QtQuick 2.0import QtQuick.Window 2.0import QtQuick.Controls 2.12import "myControl" as MyWindow {visible: true;width: 640;height: 480;title: qsTr("自定义Control");My.Botton1 {id: button1;anchors.top: parent.top;anchors.topMargin: 30;anchors.left: parent.left;anchors.leftMargin: 50;width: 110; // 指定适应text宽度的 按钮宽度text: qsTr("Control 1.4版本");onClicked: {console.log("单击");}}My.Button2 {id: button2;anchors.top: button1.bottom;anchors.topMargin: 30;anchors.left: parent.left;anchors.leftMargin: 50;text: qsTr("Control 2.12版本");onClicked: {console.log("单击");}}Button {id: button;anchors.top: button2.bottom;anchors.topMargin: 30;anchors.left: parent.left;anchors.leftMargin: 50;text: qsTr("Qt库 版本");/*// 字体// 名称contentItem: Label {}// 背景background: Rectangle {}*/onClicked: {console.log("单击");}}}

如上面代码所示，自定义控件可省去大多重复代码，并且可以只需要改变很少的属性就可以改变每个控件的独立属性，比较推荐使用。运行后的展示如下：

欢迎各位大佬评论，私信指正。