Qt常用QSS集合

Qt拿来画控件还是很方便的，其中除了重写paint() 函数外，最常用的就是控件的样式表qss了。本文简单介绍下QSS，同时记录下各种QSS日常骚操作。

QSS介绍

QSS简介

QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

QSS的语法规则

基本和CSS相同，只是有的属性QSS中没有，相当于CSS的子集。

QSS的选择器类型

选择器 栗子 说明
通配选择器 * 匹配所有的控件
类型选择器 QPushButton 匹配所有QPushButton和其子类的实例
属性选择器 QPushButton[flat="false"] 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
类选择器 .QPushButton 匹配所有QPushButton的实例，但是并不匹配其子类
ID选择器 #myButton 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值
包含选择器 QDialog QPushButton 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
子选择器 QDialog > QPushButton 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

另外上面所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，同CSS一样。

QSS子控件

QSS为很多复杂的复合控件提供了子控件的定义，以方便对这些复合控件的各个部分进行样式设置，具体使用下面说明。

QSS伪状态

QSS的伪状态选择器实际上与CSS中的类似，是以冒号开头的一个选择表达式，他限制了当控件在某一种状态下的时候才能应用QSS规则，伪状态只能描述一个控件的状态，或者是一个复合控件中的子控件的状态。下面列出常用的伪状态：

状态 说明
:active 当小部件驻留在活动窗口中时，将设置此状态
:checked 该控件被选中时候的状态
:hover 鼠标在控件上方
:pressed 该控件被按下时的状态
:disabled 该控件禁用时的状态
:first 该控件是第一个（列表中）
:focus 该控件有输入焦点时
:has-children 该控件有孩子。例如，QTreeView中包含子项目的控件
:open 该控件处于打开状态。例如，QTreeView中的扩展项，或打开菜单的QComboBox或QPushButton
:unchecked 该控件未被选中

QSS代码片段

单个控件

QPushButton{        /*按钮上图标下文字*/
    text-align:bottom ;
    image-position:top;
    color: #666666;
    border:none;
    image: url(:xxxxx.png);
}

QPushButton{         /*按钮自适应拉伸背景*/
border-width: 2px 15px 2px 15px;
border-image: url(:/resource/icon/button_nomal.png) 2 15 2 15 repeat stretch;
color:#3288E8;
}

QPushButton{        /*按钮选中带下划线*/
border:none;
border-width:5;
border-bottom-style:solid;
border-color:transparent;
color:#666666;
}
QPushButton:checked{
color:#3288E8;
border-color: #3288E8;
}

QPushButton{      /*按钮左文字右图标*/
    background-image:url(:/resource/btn.png);
    background-repeat:norepeat;
    background-position:right;
    text-align:right;
    border:none;
    color:white;    
    padding-right:35px;
}

QPushButton {  //按钮渐变背景
    font-size:12px;
    border-radius:2px;
    color:rgba(51,51,51,1);
    background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgba(242,242,242,1), stop:1 rgba(255,255,255,1));
    border:1px solid rgba(221,221,221,1);
}

QWidget#line{ //在Widget某一边画分割线
    background-color:white;
    border-left:none;
    border-top:none;
    border-right:none;
    border-bottom:1px solid rgba(216,216,216,1);
}

含子控件

/**************************************CheckBox*********************************************/
QCheckBox::indicator:unchecked{
image: url(:/resource/chebox_off.png)
}

QCheckBox::indicator:checked{
image: url(:/resourcechebox_on.png)
}
/**************************************CheckBox*********************************************/


/**************************************QTabBar*********************************************/
QTabBar::tab {
    color: #666666; 
    height:40px; 
    width:100px;
} 
QTabBar::tab:selected {
    color: #333333; 
    font-weight:bold
}
 QTabBar::tab:hover {
    color: #666666;
}
/**************************************QTabBar*********************************************/


