qss基础

很高兴和大家见面，给生活加点impetus！！开启今天的编程之路！！

作者：٩( ‘ω’ )و260
我的专栏：qt，Linux，C++进阶，C++初阶，数据结构初阶，题海探骊，c语言
欢迎点赞，关注！！

qss基础

伪类选择器

当控件处于某种状态时，就会触发对应的样式表。

同时，这些状态前面也可以加上取反(!)，这样就可以达到表中相反属性的作用了。
我们来实现一个代码，默认状态字体颜色是红色，鼠标放上去就变成绿色了，点击之后变成蓝色：

我们直接使用ui方式执行qss代码，来看结果：

其实还有一个方法也能够实现同样的代码，伪类选择器的底层可以看做是事件，所以，我们同样也可以使用事件完成上述操作。
我们需要重写的函数为：enterEvent（鼠标进入事件），leaveEvent（鼠标离开事件），mousePressEvent（鼠标按下事件），mouseReleaseEvent（鼠标释放事件），重写对应事件时，通过setstylesheet的方式使用qss代码就能够完成对字体颜色的修改。需要建立子类mybutton来继承QPUshButton。这里不在演示，前面的文章已经给出过示例了。

虽然事件和伪类选择器都能够完成控件样式的修改，虽然事件麻烦，但是涉及的方面更广。

盒子模型

qss中涉及的样式很广，在qt助手中我们能够看到有box model。
盒子模型主要有四部分组成，外边距，内边距，边框，内容。

外边距理解为以该控件为单位，其他控件与该控件的距离。
内边距理解为该控件中的子控件（内容）与边框的距离。
内容就是该控件的子控件。

看一下这四个部分的属性：

复合属性是什么呢？
比如margin，其实是margin-left,margin-right,margin-top和margin-bottom的集合。所以书写复合属性的代码同样也是有一定规则的。
比如：（下方px表示像素单位）
margin x px：表示控件上下左右四个方向的外边距都是x像素。
margin x y px：表示控件上下方向边距是x像素，左右方向边距是y像素。
margin a b c d px：表示上右下左（顺时针）

来看代码，我们给一个button对象设置边距和边框：

我们再来把外边距代码给删除掉，对比着来看效果：

很明显我们能够发现，给按钮添加了外边距之后感觉按钮变小了，实际上，按钮并没有变小，可以获取到该QRect并使用qDebug()打印，会发现是我们设置的Geometry。

给控件设置样式

按钮

我们使用伪类选择器，类选择器来设置按钮的边框，边距，圆角矩形等，直接来看代码：

我们使用rgb格式表示颜色，可以在上方直接通过添加颜色的形式选中适合的颜色，随即生成对应的rgb格式代码。
当该按钮被按下时，此时背景颜色发生更改，来看结果：

属性总结：

复选框

实现checkBox默认形态，鼠标放入，鼠标点击，鼠标释放，鼠标移开这几个事件通过qrc机制完成修改：
来看代码：

通过qrc机制将图片加载进来之后，一定要保存下来，随后想使用qrc管理的文件时，直接点击添加资源，qt designer直接会生成对应的url文件。
来看效果：

只能说设计的还是有点糙，因为released，leaveEvent的qss代码还没有实现。

这里使用到了子控件的方式，只修改子控件的image。

属性总结：

同样的，单选框也是和复选框类似的效果。

列表

这里我们需要学习渐变色的使用方法。
渐变色首先需要使用qlineargradient的方式，其中含有6个参数，前两个参数表示渐变色的起始位置，中间两个参数表示渐变色的终止位置，最后两个参数表示渐变色的起始颜色与终止颜色，需要使用stop 0和stop 1来为首引出。
该方式前四个参数只能为0或1，分别表示控件的四个角落.

使用渐变色的示例代码：

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9);

设置ListWidget控件样式，来看代码：

我们直接来看结果，其实通过背景色就能够看出来渐变色了：

属性总结：

登录界面

我们来优化一个登录界面。
首先需要两个lineEdit，一个checkBox（是否选择记住密码），再来一个按钮（登录），为了使我们布局好看，我们设置一个布局管理器，将其中的这几个控件全部给包裹起来，来看效果：

发现上面两个lineEdit也太矮了吧，但是我们给lineEdit加入了布局管理器，Geometry已经无法修改了，此时我们只能修改最小高度和最大高度。

这样就好看很多了。
接下来我们给登录界面设置背景图片。

我们先来给出结论，在qt中，直接给顶层窗口设置背景图片在qt中是不被允许的，所以我们无法直接给QWidget设置背景图片，但是也是有办法的。

我们需要创建一个QFrame控件，把该控件大小调整为QWidget大小相同，我们给QFrame添加背景图片即可。

同时，添加背景图片的qss属性有两种，background-image或者border-image，这里倾向于后者，因为背景图片能够随着界面大小的变化而变化。
来看代码：

这里有一个细节，一定要保证QFrame是布局管理器的父类，否则会导致图片会遮盖布局管理器。

随后我们再来设置lineEdit的边框，字体等。
直接看代码：

transparent表示该控件和父元素保持相同的属性，即父元素属性值是啥，子元素属性值也是啥。来看结果：

这样就完成了。

qss总结

qss是什么，qss基本语法，伪类选择器，盒子模型，选择器的使用，子类控件选择器以及对应的代码示例细节

结语

感谢大家阅读我的文章，不足之处欢迎留言指正，感谢大家支持！