文档章节

qt 样式表基本用法

o
 osc_1ee7cxmx
发布于 2018/08/06 18:12
字数 939
阅读 15
收藏 0

精选30+云产品,助力企业轻松上云!>>>

Qt样式表

QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界。

可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用QWidget::setStyleSheet()设置到某一个部件以及子部件上。如果在不同的级别都设置了样式表,QT会使用所有有效的样式表,称为样式表的层叠。

this->setStyleSheet("QpushButton{background:yellow}QSlider{background:blue}");

QPushButton{
    border-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(0, 0, 0, 255), stop:0.19397 rgba(0, 0, 0, 255), stop:0.202312 rgba(122, 97, 0, 255), stop:0.495514 rgba(76, 58, 0, 255), stop:0.504819 rgba(255, 255, 255, 255), stop:0.79 rgba(255, 255, 255, 255), stop:1 rgba(255, 158, 158, 255)); background-color: rgb(65, 48, 255); }

样式表语法

样式规则

QPushButton{color:red}

QPushButton是选择符,{color:red}是声明,color是属性,red是值

选择符
选择符 示例 说明
通用选择符 * 匹配所有部件
类型选择符 QPushButton 匹配所有QPushButton实例和它的所有子类
属性选择符 QPushButton[flat = "false"] 匹配QPushButton的属性flat为false实例
类选择符 .QPushButton 匹配所有QPushButton实例但不包含它的子类
ID选择符 QPushButton#okButton 匹配所有QPushButton中以okButton为对象名的实例
后代选择符 QDialog QPushButton 匹配所有QPushButton实例,必须是QDialog的子孙部件
孩子选择符 QDialog>QPushButton 匹配所有QPushButton实例,必须是QDialog的直接子部件

子控件

QComboBox的下拉按钮子控件

QSpinBox的向上向下箭头子控件

选择符可以包含子控件对部件的特定子控件应用规则

QComboBox::drop-down{image:url(dropdown.jpg)}此规则改变所有QComboBox部件的下拉按钮样式

伪状态

QCheckBox:hover:checked{color:red} 当鼠标悬停在一个被选中的QCheckBox上时才应用规则。

冲突解决

特殊的优先

层叠

样式表可以设置在QApplication或者父部件上。部件有效的样式表通过部件祖先的样式表和QApplication上的样式表合并得到,当发生冲突时,部件自己的样式表优先于任何继承的样式表,父部件优先于祖先的样式表。

自定义部件外观与换肤

盒子模型

img

内容(content)、填衬(padding)、边框(border)、边距(margin)

使用background-image来指定背景图片,如果希望背景图片随着部件的大小变化,就必须使用border-image。

image属性可以用来在border-image之上绘制一个图片、图片对齐参考image-position属性。

自定义部件外观

/****************主界面背景*******************/
QMainWindow{
        background-image: url(:/image/beijing01.png);/*背景图片*/ } /****************按钮部件*******************/ QPushButton{ background-color: rgba(100, 225, 100, 30);/*背景色*/ border-style: outset; /*边框样式*/ border-width: 4px; /*边框宽度为4像素*/ border-radius: 10px; /*边框圆角半径*/ border-color: rgba(255, 225, 255, 30);/*边框颜色*/ font: bold 14px;/*字体*/ color:rgba(0, 0, 0, 100);/*字体颜色*/ padding: 6px; /*填衬*/ } QPushButton:hover{ /*鼠标悬停在按钮上时*/ background-color:rgba(100,255,100, 100); border-color: rgba(255, 225, 255, 200); color:rgba(0, 0, 0, 200); } QPushButton:pressed { /*按钮被按下时*/ background-color:rgba(100,255,100, 200); border-color: rgba(255, 225, 255, 30); border-style: inset; color:rgba(0, 0, 0, 100); } /****************滑块部件*******************/ QSlider::handle:horizontal { /*水平滑块的手柄*/ image: url(:/image/sliderHandle.png); } QSlider::sub-page:horizontal { /*水平滑块手柄以前的部分*/ border-image: url(:/image/slider.png);/*边框图片*/ }

实现换肤功能

Qt样式表可以存放在一个以.qss为后缀的文件中,可以在程序中调用不同的.qss文件实现换皮肤功能。

    QFile file(":/qss/my.qss");
    // 只读方式打开该文件 file.open(QFile::ReadOnly); // 读取文件全部内容,使用tr()函数将其转换为QString类型 QString styleSheet = tr(file.readAll()); // 为QApplication设置样式表 qApp->setStyleSheet(styleSheet); 

特殊效果窗体

不规则窗体和透明窗体

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

从GitHub删除分支的仓库 - Delete forked repo from GitHub

问题: I'm starting with git and GitHub and there's a project I'm watching on GitHub. 我先从git和GitHub开始,然后在GitHub上观看一个项目。 I unintentionally clicked to fork it. ......

javail
44分钟前
8
0
南极科考——气象专属福利

第一篇文章 与南极有关 在南极 中国第 36 次南极考察,我在雪龙 2 号上全程随船保障,历时半年环绕南极一圈,因此有了上面的那段视频。 学气象出身,但从来没想过会因此去往南极,这次应该就...

curiousmet
06/22
0
0
​Jenkins 基础设施:统计、更新、AWS 赞助

聊聊 Jenkins 统计、更新、AWS和赞助的那些事儿,认识不一样的 Jenkins Jenkins 项目在很大程度上依赖于其基础架构。我们使用诸如 www.jenkins.io 和 plugins.jenkins.io 之类的网站,诸如 ...

Jenkins中文社区
今天
11
0
场景创新,标准共建—联盟智能家居工作组首次研讨会成功召开

2020年7月9日,软件绿色联盟泛终端行业应用组智能家居工作组首次研讨会议成功举办。来自泰尔、腾讯、阿里、360、京东、移动、电信、美的、海尔、松下、长虹、TCL、海雀、国创、海思等企业30多...

软件绿色联盟
前天
13
0
从“人肉扩缩容”到云原生容量,90 后程序员的进化

很难想象,1992年出生的郑洋飞已经是云原生性能容量团队 Leader、2018年双十一稳定性总负责人,2020年双11的副队长。连续6年双十一,不仅是他带领团队的练兵场,更能从中看到蚂蚁集团技术演进...

SOFAStack
前天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部