Qt Quick入门教程(2): QML Button用法介绍

       Button是很常见的控件，Qt助手的说明以下：

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("我被点击了")
        }
    }
}

       下面说说QML按钮的其它属性及用法

1、信号槽链接

        在Button的父类AbstractButton能够找到以下信号：

Signals

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

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

//信号槽链接，单击信号
        onClicked: {
            console.log("我被点击了,输出变量num = " + num)
        }

        槽函数代码的3中写法
（1）能够调用外部js函数
（2）大括号能够不写
（3）用控件的id调用，例如给Button添加了一个属性id:myButoon

Button{
        id:myButoon
        x:100  //设置按钮的横坐标
        y:100  //设置纵坐标
        text:"我是按钮"   //按钮标题

        //信号槽链接，单击信号
        onClicked: {
            console.log("我被点击了,输出变量num = " + num)
        }

        function slotDouble(){
            console.log("我被双击了")
        }

        //双击信号
//        onDoubleClicked: {
//            slotDouble();
//        }

        //函数调用时大括号也能够不写
        //onDoubleClicked: slotDouble()

        //也能够根据id调用
        //onDoubleClicked: myButoon.slotDouble()
    }

 2、Button添加资源

 建立qrc文件后，按钮能够获取qrc文件里的资源进行显示

Button
    {
        id:myButoon2
        x: 100
        y: 160

        //安妮添加图标
        icon.source: "qrc:/images/save.png"
        icon.color: "transparent"
        display: AbstractButton.TextUnderIcon
        text:"保存"

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(250/255,250/255,250/255,1)
               }
    }

 默认的图片显示全是黑色的，须要把效果设为透明："transparent" 

 

 本demo所有代码以下：

/*

  Button控件的用法

*/

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //变量的定义
    property int num : 1

    Button{
        id:myButoon
        x:100  //设置按钮的横坐标
        y:100  //设置纵坐标
        text:"我是按钮"   //按钮标题

        //信号槽链接，单击信号
        onClicked: {
            console.log("我被点击了,输出变量num = " + num)
        }

        function slotDouble(){
            console.log("我被双击了")
        }

        //双击信号
//        onDoubleClicked: {
//            slotDouble();
//        }

        //函数调用时大括号也能够不写
        //onDoubleClicked: slotDouble()

        //也能够根据id调用
        //onDoubleClicked: myButoon.slotDouble()
    }

    Button
    {
        id:myButoon2
        x: 100
        y: 160

        //安妮添加图标
        icon.source: "qrc:/images/save.png"
        icon.color: "transparent"
        display: AbstractButton.TextUnderIcon
        text:"保存"

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(250/255,250/255,250/255,1)
               }
    }
}

运行结果：

其它用法，能够参考Qt助手。