QPushButton样式设置
QPushButton {
border: 1px solid #298DFF; /* QPushButton边框的宽度、样式和颜色 */
border-radius: 5px; /* 边框圆角 */
background-color: #62a6ea; /* 背景颜色 */
color: white; /* 文本颜色 */
font-family: "Microsoft YaHei"; /* 文本字体族 */
font-size: 14pt; /* 文本字体大小 */
}
/*鼠标悬停在按钮*/
QPushButton:hover
{
background-color: #e6c17a;
border:2px solid rgb(6,168,255);
}
/*鼠标按下按钮*/
QPushButton:pressed
{
background-color: #20793e;
border:2px solid rgb(6,168,255);
}
RGB颜色查找表
https://tool.oschina.net/commons?type=3
阿里巴巴矢量图标库
Chapter1 QPushButton样式设置
无样式的按钮
改变字体颜色
color:#ff0000;
改变字体
font-family:Microsoft Yahei;
改变字号
font-size:15pt;
改变背景颜色
background-color:#c3e9e5;
设置上边框为2个像素，样式为实线，颜色为黑色
border-top:2px solid #000000;
设置所有边框为2个像素，样式为实线，颜色为黑色
border:2px solid #000000;
设置左上角圆角为：10px
border-top-left-radius:10px;
设置圆角都为：10px
border-radius:10px;
设置上内边距为：8px；文字向下移动
padding-top:8px;
文字左对齐
text-align:left;
给文字加,下划线
text-decoration:underline;
给文字加,删除线
text-decoration:line-through;
加图标
image:url(":/delete.png");
加背景图标
background-image:url(":/delete.png");
设置轮廓样式
outline: 1px solid #0000ff;/*设置轮廓样式*/
background-color: #cccccc;
color: #ff0000;
border-radius: 4px;
padding: 2px;
按钮禁用时，设置样式
QPushButton:disabled {
/*设置禁用时按钮的样式*/
}
按钮选中时，设置样式
QPushButton:checked:disabled {
/*设置选中并且禁用时按钮的样式*/
}
点击按钮时，设置样式
QPushButton:pressed {
/*设置点击按钮时按钮的样式*/
}
鼠标悬浮在按钮上时，设置样式
QPushButton:hover {
}
问题，设置QPushButton:checked无效果
需要先设置按钮checkable属性为true，然后样式设置checked
如果要设置互斥，需要设置setAutoExclusive为true
Chapter2 qss样式表之QPushButton
原文链接：https://blog.csdn.net/aiwangtingyun/article/details/94462976
先来个示例
QPushButton {
font-family: "Microsoft YaHei";
font-size: 16px;
color: #BDC8E2;
background-color: #2E3648;
}
效果图如下：
上面的例子是基本的样式设置，下面我们将探讨 QPushButton 各种样式设置：
字体样式
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";
font-family 为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。
font-size 为设置字体大小，单位一般使用 px 像素
font-style 为设置字体斜体，italic 为斜体， normal 为不斜体
font-weight 为设置字体加粗，bold 为加粗， normal 为不加粗
font 为同时设置字体 style weight size family 的样式，但是 style 和 weight 必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，font 中不能设置颜色，可以单独设置 style weight 和 size，不能单独设置 family
color 为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
注意：字体颜色用的是 color 属性，没有 font-color 这个属性的
文字位置
text-align: left center;
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;
text-align 为设置文字位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置
padding-left 为设置文字距离左边边界的距离
padding-top 为设置文字距离顶边边界的距离
padding-right 为设置文字距离右边边界的距离
padding-bottom 为设置文字距离底边边界的距离
Tip: 特殊的位置可以使用 text-align 来设置，如果要精确设置位置只能通过 padding 来设置，一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以显示任意位置显示了（默认情况下文字是上下左右都居中显示的）
边框样式
border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;
border-style 为设置边框样式，solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认会设置为 none）
border-width 为设置边框宽度，单位为 px 像素
border-color 为设置边框颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
border 为同时设置 border 的 width style color 属性，但值的顺序必须是按照 width style color 来写，不然不会生效！
也可以单独设置某一条边框的样式
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;
border-top-style 为设置顶部边框样式
border-top-width 为设置顶部边框宽度
border-top-color 为设置顶部边框颜色
border-top 为设置顶部边框 width style color 的属性，原理和 border 一致
其它三个边框：right bottom left 边框的设置都相同
设置边框半径
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;
border-top-left-radius 为设置左上角圆角半径，单位 px 像素
border-top-right-radius 为设置右上角圆角半径，单位 px 像素
border-bottom-left-radius 为设置左下角圆角半径，单位 px 像素
border-bottom-right-radius 为设置右上角圆角半径，单位 px 像素
border-radius 为设置所有边框圆角半径，单位为 px 像素，通过圆角半径可以实现圆形的 PushButton
背景样式
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
background: url("./image.png") no-repeat left center #2E3648;
background-color 为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
background-image 为设置背景图片，图片路径为 url(image-path)
background-repeat 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
background-position 为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置
background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意
下面是一个综合示例
QPushButton {
font-family: "Microsoft YaHei";
font-size: 16px;
color: #BDC8E2;
font-style: italic;
font-weight: bold;
text-align: left center;
padding-left: 25px;
padding-top: 0px;
border-style: solid;
border-width: 2px;
border-color: aqua;
border-radius: 20px;
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
}
接下来，我们对 QPuahButton 进行动态样式设置
鼠标悬浮时的样式
QPushButton:hover{
color: red;
border-color: green;
background-color: aqua;
}
鼠标点击时的样式
QPushButton:pressed{
color: green;
border-color: blueviolet;
background-color: black;
}
按钮禁止时的样式
QPushButton:disabled{
color: blue;
border-color: brown;
background-color: aqua;
}
下拉菜单
对于 QPushButton，可以给它设置添加一个下拉菜单，这需要调用 QPushButton 的 setMenu() 方法，当菜单设置成功后，QPushButton 就会默认添加一个 menu-indicator 下拉菜单指示器图标，我们可以对这个菜单图标进行样式修改
QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
right: 10px;
top: 15px;
}
image 为设置菜单指示器图标
subcontrol-position 为设置菜单指示器图标的位置，如果不设置的话会默认放在右下角处
subcontrol-origin 为设置菜单指示器图标与按钮之间的停靠位置，默认为 padding
right top left bottom 为设置菜单指示器图标距离按钮四个位置的距离
当然下拉菜单指示器图标也有动态样式
QPushButton::menu-indicator:hover {
image: url(./image1.png)
}
QPushButton::menu-indicator:pressed{
image: url(./image2.png)
}
QPushButton::menu-indicator:open{
image: url(./image2.png)
}
对于 menu-indicator 来说 pressed 和 open 原理相同
Chapter3 使用Qss设置QPushButton图标和显示文本的位置
一、背景
在开发中，经常使用到按钮作为一种输入部件，然而很多时候按钮又有不同的开发设计需求，本文重点分享：如何使用Qss来设置按钮的图标和按钮文本的位置，从而实现预期的开发效果。
【效果】
二、Css样式表
（2-1）常用的QPushButton样式表模板
QPushButton{
background-color: #2786ba; /* 背景颜色 */
border-radius:5px; /* 按钮边框的圆角设置 */
/* 按钮背景图标设置 */
background-image: url(:/configIcon.png); /* 背景图片 */
background-origin: content;
background-position: center; /* 背景图片的位置 */
padding-right: 40px; /* 背景图标的padding参数 */
padding-bottom: 2px; /* 背景图标的padding参数 */
background-repeat: no-repeat; /* 设置背景图像的平铺模式 */
/* 按钮文本设置 */
text-align: top; /* 文本的位置 */
padding-left: 2px; /* 文本的padding参数 */
padding-top: 2px;
font-size: 12px;
color: #FFFFFF; /* 文本颜色 */
}
background-origin属性参考Url：https://www.runoob.com/cssref/css3-pr-background-origin.html
（2-2）图标在上/文本在下
QPushButton#pushButton
{
background-image: url(:/configIcon.png);
background-origin: content;
background-position: top;
padding-top: 0px;
background-repeat: no-repeat;
text-align: bottom;
padding-bottom:-50px;
font-size: 12px;
color: #FFFFFF;
}
（2-3）图标在下/文本在上
QPushButton#pushButton_2
{
background-image: url(:/configIcon.png);
background-origin: content;
background-position: bottom;
background-repeat: no-repeat;
text-align: top;
padding-top:5px;
font-size: 12px;
color: #FFFFFF;
}
（2-4）图标在左/文本在右
QPushButton#pushButton_3
{
background-image: url(:/configIcon.png);
background-origin: content;
background-position: left;
background-repeat: no-repeat;
text-align: right;
padding-right:5px;
font-size: 12px;
color: #FFFFFF;
}
（2-5） 图标在右/文本在左
QPushButton#pushButton_4
{
background-image: url(:/configIcon.png);
background-origin: content;
background-position: right;
background-repeat: no-repeat;
text-align: left;
padding-left:5px;
font-size: 12px;
color: #FFFFFF;
}
三、特别说明
1、在设置QPushButtom的图标和文本位置时有两个Css属性特别重要：
1、background-position ----- 设置图标的位置
2、text-align-------------设置文本的位置
2、然后使用Padding盒子模型进行位置设置了：
padding-left
padding-bottom
padding-top
padding-right
padding属性参考Url：https://www.w3school.com.cn/cssref/pr_padding.asp
注意：以上四个padding参数一定要设置合适，才能调整图标和文本的位置。
Chapter4 [Qt 教程之Widgets模块] —— QPushButton普通按钮控件
原文链接：https://blog.csdn.net/maizousidemao/article/details/127018985
QPushButton按钮，是Qt常用的控件之一，提供普通的按钮功能。
通过信号槽机制接收触发信号并执行对应动作。
一、创建QPushButton
它有三个构造函数：
// 空对象
QPushButton(QWidget *parent = nullptr);
// 指定QPushButton显示的文字
QPushButton(const QString &text, QWidget *parent = nullptr);
// 指定QPushButton背景图片和显示的文字
QPushButton(const QIcon& icon, const QString &text, QWidget *parent = nullptr);
最常用的创建方法为：QPushButton(QWidget *parent = nullptr); 并且把它的父对象指定为它所在的窗口对象。
二、信号
它通过信号来接收特定的操作，信号包括：
这些信号在QAbstractButton中定义，也就是说继承于QAbstractButton的按钮类都可以使用这些信号。
由于QPushButton使用最多的操作是点击触发某个行为，所以它常用的信号为pressed和released， 当然也可以使用其他信号实现一些特殊功能。
三、使用
最常用的点击触发某个行为：
创建一个widget空窗口项目，
首先，切换到ui设计界面，拖动添加一个Push Button按钮，
可以在右侧修改按钮对象的名称，也可以使用默认的pushButton。
然后，回到widget.cpp文件，连接信号与槽，并实现槽函数(点击按钮要实现的动作)。
其中，connect(ui->pushButton, &QPushButton::clicked, this, &Widget::btnClicked);用于连接按钮信号与其槽函数（关于connect见Qt 学习(四) —— 信号和槽）
void Widget::btnClicked()是其槽函数，按键clicked信号触发的动作实现在这个函数里。
这里点击按钮后会在QtCreator的Application OutPut窗口打印button is clicked，如下图：
以上是pushbutton按钮的使用方法，可以把信号换成pressed或released试一下。
四、按钮样式
4.1 按钮文字
通常我们通过按钮上的文字说明按钮的功能，可以使用setText()函数设置按钮文字。
ui->pushButton->setText("按钮");
如果想获取一个按钮的文字，可以使用text()函数：
QString btnText = ui->pushButton->text();
4.2 按钮大小
使用setGeometry函数可以设置按钮的大小及位置，setGeometry接收一个QRect矩形对象，用以指定按钮大小及位置，如下：
pushButton->setGeometry(QRect(140, 140, 231, 71));
其中前两个参数指定位置（x, y），后两个参数指定大小（height, width）。
另外还可以使用resize函数单独设置按钮的大小：
ui->pushButton->resize(80, 80);
4.3 其他样式
其他样式主要使用void setStyleSheet(const QString& styleSheet); 函数设置样式表。
该函数传入QString类型的参数，是遵循 qss 语法的编码字符串。
qss 语法和 css 语法基本相同。
比如基本常用的设置按钮的背景色、按钮字体、矩形按钮圆角等。
ui->pushButton->setStyleSheet("QPushButton {"
"background-color: green;" // 按钮背景色
"font: bold 20px;" // 按钮字体
"border-width: 1px;" // 按钮边框线宽
"border-radius: 16px;" // 按钮边框圆角半径
"color: white;" // 按钮文字颜色
"}");
效果如下：
合理配合大小与圆角的设置，还可以画出圆形按钮：
ui->pushButton->resize(80, 80);
ui->pushButton->setStyleSheet("QPushButton {"
"background-color: green;" // 按钮背景色
"font: bold 20px;" // 按钮字体
"border-width: 1px;" // 按钮边框线宽
"border-radius: 40px;" // 按钮边框圆角半径
"color: white;" // 按钮文字颜色
"}");
效果如下：
Chapter5 QSS 自定义QPushButton
原文链接：https://blog.csdn.net/Staranywhere/article/details/107094580
简述
本文将通过简单示例介绍QPushButton样式如何自定义。
常用属性、子控件和伪状态
QPushButton常用属性如下：
- border
- border-radius
- margin
- padding
- background
- color
- font
- border-image
其中有些属性可细分，如border-color、border-width、border-top、border-top-color、border-top-width、border-top-radius；margin-top；padding-top等等，可根据需要进行多样化定制。
属性分类，请参考QSS系列：属性类型集合
QPushButton子控件如下：
menu-indicator
子控件分类，请参考QSS系列：子控件集合
QPushButton常用伪状态如下：
- default
- hover
- checked
- pressed
- disabled
伪状态分类，请参考QSS系列：伪状态集合
QPushButton支持伪状态链，比如：
- pressed:checked
- hover:unchecked
效果图
简单定义QPushButton在Normal、Checked、Disabled、有菜单状态和有图片下的样式。
QSS
如何使用样式表，请参考QSS系列：设置样式表
* {
outline: none; /* 去掉有焦点时的虚线 */
}
QDialog {
background: #D6DBE9; /* 对话框背景色 */
}
QPushButton {
border: 1px solid #298DFF; /* QPushButton边框的宽度、样式和颜色 */
border-radius: 3px; /* 边框圆角 */
background-color: #F2F2F2; /* 背景颜色 */
color: #298DFF; /* 文本颜色 */
font-family: "Microsoft YaHei"; /* 文本字体族 */
font-size: 10pt; /* 文本字体大小 */
}
QPushButton:hover { /* 鼠标悬浮在QPushButton上时的状态 */
background-color: #298DFF;
color: #F2F2F2;
}
QPushButton:checked { /* QPushButton可选中时的状态 */
border: 1px solid #FF5242;
background-color: #F2F2F2;
color: #FF5242;
}
QPushButton:pressed { /* 鼠标按压在QPushButton上时的状态 */
background-color: #257FE6;
}
QPushButton:checked:pressed { /* QPushButton处于可选中且鼠标按压在QPushButton上时的状态 */
background-color: #F2F2F2;
}
QPushButton:disabled { /* QPushButton禁用时的状态 */
border: 1px solid #CDCDCD;
background-color: #CDCDCD;
color: #B4B4B4;
}
QPushButton#ImageButton { /* 定义图片按钮，ImageButton为对象名，在QSS中为特定对象定制样式 */
border-image: url(":/Resource/border_image"); /* 使用border-image可以自适应按钮大小 */
background-color: transparent; /* 不需要背景时可设为透明 */
}
QPushButton#ImageButton:hover {
border-image: url(":/Resource/border_image_hover");
}
QPushButton#ImageButton:pressed {
border-image: url(":/Resource/border_image");
}
QPushButton:menu-indicator { /* QPushButton带有菜单时的菜单指示器 */
subcontrol-origin：padding; /* 菜单指示器的起始点 */
subcontrol-position: center right; /* 菜单指示器的位置，处于水平靠右且垂直居中 */
image: url(:/Resource/down_arrow_normal); /* 菜单指示器的图像 */
}
QPushButton:menu-indicator:hover, QPushButton:menu-indicator:open { /* 鼠标悬浮在菜单指示器上和菜单指示器启用时的状态 */
position: relative;
top: 2px;
left: 2px;
image: url(:/Resource/down_arrow_hover);
}
QMenu { /* 简单定义菜单样式 */
border: 1px solid gray;
border-radius: 3px;
background-color: #F2F2F2;
}
QMenu::item { /* 菜单项的样式 */
padding: 0px 0px 0px 40px;
border: 0px solid transparent;
background-color: transparent;
color: #298DFF;
min-width: 108px; /* 菜单项最小宽度，108+40+1*2=150，使得菜单宽度和QPushButton宽度保持一致 */
min-height: 30px; /* 菜单项的最小高度 */
}
QMenu::item:selected { /* 菜单项处于选中时的状态 */
background-color: #298DFF;
color: #F2F2F2;
}
源码
main.cpp
#include "MainWindow.h"
#include <QtWidgets/QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
//全局加载样式表
QFile styleFile(":/Resource/DefaultTheme");
if (styleFile.open(QIODevice::ReadOnly))
{
QString string = styleFile.readAll();
qApp->setStyleSheet(string);
}
MainWindow w;
w.show();
return a.exec();
}
5436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
