Qt之QSS的使用及常用控件的样式设置

什么是QSS

Qt Style Sheet简称QSS，Qt的样式表，模仿CSS，为Qt界面设置炫酷的展示效果。

如何使用QSS

推荐使用第二种方式

方式一：在界面中设置

不推荐使用

  1. 在编辑器中找到要设置样式的.ui文件，双击该文件，在界面编辑器中显示该文件

  2. 在界面编辑器的右侧，右键单击，在弹出的右键菜单中选择“改变样式表”字样

  3. 在弹出的“编辑样式表”框中输入正确的样式表代码

  4. 点击“应用”（或“use”）按钮，可以直接在编辑器界面中看到样式表对作用控件的样式改变

  5. 点击“确定”（或“Ok”）按钮，样式表设置完毕
    操作流程图如下：

方式二：调用setStyleSheet函数设置

推荐使用

  1. 将QSS代码保存成.qss文件

  2. 在需要的类中使用QFile类，readAll读取.qss文件中的样式信息

  3. 将读取到的样式信息通过setStyleSheet设置到界面程序中
    直接上例子，下面以为TestWidget类采用setStyleSheet函数设置样式表为例：

TestWidget::TestWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TestWidget)
{
    ui->setupUi(this);
    QFile file(":/qss/TestWidget.qss");//样式信息存储在了TestWidget.qss文件中
    file.open(QFile::ReadOnly);
    QString stylesheet = file.readAll();//读取qss样式文件中的所有数据
    file.close();
    this->setStyleSheet(stylesheet);//为当前界面类设置样式表
}

下面针对项目中经常用到的控件，总结一下其QSS样式表的使用。

QPushButton/QToolButton

QPushButton与QToolButton的样式设置相同，现以QToolButton为例

QToolButton{#按钮正常显示的样式
margin-right:6px;//与右侧的距离
border-image:url(此处填写按钮的图片路径);
border-radius:4px;//设置按钮的圆角
background-color:transparent;//背景色继承父控件的颜色
font-family:"微软雅黑";//按钮字体的字体族
font-size:16px;//按钮字体大小
font-weight:600;字体的粗细
color:red;//字体颜色
width:100px;//宽度
height:25px;//高度
#min-width:100px;//最小宽度
#min-height:25px;//最小高度
#max-width:200px;//最大宽度
#max-height:35px;//最大高度
}
QToolButton:hover{
#设置按钮在鼠标悬停时的样式
}
QToolButton:pressed{
#设置按钮被鼠标按下时的样式
}
QToolButton:disabled{
#设置按钮不可用时的样式
}

QSlider

垂直滚动条

QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}

QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}

QSlider::add-page:vertical {#滚动条采用渐变色
background:qlineargradient(spread:pad, x1:0,y1:0, x2:1,y2:1,
stop:0 rgb(0,255,0),
stop:0.7 rgb(100,100,255),
stop:1 rgb(0,0,255));
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}

QSlider::handle:vertical #滑块的样式
{
background: qradialgradient(spread:pad, cx:0.5, cy:0.5,
 radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED,
stop:0.778409 rgba(255, 255, 255, 255));

    height: 11px;
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

样式展示如下：

水平滚动条

水平滚动条与垂直滚动条样式设置类似，将vertical改为horizontal，其余可以照抄，此处将主体的样式设置放在此处

QSlider#horizontalSlider::groove:horizontal{
height:8px;
left:2px;
right:2px;
margin:0px;
background:#808080;
}
QSlider#horizontalSlider::handle:horizontal{
width:8px;
height:8px;
margin:-2 0px;
background:#66d2ff;
border:1px solid #ddd;
border-radius:4px;
}
QSlider#horizontalSlider::sub-page:horizontal{#水平方向上的进度条仍选用渐变色，也可以background:颜色值;设置固定颜色
background:qlineargradient(spread:pad, x1:0,y1:1, x2:1,y2:1,
stop:0 rgba(231,80,229,255),
stop:1 rgba(7,208,255,255))
}

滚动条的样式图如下：

QRadioButton

