Qt界面美化之Qt Style Sheets

Qt style sheet 简称QSS

style sheet可以在代码中单独对某个控件使用，例如：

labelLEDLIN = new QLabel("",this);
labelLEDLIN->setFixedSize(36,36);
labelLEDLIN->setStyleSheet("background-color:red;border-radius:18px;color:white;font:12pt;border: 3px solid #87B2D5;");
// 设置label的样式：背景色红色  边框圆角半径为长宽的一半  字体颜色   字体大小 边框宽度和颜色
// 这样就把label控件设置成了红色的圆形，可以做LED指示灯。

 style sheet 也可以直接作用在窗口，按类型来美化，如下：

//main.cpp

#include "mywidget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyWidget w;
    const QString qssStyle ="\
                        QPushButton {\
                            border: 2px solid rgba(88, 166,220 , 90%);\
                            border-radius: 5px;\
                            background-color:qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #9BC7FD, stop: 0.4 #3390D1 ,stop: 1.0 #9BC7FD);\
                        }\
                        QPushButton:pressed {\
                            border-style: inset;\
                            }\
                        QComboBox {\
                            border: 2px solid #87B2D5;\
                            border-radius: 5px;\
                            background-color: rgba(228, 248, 255, 70%);\
                        }\
                        QTextBrowser{\
                            border: 2px solid #87B2D5;\
                            border-radius: 5px;\
                            background-color: rgba(255, 255, 255, 70%);\
                        }\
                        QLineEdit {\
                            border: 2px solid #72B3F3;\
                            border-radius: 5px;\
                            background-color: rgba(255, 255, 255, 70%);\
                        }\
                        QGroupBox {\
                            border-color: #FFFFFF;\
                            border-width: 1px;\
                            border-style: solid;\
                            margin-top: 2ex;\
                        }\
                        QGroupBox::title {\
                            subcontrol-origin: margin;\
                            subcontrol-position: top left;\
                            left: 10px;\
                            margin-left: 2px;\
                            padding: 0px;\
                        }";
    w.setStyleSheet(qssStyle);
    w.show();
    return a.exec();
}


//把样式都设置在qssStyle 这个字符串里，示例是按控件类型，也可以单独指定某个控件。
//然后在窗口显示之前给窗口设置style sheet 就可以了，w.setStyleSheet(qssStyle);

 基本语法

基本语法规则
width:12px; //设置宽度 单位像素
height:40px //设置高度
min-width:65px; //最小宽度 有些时候设置width无效可以尝试设置min-width
min-height:12px; //最小高度
max-width:12px;
max-height:12px;
/设置背景颜色 四种颜色表示方式/
background-color:rgb(255,255,255);
background-color:rgbs(255,255,255,30); //最后一个参数是透明度 0~255
background-color:yellow //常用颜色名（17种标准色与130种其他颜色） 更多见附录
background-color:#FF0000

colo:rgb(255,255,255); //前景色 文本颜色
color: #F5F5F5; //前景(文本)颜色
color: qlineargradient(); //前景(文本)颜色:线性渐变
color: qradialgradient(); //前景(文本)颜色:辐射渐变
color: qconicalgradient(); //前景(文本)颜色:梯形渐变

font-size:20px //字体大小
font-family:黑体 //字体选择 更多字体见附录

margin: 14px 18px 20px 18px; //外边距 顺序上右下左
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;

padding: 4px; //内边距 顺序上右下左 只写一个参数代表相等
padding-left: 5px; /* 文字左边距 /
padding-right: 10px; / 文字右边距 /
padding-top: 3px; / 文字顶边距 /
padding-bottom: 3px; / 文字底边距 */

border:3px solid red //边框—可以分开设置 solid 实线 dotted 点状边框 none无边框 dashed 虚线
border—四条边相同样式
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-width 上 右 下 左 ----- 边框宽度 //3px 边框像素—宽度-单位：像素，也可以em,1em=16px
border-top-width
border-right-width
border-bottom-width
border-left-width

border: 1px solid #FDBC03; /* 边框:宽度 颜色*/
border-image:url(boder.png) 4 8 12 16; /* 边界图 切线 /
border-radius: 4px; /边框圆角半径 /
border-top-left-radius: ; / 角弧度:左上角/
border-top-right-radius: ; / 角弧度:右上角*/
border-bottom-left-radius: ; /* 角弧度:左下角*/
border-bottom-right-radius: ; /* 角弧度:右下角*/

double 双线 groove 定义3D凹槽边框。其效果取决于border-color的值
ridge 定义3D垄状边框。其效果取决于 border-color的值
inset 定义3D inset边框。其效果取决于 border-color的值
outset 定义3D outset边框。其效果取决于 border-color的值

border-color: //边框颜色 上 右 下 左
border-top-color
border-right-color
border-bottom-color
border-left-color

/伪状态列表/
:checked //button部件被选中
:unchecked //button部件未被选中
:disabled //部件被禁用
:enabled //部件被启用
:focus //部件获得焦点
:hover //鼠标位于部件上
:indeterminate //checkbox或radiobutton被部分选中
:off //部件可以切换，且处于off状态
:on //部件可以切换，且处于on状态
:pressed //部件被鼠标按下

/子部件列表/
::down-arrow //combo box或spin box的下拉箭头
::down-button //spin box的向下按钮
::drop-down //combo box的下拉箭头
::indicator //checkbox、radio button或可选择group box的指示器
::item //menu、menu bar或status bar的子项目
::menu-indicator //push button的菜单指示器
::title //group box的标题
::up-arrow //spin box的向上箭头
::up-button //spin box的向上按钮