QT样式表从入门到精通
文章目录
前言
在学习QT样式表之前,如果你对CSS有一定的基础那么相信你会很快掌握QT的QSS因为他们几乎语法格式一模一样,学习起来也会如鱼得水,效率大大提高。对于刚接触样式表的这部分小伙伴来说学习这块也不是很难,只要按照本文教程一步一步学习,相信你也会很快学会QT样式表为自己的程序换上一个漂亮的界面。
以下是本篇文章正文内容,主要分为三部分:初级学习,中级学习,高级学习。学习三部曲将采用图文并茂教大家如何使用QT样式表。
1、背景介绍
QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容为QT界面应用程序提供了一个独立的界面美化设置,但QSS的功能要比Css弱得多,体现在选择器少,可以使用的QSS属性也少,而且并不是所有的属性都可以应用在Qt的控件上,QSS使页面美化跟代码层分开,利于维护。
2、初级学习
2.1、"盒子"模型
在所有可视化控件中,几乎都是基于盒子模型衍生出来的。就比如盒子是父类,Qpushbutton是子类一 样,也可以看作是Qobjiect与Qwidget之间的关系。它包括:(margin)边距,(border)边框,(padding)填充,和(content)实际内容。盒子模型允许我们在其它”盒子“和周围元素边框之间的空间放置“盒子”。
说明:
margin:不可见,最外层,也就是外边距
border:介于Margin和padding之间,也就是我们常说的边框
padding:存在边框与文本(content之间),也就是文本和边框之间的距离
content:实际显示文本,图像等主要内容的地方
2.2、语法说明
说明:
可以看出QSS语法和CSS语法几乎一模一样,由两部分组成:
- 类名
- 声明
接下来看个时示例,直接上图:
QPushButton {
margin: 0px;//不可见
border: 3px solid #ff0000;
padding:0px;//不可见
color: rgb(23, 0, 255);
}
程序由两部分组成:
- 类名:QPushButton
- 声明: {
margin: 0px;//不可见
border: 3px solid #ff0000;
padding:0px;//不可见
color: rgb(23, 0, 255);
}
border宽度为3px,颜色:#FF0000为红色,content文本颜色为rgb(23, 0, 255),这里颜色格式也可以使用#2300FF等价于rgb(23, 0, 255)。margin和padding不可见,但可以设置其宽度查看QPushButton的变化。