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

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

2、属性flat

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

highlighted

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

enabled

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

font.pointSize

设置字体大小。

3、信号槽连接

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

canceled()clicked()doubleClicked()pressAndHold()pressed()released()toggled()

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

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

槽函数代码的 3 种写法

（1）调用外部 JS 函数；

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

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

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开发交流+赀料君羊：714620761

4、自定义按钮

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

点击确定按钮时：

点击 OK 按钮时：

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

import QtQuick 2.9import QtQuick.Controls 2.4Button {    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.0import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Button{    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.0Rectangle {    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.9import QtQuick.Window 2.2import QtQuick.Controls 2.4Window {    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")         }    }}