当前位置：首页 > news >正文

Qt界面美化之Qt Style Sheets

news 来源：原创 2024/5/20 13:57:25

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:#FF0000colo: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-styleborder-width 上 右 下 左 ----- 边框宽度 //3px 边框像素—宽度-单位：像素，也可以em,1em=16px
border-top-width
border-right-width
border-bottom-width
border-left-widthborder: 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的向上按钮