Qt Quick 常用控件：Button（按钮）用法及自定义

欢迎大家来到IT世界,在知识的湖畔探索吧!

1、简介

Button 是很常见的控件

Button QML Type

Push-button that can be clicked to perform a command or answer a question. More…

Import Statement: import QtQuick.Controls 2.5

Since: Qt 5.7

Inherits: AbstractButton

Inherited By: RoundButton and ToolButton

根据以上可知，在 QML 中要使用 Buttoon，需要先导入控件库 import QtQuick.Controls 2.5，使用其它控件也是一样，都需要导入这个库。

在界面上添加一个按钮：

import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Button{ x:100 // 设置按钮的横坐标 y:100 // 设置纵坐标 text:"我是按钮" // 按钮文本 // 信号槽连接 onClicked: { console.log("我被点击了") } } } 

欢迎大家来到IT世界,在知识的湖畔探索吧!

上面只设置了 Button 基本的文本属性和 onClicked 事件处理，下面说说 QML 按钮的其它属性及用法。

2、属性

• flat

此属性决定按钮是否为扁平。除非按下或选中按钮，否则通常不会绘制按钮的背景。默认值为 false。

• highlighted

此属性决定按钮是否突出显示。可以突出显示一个按钮，以吸引用户的注意。 它对键盘交互没有影响。默认值为false。

• enabled

设置是否使能。默认值为 true。

• font.pointSize

设置字体大小。

3、信号槽连接

在 Button 的父类 AbstractButton 可以找到如下信号：

欢迎大家来到IT世界,在知识的湖畔探索吧!canceled() clicked() doubleClicked() pressAndHold() pressed() released() toggled() 

按钮信号槽写法：on + 信号首字母大写，例如下面的代码，写了一个点击事件，代码如下：

// 信号槽连接，单击信号 onClicked: { console.log("我被点击了") } QT开发交流+赀料君羊：

槽函数代码的 3 种写法

（1）调用外部 JS 函数；

（2）函数调用时大括号也可以不写；

（3）用控件的 id 调用，例如给 Button 添加了一个属性 id:myButoon。

欢迎大家来到IT世界,在知识的湖畔探索吧!Button{ id:myButoon x:100 y:100 text:"我是按钮" // 信号槽连接，单击信号 onClicked: { console.log("我被点击了") } // 模拟外部JS函数 function slotDouble(){ console.log("我被双击了") } // 1.调用外部 JS 函数 //onDoubleClicked: { //slotDouble(); //} // 2.函数调用时大括号也可以不写 //onDoubleClicked: slotDouble() // 3.用控件的 id 调用 //onDoubleClicked: myButoon.slotDouble() } 

QT开发交流+赀料君羊：

4、自定义按钮

先看下实现效果，未点击任何按钮时：

点击确定按钮时：

点击 OK 按钮时：

（1）纯代码方式，使用 color 属性来设置点击前和点击后的字体、背景和边框颜色以美化按钮，MyButton.qml 的内容如下：

import QtQuick 2.9 import QtQuick.Controls 2.4 Button { id: root_Button font.pointSize: 16 // 设置字体大小 property color clr_font: "#ffffff" property color clr_backNormal: "#498ff8" property color clr_backPress: "#0066FF" property color clr_boardNormal: "#498ff8" property color clr_boardPress: "#0066FF" // 设置按钮文本 contentItem: Text { id: text2 text: root_Button.text font: root_Button.font opacity: enabled ? 1.0 : 0.3 color: clr_font horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } // 设置按钮背景 background: Rectangle { implicitWidth: 100 implicitHeight: 40 opacity: enabled ? 1 : 0.3 color: root_Button.down ? clr_backPress : clr_backNormal border.color: root_Button.down ? clr_boardPress : clr_boardNormal border.width: 1 radius: 6 } } 

（2）使用三张图片资源来实现按钮的三态，ThreeIconButton.qml 的内容如下：

import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Button { id: root_Button property string nomerPic: "qrc:/image/ok.png" property string hoverPic: "qrc:/image/ok1.png" property string pressPic: "qrc:/image/ok2.png" style: ButtonStyle { background:Rectangle{ implicitHeight: root_Button.height implicitWidth: root_Button.width color: "transparent" // 设置背景透明，否则会出现默认的白色背景 BorderImage { anchors.fill: parent source: control.hovered ? (control.pressed ? pressPic : hoverPic) : nomerPic; } } } } 

（3）使用 Rectangle 来重写按钮，同时显示图标和下方的提示文本，以及定义了点击和释放信号槽，MyIconButton.qml 的内容如下：

import QtQuick 2.0 Rectangle { id: rec property alias img_src: icon.source property alias btn_txt: button.text property color clr_enter: "#dcdcdc" property color clr_exit: "#ffffff" property color clr_click: "#aba9b2" property color clr_release: "#ffffff" //自定义点击信号 signal clickedLeft() signal clickedRight() signal release() width: 130 height: 130 radius: 10 Image { id: icon width: 80 height: 80 source: "qrc:/camera.png" fillMode: Image.PreserveAspectFit clip: true anchors.top: parent.top anchors.right: parent.right anchors.left: parent.left anchors.margins: 10 } Text { id: button text: qsTr("button") anchors.top: icon.bottom anchors.topMargin: 5 anchors.horizontalCenter: icon.horizontalCenter anchors.bottom: icon.bottom anchors.bottomMargin: 5 font.bold: true font.pointSize: 14 } MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true //接受左键和右键输入 acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: { //左键点击 if (mouse.button === Qt.LeftButton) { parent.clickedLeft() // console.log(button.text + " Left button click") } else if(mouse.button === Qt.RightButton) { parent.clickedRight() } } //按下 onPressed: { color = clr_click } //释放 onReleased: { color = clr_enter parent.release() } //指针进入 onEntered: { color = clr_enter } //指针退出 onExited: { color = clr_exit } } } 

（4）实际调用代码：

import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.4 Window { visible: true width: 800 height: 480 title: qsTr("Hello World") Grid { columns : 3 rows: 2 spacing: 80 anchors.centerIn: parent MyButton{ id: btnCancle width: 100 height: 50 text: "取消" clr_font: "#498ff8" clr_backNormal: "#ffffff" clr_backPress: "#DEE4ED" clr_boardNormal: "#498ff8" clr_boardPress: "#498ff8" } MyButton{ id: btnOk width: 100 height: 50 text: "确定" } ThreeIconButton { width: 150 height: 60 text: "OK" } MyIconButton { id: btn_camera img_src: "qrc:/image/camera.png"; btn_txt: "相机" onClickedLeft: console.log(btn_txt + " Left button click") } MyIconButton { id: btn_video img_src: "qrc:/image/dianshiju.png"; btn_txt: "视频" onClickedLeft: console.log(btn_txt + " Left Button click") } MyIconButton { id: btn_audio img_src: "qrc:/image/music.png"; btn_txt: "音乐" onClickedLeft: console.log(btn_txt + " Left Button click") } } }