目錄

?

?

基本概念

博主例子

源碼打包下載

---

?

基本概念

以前寫過一個PushButton的基本用法，鏈接如下：

https://blog.csdn.net/qq78442761/article/details/86261433

但很丑。就像男人一樣，不愿意找很丑的菇涼。

這里有幾種方法，一種是自定義，就和widgets的一樣，搞幾個圖片，自定義一下，還是很靈活的。

一種是用qml提供的style，來做，這種也是比較好的。

感覺這種就像女生買化妝品，買衣服，打扮下還是很好看的。

前者就相當于去整容啥的，或者是克隆個啥的。

?

這里使用到的就是ButtonStyle這個特性，具體看源碼

?

?

博主例子

這里要提示一點：

Button在QML中有2個版本，一個是2 5.9一個是 5.9，他們的基類都不一樣，在此使用5.9的。

他們的成員有很多不一樣。

?

程序運行截圖如下：

程序結構如下：

源碼如下：

main.qml

import QtQuick 2.9 import QtQuick.Window 2.2import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2Window {visible: truewidth: 640height: 480title: qsTr("CSDN IT1995")Row{anchors.centerIn: parentspacing: 20Button{id: pushButton1style: ButtonStyle{background: BorderImage {id: btn1source: control.pressed ? "qrc:/img/press.png" : "qrc:/img/normal.png"width: 128height: 128antialiasing: trueborder.left: 5border.top: 5border.right: 5border.bottom: 5}}onClicked: {console.debug("pushButton1 pressed!")}}Button{id: pushButton2style: buttonStyle1text: "Hello Word"onClicked: {console.debug("pushButton2 pressed!");}}Button{id: pushButton3style: buttonStyle2onClicked: {console.debug("pushButton3 pressed!");}}}Component {id: buttonStyle1ButtonStyle{background: Rectangle{implicitHeight: 128implicitWidth: 128color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"antialiasing: trueborder.color: "gray"radius: height/2}}}Component {id: buttonStyle2ButtonStyle{background: Rectangle{implicitHeight: 128implicitWidth: 128color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"antialiasing: trueborder.color: "gray"radius: height/2Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"antialiasing: truevisible: !control.pressedborder.color: "#aaffffff"radius: height/2}}}} }

?

源碼打包下載

https://github.com/fengfanchen/Qt/tree/master/QML%20Style%20Of%20Button

總結

以上是生活随笔為你收集整理的QML工作笔记-为PushButton戴上皮肤的全部內容，希望文章能夠幫你解決所遇到的問題。

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