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助手。