自定义QPushButton

                    自定义QPushButton 样式

之前在项目需要用到自定的QPushButton，于是在网上找了一些方法，有什么设置pattle的，有设置icon的，到最后都不符合要求，而且设置来设置去的多麻烦，有没有什么好的方法可以统一方便的设置，方法当然是有的。下面就用Qt自带的Design中的styesheet来设计自己想要的PushButton！

1、首先打开QCreator，新建个项目，我是新建了个Qt控件项目->Qt QUI 应用.

2、双击mainwindow.ui，在上面拖一个Push Button进去，像这样：

       

很中规中距的push button，一点一点改吧。

3、QT中窗口对象都有属性什么的都可以在Design里面来设置，我们点选QMainWindow那个对象，我的是mainwindow，右键选择->改变样式表（或者在属性编辑器里找到stylesheet），打开的样式表单像这样的：（空空如也）

      

4、试着添一句看看，比如

QPushButton#pushButton{

color:red;

}  

注意格式，点击确定，成功后要像这样的：

5、能不能改成自定义颜色呢，可以，点击添加颜色，选择个喜欢的颜色，加到color:后面，像这样

QPushButton#pushButton{

    color:rgb(193, 35, 255);

}

断句记得加“;”再在color:后添加渐变看看；

6、字体能不能设置呢，点击添加字体，选个喜欢的字体，加到font:后面,像这样

QPushButton#pushButton{

color:rgb(193, 35, 255);

font: oblique 50pt "AR PL UKai TW";

  }

记得断句加”;” , 效果应该是这样的

7、能不能改变push button的背景图片呢，这之前，我们肯定要把我们想要的图片加载到资源文件中来，我是加了这两个

然后回到样式表，点击添加资源，双击resource root，可以看到我新添加的两张图片，选择一张添加进去，加到border-image:后面，最后记得加断句“；”

QPushButton#pushButton{

     color:rgb(193, 35, 255);

font: oblique 50pt "AR PL UKai TW";

border-image:url(:/an10.png) ;

}

成功后像这样：

8、但是，我们要的按键，应该是pressed的时候换一张图片，好吧，我们可以这样

QPushButton#pushButton{

     color:rgb(193, 35, 255);

font: oblique 50pt "AR PL UKai TW";

border-image:url(:/an10.png) ;

}

QPushButton#pushButton::pressed{

border-image:url(:/an11.png);

}

这样点击后就可以切换到自己想要的图片了，像这样

我们还可以为其他pushButton状态设置想要的图片，比如pushButton::disabled

但是我们想去掉外围这个虚线框，可以这样

加上这样一句

outline:none;

9、可能有些人说，这样一个一个pushButton的设置多麻烦，那好，我们再添一个push button

，然后表单里面可以这样写

QPushButton#pushButton, #pushButton_2{

     color:rgb(193, 35, 255);

font: oblique 50pt "AR PL UKai TW";

border-image:url(:/an10.png) ;

outline:none;

}

QPushButton#pushButton::pressed, #pushButton_2::pressed{

border-image:url(:/an11.png);

}

注意pushButton是我第一个pushbutton的对象名，pushButton_2是第二个pushbutton。

好的，我是大功告成了，你们呢？