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）”。

参考：

Qt 之自定义按钮在鼠标悬浮、按下、松开后的效果

图文讲解：QT样式表StyleSheet的使用与加载

Qt--样式表设置按钮样式

巴特西