? ? ? ?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.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button{x:100 //設置按鈕的橫坐標y:100 //設置縱坐標text:"我是按鈕" //按鈕標題//信號槽連接onClicked: {console.log("我被點擊了")}} }

? ? ? ?下面說說QML按鈕的其它屬性及用法

一、信號槽連接

? ? ? ? 在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:myButoonx:100 //設置按鈕的橫坐標y:100 //設置縱坐標text:"我是按鈕" //按鈕標題//信號槽連接，單擊信號onClicked: {console.log("我被點擊了,輸出變量num = " + num)}function slotDouble(){console.log("我被雙擊了")}//雙擊信號 // onDoubleClicked: { // slotDouble(); // }//函數調用時大括號也可以不寫//onDoubleClicked: slotDouble()//也可以根據id調用//onDoubleClicked: myButoon.slotDouble()}

?二、Button添加資源

?創建qrc文件后，按鈕可以獲取qrc文件里的資源進行顯示

Button{id:myButoon2x: 100y: 160//安妮添加圖標icon.source: "qrc:/images/save.png"icon.color: "transparent"display: AbstractButton.TextUnderIcontext:"保存"//設置按鈕背景顏色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.5Window {id:windowvisible: truewidth: 640height: 480title: qsTr("Hello World")//變量的定義property int num : 1Button{id:myButoonx:100 //設置按鈕的橫坐標y:100 //設置縱坐標text:"我是按鈕" //按鈕標題//信號槽連接，單擊信號onClicked: {console.log("我被點擊了,輸出變量num = " + num)}function slotDouble(){console.log("我被雙擊了")}//雙擊信號 // onDoubleClicked: { // slotDouble(); // }//函數調用時大括號也可以不寫//onDoubleClicked: slotDouble()//也可以根據id調用//onDoubleClicked: myButoon.slotDouble()}Button{id:myButoon2x: 100y: 160//安妮添加圖標icon.source: "qrc:/images/save.png"icon.color: "transparent"display: AbstractButton.TextUnderIcontext:"保存"//設置按鈕背景顏色background: Rectangle {color: Qt.rgba(250/255,250/255,250/255,1)}} }

運行結果：

其它用法，可以參考Qt助手。

總結

以上是生活随笔為你收集整理的QML入门教程(2): QML Button用法介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。