/**************************************滑动条*********************************************/
QSlider {
    background: rgb(170, 170, 170);
    padding: 2px;
    height: 40px;
}
QSlider::groove:horizontal {
    subcontrol-origin: content;
    background: rgb(76, 76, 76);
    
    /* the groove expands to the size of the slider by default. 
    by giving it a height, it has a fixed size */
    height: 20px;
}
QSlider::handle:horizontal {
    background-color: rgb(50, 50, 50);
    width: 40px;
    border-radius: 20px;
    
    /* handle is placed by default on the contents rect of the groove. 
    Expand outside the groove */
    margin: -10px 0;
}
QSlider::sub-page:horizontal {
    background: #999;
    margin: 5px;
    border-radius: 5px;
}
QSlider::add-page:horizontal {
    background: #666;
    margin: 5px;
    border-radius: 5px;
}
/**************************************滑动条*********************************************/


/**************************************下拉框*********************************************/
QComboBox{
border:0px; 
background-color:transparent;
color:#333333; 
}
QComboBox::down-arrow{
image:none;
}
QComboBox::drop-down{
width:0px; 
border:0px;
}
QComboBox QAbstractItemView {
color:#333333;
border: 1px solid #DDDDDD;
background-color:white;
selection-color:white;
selection-background-color: rgb(0, 102, 96);
}
/**************************************下拉框*********************************************/


/**************************************滚动条*********************************************/
QScrollBar:horizontal {
    height: 16px;
    border-width: 0px 10px 0px 10px;
    border-image: url(:/img/horizontal-track.png) 0 10 0 10 repeat stretch;
    margin-left: 6px;
    margin-right: 16px;
    padding-right: 4px;
}
QScrollBar::handle:horizontal {
    min-width: 40px;
    border-width: 0 17px 0 17px;
    border-image: url(:/img/horizontal-handle.png) 0 17 0 17 repeat repeat;
}
QScrollBar::sub-line:horizontal {
    width: 20px;
    height: 17px;
    subcontrol-position: left;
    subcontrol-origin: margin;
    background-image: url(:/img/horizontal-sub-line.png)
}
QScrollBar::add-line:horizontal {
    width: 20px;
    height: 17px;
    subcontrol-position: right;
    subcontrol-origin: border;
    background-image: url(:/img/horizontal-add-line.png)
}
QScrollBar:vertical {
    width: 16px;
    border-width: 10px 0px 10px 0px;
    border-image: url(:/img/vertical-track.png) 10 0 10 0 repeat repeat;
    margin-top: 6px;
    margin-bottom: 16px;
    padding-bottom: 6px;
}
QScrollBar::handle:vertical {
    min-height: 40px;
    border-width: 17px 0px 17px 0px;
    border-image: url(:/img/vertical-handle.png) 17 0 17 0 repeat repeat;
}
QScrollBar::sub-line:vertical {
    width: 17px;
    height: 22px;
    subcontrol-position: top left;
    subcontrol-origin: margin;
    background-image: url(:/img/vertical-sub-line.png)
}
QScrollBar::add-line:vertical {
    width: 17px;
    height: 22px;
    subcontrol-position: bottom;
    subcontrol-origin: border;
    background-image: url(:/img/vertical-add-line.png)
}
/**************************************滚动条*********************************************/

/**************************************滑块*********************************************/
QSlider {
    height: 20px;
}

QSlider::groove:horizontal {
    subcontrol-origin: content;
    background: transparent;
    height: 20px;
}

QSlider::handle:horizontal {
    background-color: rgb(50, 50, 50);
    width: 20px;
    border-radius: 10px;
}

QSlider::sub-page:horizontal {
    background: #0078FF;
    margin: 7px;
    border-radius: 3px;
}

QSlider::add-page:horizontal {
    background: #999999;
    margin: 7px;
    border-radius: 3px;
}
/**************************************滑块*********************************************/

持续更新ing...

参考资料

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,681评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,710评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,623评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,202评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,232评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,368评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,795评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,461评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,647评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,226评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,785评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2赞 341

推荐阅读更多精彩内容

  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0赞 0
  • Qt学习之样式表
    QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观。 其思想来源于网页...
    勿丶忘初心阅读 7,470评论 0赞 6
  • 闲坐黄昏
    坐在黄昏里，什么也不做，就这么闲闲地坐着，就这么闲闲地想着。透过咖啡屋明亮的落地窗，看着太阳慢慢落下去，看...
    冰夫阅读 446评论 0赞 0