Qt样式表之三：实现按钮三态效果的三种方法
按钮的三态，指的是普通态、鼠标的悬停态、按下态。Qt中如果使用的是默认按钮，三态的效果是有的，鼠标放上去会变色，点击的时候有凹陷的效果。
但是如果自定义按钮实现三态效果有三种方法，一种是设置背景图，主要是需要自己设计按钮的效果图，另一种是通过样式控制不同状态下按钮的显示效果，还有一种是通过qss文件实现。
方法一：设置背景图方式
1.1 添加背景图
先使用PS或其他图片工具设计按钮的背景图，然后在工程里添加背景图，将下面两张图片添加进去，具体过程这里不再介绍。
下面是普通态的背景图，用了同一张背景图(ok.png)：
下面是悬停态的背景图(ok1.png)：
下面是按下态的背景图(ok2.png)：
1.2 样式表设置背景图
样式表设置背景图可以使用setStyleSheet函数，在程序里设置按钮的样式表，具体程序如下所示：
ui->pbut_boardimg_reset->setStyleSheet("QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png);}"
"QPushButton:hover{border-image: url(:/new/prefix1/image/showmodeimag/ok.png);}"
"QPushButton:pressed{border-image: url(:/new/prefix1/image/showmodeimag/ok1.png);}");
也可以在 QtDesigner 上，即ui文件上的按钮处编辑样式表，如下图所示：
样式表如下：
QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}
QPushButton:hover{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}
QPushButton:pressed{border-image: url(:/new/prefix1/image/showmodeimag/ok1.png)}
1.3 运行效果图
二、方法二：设置样式方式
2.1 通过设置样式控制不同显示效果
/*按钮普通态*/
QPushButton
{
/*字体为微软雅黑*/
font-family:Microsoft Yahei;
/*字体大小为20点*/
font-size:20pt;
/*字体颜色为白色*/
color:white;
/*背景颜色*/
background-color:rgb(14 , 150 , 254);
/*边框圆角半径为8像素*/
border-radius:8px;
}
/*按钮停留态*/
QPushButton:hover
{
/*背景颜色*/
background-color:rgb(44 , 137 , 255);
}
/*按钮按下态*/
QPushButton:pressed
{
/*背景颜色*/
background-color:rgb(14 , 135 , 228);
/*左内边距为3像素，让按下时字向右移动3像素*/
padding-left:3px;
/*上内边距为3像素，让按下时字向下移动3像素*/
padding-top:3px;
}
注：注释只能使用/* */，#和//均无效。
2.2 运行效果图
可以看上图中“确定按钮”的三态效果。在鼠标悬停时背景色加深，按下时设置了padding，给人一种按钮被按下的感觉。
这种方法比上面用图标作为背景的好处就是可以不需要设计背景图，而且在样式不设置字体的情况下，可以随意更改文字以及文字的大小、位置、字体等显示效果。
三、方法三：qss文件方式
3.1 新建qss文件
新建一个txt文本文档，并修改后缀名为.qss，文件名任取，例如：myStyleSheet.qss，在这个qss文件写入qss语句。内容如下：
/*按钮普通态*/
QPushButton
{
/*字体为微软雅黑*/
font-family:Microsoft Yahei;
/*字体大小为20点*/
font-size:20pt;
/*字体颜色为白色*/
color:white;
/*背景颜色*/
background-color:rgb(14 , 150 , 254);
/*边框圆角半径为8像素*/
border-radius:8px;
}
/*按钮停留态*/
QPushButton:hover
{
/*背景颜色*/
background-color:rgb(44 , 137 , 255);
}
/*按钮按下态*/
QPushButton:pressed
{
/*背景颜色*/
background-color:rgb(14 , 135 , 228);
/*左内边距为3像素，让按下时字向右移动3像素*/
padding-left:3px;
/*上内边距为3像素，让按下时字向下移动3像素*/
padding-top:3px;
}
3.2 引用qss文件
引用qss文件有两种方式，一是引用qss文件的外部路径，二是引用qss文件的资源路径。
一、引用qss文件的外部路径
加载qss文件时，需要指定文件路径（一般是相对路径），如果把qss文件放在磁盘上，文件暴露在用户眼皮底下，可能会被用户随意修改，解决方法就是把qss文件作为资源，一起打包进exe文件中。
二、引用qss文件的资源路径
步骤如下：
1、在qt左侧目录树的顶层文件夹上右击 -> 添加新文件 -> 选择QT -> QT resource file - > choose，输入自定义资源文件的名字 resource -> 选择资源文件的存放路径->下一步->ok，这样就可以在目录树中看到一个文件 resource.qrc。（如果已经创建过资源文件，则跳过该步）
2、右击 resource.qrc文件 -> open in editor，在打开的资源编辑器中，点击添加 -> 前缀 -> 修改前缀为 /qss， 再点击添加 -> 添加现有文件 -> 添加上选中我们上面做好的qss文件。完成后效果如下图所示。
3、写程序时需要读取该文件时，右击这个qss文件，选择复制url，即可复制本文件的资源路径。
3.3 程序设置样式表
//这是在Qt的资源下的文件,可以不用在资源下
QFile file(":/qss/myStyleSheet.qss");
//只读方式打开文件
file.open(QFile::ReadOnly);
//读取文件的所有内容，并转换成QString类型
QString styleSheet = tr(file.readAll());
//当前窗口设置样式表
//this->setStyleSheet(styleSheet);
//指定按钮设置样式表
ui->pushButton->setStyleSheet(styleSheet);
ui->pushButton_2->setStyleSheet(styleSheet);
如果想设置单个的指定按钮样式，则通过UI指向按钮进行修改样式表就可以了。
四、综合对比
3.1 设置背景图方式
优点 ：样式简单，直接设置border-image即可，可以选取漂亮的UI图片，总体上可能会比单纯通过样式设置显示效果要好一些。（如果UI图选取效果不好的情况下，效果可能没有单纯设置样式好看，这就要看个人的审美观了哈O(∩_∩)O！）
缺点 ：需要自己制定背景效果图， 可能比较耗时。
3.2 设置样式方式
优点：不需要准备背景图，直接通过样式设置，简单、粗暴，想怎么设置就怎么设置（前提是要会一点CSS），能够更好地控制显示效果（比如控制文字的大小，位置、字体等）。
缺点：样式稍微复杂，需要懂更多的CSS样式，如果需要在按钮上加图标什么的就必须要加载背景图片了，单纯靠样式解决不了。
以上总结了两种方法的优缺点，可以说这两种方法可以相互取长补短，基本上运用好这两种方式就能够做出精美的按钮了，具体采样哪种方式就看自己如何选择了哈 O(∩_∩)O！
五、扩展
QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}
如果我们使用如上样式，将会对所有的QPushButton进行设置样式，如果只需要给某一个则用以下格式：
“QPushButton#” + “按钮名称（objectName）”。
参考：
