基本概念

以前写过一个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戴上皮肤相关推荐

QML工作笔记-为TestField戴上皮肤
目录基本概念代码及演示源码打包下载基本概念以目前的技术累计来说,有3种方式进行美化! 1. 修改TextField本生的属性: 2. 加上TextFieldStyle进行美化: 3. 在Te ...
QML工作笔记-2种输入框的使用（TextField与TextInput）
目录演示代码演示这里如下图,上个的那个是TextField,下面的那个是TextInput加一个Rectangle 其中上面那个蓝框包着的就是TextField,下面那个是TextInput ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
QML工作笔记-Key Element的使用
目录基本概念演示及代码源码打包下载基本概念 Key允许按键,这个比QGraphics框架好用多了,开发起来真的是快. 演示及代码演示运行截图如下: 程序结构如下: 源码如下: main.cp ...
QML工作笔记-NumberAnimation、RotationAnimation、Timer综合使用
目录例子及演示打包下载例子及演示运行截图如下: git图如下: 程序结构如下: 源码如下: main.cpp #include <QGuiApplication> #include ...
QML工作笔记-仿前端滑出界面（JavaScript）
目录基本概念代码及演示源码打包下载基本概念 qml可以使用JavaScript完成一些动画的功能,其中可以写一个Js文件,并且导入,这样可以让程序结构更加清晰: 但这个JavaScript和w ...
QML工作笔记-PC端和Android端布局错位问题
目录问题演示解决办法问题演示比如如下的程序,在PC端运行: 而在Android端: 可见有如下的问题.造成这个原因可以是两平台的差异.得手动调整Android端的布局解决办法参考我以前的这 ...
QML工作笔记-文本输入设置长度以及回显方式（TextInput与TextField通用）
目录基本概念代码及演示基本概念这是一个很常用到的功能,特意记录下: 一般输入框会用到2个,一个是TextInput一个是TextField. 因为TextInput加Rectangle如果太长 ...
QML工作笔记-在Row布局中如何进行稍许移动（图片Row布局会遇到）
目录演示效果伪代码演示效果意思就是如何把这样的效果: 改成: 这里并不是把修仙上移了,而是把九州和大陆下移了这样的效果! 伪代码修改后的代码如下: Row {id: topRo ...

QML工作笔记-为PushButton戴上皮肤

基本概念

博主例子

源码打包下载

QML工作笔记-为PushButton戴上皮肤相关推荐

最新文章

热门文章