QT样式表从入门到精通

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的变化。

2.3、基础控件

2.4、控件状态表

2.5、选择器

3、中级学习

3.1、坐标讲解

3.1.1、相对坐标

3.1.2、绝对坐标

3.2、背景设置

3.3、边框设置

3.4、圆角设置

3.5、渐变设置

3.6、字体设置

3.7、文本样式设置

3.8、图片设置

3.9、动画设置

3.10、状态设置

4、高级学习

4.1、嵌套

4.2、分组

4.3、实战

4.4、总结

持续更新中。。。。。。。。。。。。。。。。。。。。。。！