目录
基本概念
以前写过一个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.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
visible: true
width: 640
height: 480
title: qsTr("CSDN IT1995")
Row{
anchors.centerIn: parent
spacing: 20
Button{
id: pushButton1
style: ButtonStyle{
background: BorderImage {
id: btn1
source: control.pressed ? "qrc:/img/press.png" : "qrc:/img/normal.png"
width: 128
height: 128
antialiasing: true
border.left: 5
border.top: 5
border.right: 5
border.bottom: 5
}
}
onClicked: {
console.debug("pushButton1 pressed!")
}
}
Button{
id: pushButton2
style: buttonStyle1
text: "Hello Word"
onClicked: {
console.debug("pushButton2 pressed!");
}
}
Button{
id: pushButton3
style: buttonStyle2
onClicked: {
console.debug("pushButton3 pressed!");
}
}
}
Component {
id: buttonStyle1
ButtonStyle{
background: Rectangle{
implicitHeight: 128
implicitWidth: 128
color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
antialiasing: true
border.color: "gray"
radius: height/2
}
}
}
Component {
id: buttonStyle2
ButtonStyle{
background: Rectangle{
implicitHeight: 128
implicitWidth: 128
color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
antialiasing: true
border.color: "gray"
radius: height/2
Rectangle {
anchors.fill: parent
anchors.margins: 1
color: "transparent"
antialiasing: true
visible: !control.pressed
border.color: "#aaffffff"
radius: height/2
}
}
}
}
}
源码打包下载
https://github.com/fengfanchen/Qt/tree/master/QML%20Style%20Of%20Button