QRadioButton{#设置QRadioButton的通用属性
color:#c1c4d0;
font:14px;
font-family:"微软雅黑";
}
QRadioButton::indicator::unchecked{
border-image:url(此处填写图片路径);#设置按钮的图片
/*其他未选中时的正常状态的样式*/
}
QRadioButton::indicator::unchecked:hover{
/*未选中时的鼠标悬停状态*/
}
QRadioButton::indicator::unchecked:pressed{
/*未选中时的鼠标按下状态*/
}
QRadioButton::indicator::checked{
/*按钮选中时的正常状态*/
}
QRadioButton::indicator::checked:hover{
/*按钮选中时的鼠标悬停状态*/
}
QRadioButton::indicator::checked:pressed{
/*按钮选中时的鼠标按下状态*/
}
QRadioButton::indicator::disabled{
/*按钮禁用时的状态*/
}

QCheckBox

QCheckBox{/*设置QCheckBox的通用属性*/
color:#c1c4d0;
font:14px;
font-family:"微软雅黑";
}

QCheckBox::indicator::unchecked{
border-image:url(此处填写图片路径);
/*其他未选中时的正常状态*/
}
QCheckBox::indicator::unchecked:hover{
/*未选中时的鼠标悬停状态*/
}
QCheckBox::indicator::unchecked:pressed{
/*未选中时的鼠标按下状态*/
}
QCheckBox::indicator::checked{
/*按钮选中时的正常状态*/
}
QCheckBox::indicator::checked:hover{
/*按钮选中时的鼠标悬停状态*/
}
QCheckBox::indicator::checked:pressed{
/*按钮选中时的鼠标按下状态*/
}
QCheckBox::indicator::disabled{
/*按钮禁用时的状态*/
}

QTabWidget

QTabWidget::pane{
border:none;
background-color:#2b2d33;
border-bottom:1px solid #eee;
}
QTabWidget::tab-bar{
alignment:left;
background-color:#2b2d33;
}
QTabBar::tab{
background:transparent;
color:#c1c4d0;
font:14px;
min-width:80px;
min-height:25px;
font-family:"微软雅黑";
border:1px solid #ddd;
}
QTabBar::tab:hover{
background:rgb(255, 255, 255, 100);
}
QTabBar::tab:selected{
border-color:#eee;
border-bottom:2px solid #1a9eff;
color:#1a9eff;
}

样式表的样式如下：

QComboBox

QComboBox{
min-width:80px;
min-height:25px;
font-family:"微软雅黑";
font:14px;
color:#c1c4d0;
}

QComboBox::down-arrow /*组合框右侧的下三角按钮*/
{
border-image:url(图片路径);
}

QComboBox {
border:1px solid #5d6369;/* 边框宽度,线条样式,颜色 */
font-family:"微软雅黑";
font:14px;
color:#c1c4d0;
min-width:150px;
max-width:150px;
min-height:25px;
border-radius:8px;/* 倒角 */
padding:1px 18px 1px 3px; /* 内边框 */
}

QComboBox:editable {
background:green;
}

QComboBox:!editable,QComboBox::drop-down:editable {
background:#444;
}

/* 当下拉框打开时,背景颜色 */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background:#666;
}

/* 当下拉框打开时, 移动显示框文本位置*/
QComboBox:on {
padding-top: 3px;
padding-left: 4px;
}

/* 下拉按钮 */
QComboBox::drop-down {
subcontrol-origin: padding;
/* 按钮位置,右上角 */
subcontrol-position: top right;
/* 按钮宽度 */
width: 25px;
/* 与右侧倒三角之间的分割线 */
border-left-width: 3px;
border-left-color: #555;
border-left-style: solid;
/* 倒角 */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
/* 右侧倒三角下拉按钮图片 */
QComboBox::down-arrow {
border-image: url(图片路径);
}
QComboBox::down-arrow:hover{
border-image: url(图片路径);
}
QComboBox::down-arrow:pressed {
border-image: url(图片路径);
}
/* 下拉按钮位移 */
QComboBox::down-arrow:on {
top: 1px;
left: 1px;
}
/* 下拉列表里的颜色 */
QComboBox QAbstractItemView {
background:#aaa;
color:#333;
padding-left:15px;
font-family:"微软雅黑";
font:14px;
border: 1px dotted darkgray;
selection-background-color:green;
}

根据自己需要改变样式的效果，本次代码实现的样式效果如下图：

赞 (0)

相关推荐