1.初始QSS这里开始我们来介绍界面优化也就是让我们做好的图形化界面更好看一些。一个程序的界面是否好看是否重要呢有些面向专业领域的程序界面是否好看与否不是很关键更关键的是实际的效果。有些面向普通用户领域的程序界面好看还是很大的加分项。Qt中对界面优化最主要的就是使用QSS这样的特性了它参考了网页前端的CSS能够针对界面的“样式”来进行设置。CSS的功能是非常强大的非常丰富的QSS要逊色一些也能完成很多的工作。有时候可以通过QSS设置样式(设置字体属性)也可以通过C代码设置样式如果两者冲突QSS优先级更高。QSS基本的语法是这样的选择器可以认为先选择某个/某一类控件接下来进行的各种属性设置都是针对选中的控件生效的。大括号里面有很多键值对就可以针对某些样式具体的设置了这里的键值对可以有一个或多个。2.QSS基础使用下面通过代码演示一下我们ui中设置一个按钮然后运行看看效果接下来通过QSS设置样式还可以通过rgb表示这里是在pushbutton里面设置的样式所以此时的样式只是针对这一个pushbutton生效。比如再来一个按钮执行程序看一下发现第二个按钮并没有变。前面看到设置样式的时候是可以指定某个控件来设置的。指定控件之后此时的样式就会针对这个指定的控件生效也会针对子控件生效。我们可以把样式设置给QWidget看一下它的变化所以给Widget设置的时候圆括号里面就会针对this的子控件生效。这里setStyleSheet后即是要考虑到子控件也是要和选择器相关的。也就是我们会针对子控件中的QPushButton生效比如弄别的控件颜色没有变化。所以考虑样式生效不光看给哪个控件设置哪个控件的子空间生效同时也要关注选择器。下面看QSS中的设置全局样式的操作它能把界面上所有的样式都集中到一起来组织。下面通过代码演示先编辑一下ui文件全局样式要在mian.cpp中进行编写通过QApplication对象进行设置对应用程序设置这里有些问题1.如果设置了全局样式然后在某个控件里又设置了其它的样式会怎么样2.如果设置了全局样式在某个控件里设置的样式和全局样式冲突了又会怎么样 下面通过代码依次看看因此回答一下第一个问题此时这两方面的样式会叠加起来。下面继续看回答问题二当全局样式和局部样式冲突的时候局部样式的优先级是更高的覆盖了对应的全局样式。所以实际开发中就可以在全局样式中设置比较通用的样式统一整个程序的界面风格。如果需要针对某个控件进行微调可以使用局部样式来做出调整。3.样式和代码分离QSS上述代码中样式代码和C代码是混在一起的我们把QSS当成字符串嵌入到了C代码中。如果QSS样式代码比较简单无所谓如果QSS代码比较复杂非常麻烦这样代码的维护成本就很高了。我们可以把样式代码拎出来放到单独的文件中后续可以直接让C代码来读取并加载文件内容这样可以更好的做到解耦合。下面操作一下ui界面中放一个按钮1.首先创建一个qrc文件通过qrc管理样式文件。2.创建单独的qss文件把这样的文件放到qrc中。3.编写C代码读取qss文件中的内容并设置样式。下面看看这个方案仅供参考实际开发中还有更方便的方案。Qt Designer中直接集成了这样的功能允许我们直接把样式写到.ui文件里。我们这样选中最外围的窗口右键通过这里我们就可以编写界面的样式了。这里进行的修改都会记录到ui文件中并且在程序运行的时候自动生效而且这里还能进行预览。下面继续点击ok就可以了。点击ui文件可以看到这里记录了当前编辑的样式后续Qt根据ui文件生成C代码也就会同时把样式设置过去。但由于设置样式太灵活了有很多地方都能设置就导致当某个控件样式不符合预期的时候排查起来就比较麻烦了。若遇到排查这些1.全局样式(QApplication设置的)。2.指定控件的样式(这个控件是否设置了样式)。3.指定控件的父控件的样式(可能是从父控件继承过来的)。4.qss文件中的样式。5.ui文件中的样式...。实际开发中如果需要设置样式建议最好统一使用某一种方式来设置。4.选择器的用法下面介绍一下QSS中的选择器前面已经直到再去写样式的时候先通过选择器圈定样式生效的范围然后再去指定属性。QSS选择器支持以下几种我们主要关注黑体的。下面结合代码看一下具体的使用(ui中放一个按钮)这个QPushButton部分就是类型选择器。这里选择器是类型选择器不光对这个类生效也对子类生效若不对子类生效可以这样这是类选择器不会选中子类再添加些按钮可以看到把所有QPushButton类的样式都设置了。在开发中我们期望不同的控件样式不同此时就需要使用id选择器了因为id是唯一的也可以看到当类型选择器和id选择器选中同一个控件的时候并且设置的样式是冲突的此时id选择器的优先级更高。如果不冲突两种样式都会同时生效我们再ui中添加label和输入框看看并行选择器的效果5.子控件选择器下面介绍一下子控件选择器有些控件是比较复杂的控件里面又会包含其它的控件这些被包含的控件我们就称之为子控件。比如QSpinBox和QComboBox按钮和下拉框就可以被称为是子控件。手册中描述了子控件属于哪里下面通过例子演示一下我们设置一下QComboBox。先初始化一下下面通过子控件选择器修改一下图标样式(qrc管理)6.伪类选择器前面介绍的选择器都是选中控件。伪类选择器选中的是控件的状态或者认为是选中符合一定状态条件的控件。这里列出了一些常见的伪类选择器使用一个冒号定义伪类选择器这些状态可以使用!来取反比如 :!hover就是鼠标离开控件时:!pressed就是鼠标松开时等等。下面通过代码来演示一下(ui中放一个按钮)上述也可以通过事件来完成。7.盒子模型在查样式文档时可以看到box model这个词我们点过去看看Qt中每个widget都是矩形。图中从外到内分别是外边距、边框、内边距、内容。以房子为例子房子的围墙厚度就是边距房子里的家具是内容家具和墙之间的距离就是内边距房子和房子之间的距离是外边距QSS也提供了相关的属性针对上述来进行设置margin可以拆成4个属性margin-left/right/top/bottom可以分开写也可以合在一起写。比如margin:10px是四个方向都是10px的外边距margin:10px 20px是上下是10px左右是20pxmargin:10px 20px 30px 40px是上右下左设置(顺时针)。padding也是如此。下面通过代码演示一下这里的相关细节我们用label演示这里最初的样子下面继续演示再比如上面是设置内边距和边框的一个简单例子。再演示一下外边距的例子先简单初始化再继续此时看到有个外边距。这里看起来边框缩水了一样但其实没有变8.给按钮设置样式接下来说一些QSS具体的案例先看看关于按钮的案例我们通过QSS自定义一个按钮的样式。这是默认的样式接下来使用QSS对它进行一些样式上的改变我们还可以加一些伪类选择器此时按下按钮的话背景颜色会发生变化。我们也看到了属性的用法font-size设置字体大小border-radius设置圆角矩形background-color设置背景颜色color设置文字颜色。9.给复选框设置样式下面写一个对复选框设置样式的例子选三组类似于这样的颜色分别代表选中和未选中。使用黑色作为默认形态使用蓝色作为hover(鼠标放上)形态使用红色作为pressed形态。这是最初的样子下面设置样式(设置前记得把图标提前用qrc管理)先设置整体的样式接下来对小方框来进行样式的设置(可通过表中的添加资源来添加图片)下面做个小结10.给输入框设置样式下面针对输入框来设置样式ui上放一个输入框来设置样式先做基本的设定继续修改继续对输入的字做样式调整还可以修改一下背景的颜色还可以把输入框内容选中的颜色做一个调整默认选中背景是蓝色的文字是白色的下面修改一下下面做一下小结11.给列表框设置样式下面看如何给列表框来进行设置样式先创建一个列表框并添加一些选项当鼠标放到某一个背景框上的时候会有一个淡蓝色的这样的效果鼠标选中会有一个更深的背景效果。下面改变一下样式此时鼠标选中和悬停的背景颜色就不一样了。上述我们设置的样式是一个纯色所谓的纯色指的是选中的区域中各个位置的颜色都是一样的其实也是可以设置为渐变色的。Qt中给了一个qlineargradient属性可以设置渐变色(线性渐变)。这里用这个属性要添加6个参数先说前两个参数x1起点的横坐标y1起点的纵坐标这里的取值是非常有限的要么是0要么是1x2终点的横坐标y2是终点的纵坐标(比如x1:0 y1:0 x2:1 y2:0是从左到右的渐变)还有两个参表示从哪个颜色开始变到哪个颜色结束它们都叫做stop分别是stop:0起始颜色stop:1结束颜色。下面来演示一下这样看起来比纯色好看。下面总结一下12.给菜单栏设置样式下面给菜单栏设置样式(父类选QMianWindow)这是我们当前创建的一个菜单的效果下面来改变样式先变一下菜单栏的颜色继续设置item现在多添加一些菜单仅仅贴在一起看着也不太好看我们添加一下间距我们把被选中的菜单添加一个背景色让它有一个被选中的效果再对菜单项做一些设置此时边框选中后文字位置不会错位变化因为提前设置了透明的边框。对于分割线也可以去设置样式下面总结一下13.实现登陆界面下面通过QSS针对一个登陆界面去进行调整先编辑一下ui文件让一个窗口变的好看其中最明显的一点就是设置背景。使用qrc组织然后设置背景但有注意的要点。直观想法是直接给QWidget顶层窗口设置背景图但是Qt中存在限制直接给顶层窗口设置背景会失效。所以我们给上述一系列控件外面再去套一层控件然后再套的控件上设置背景图就可以了所以可以给上述控件外头套上一个和窗口一样大小的QFrame控件。接下来给界面添加一个QFrame来去设置背景图下面来对QWidget设置样式qt中设置背景图除了background-image之外还有border-image这样的属性。推荐使用第二个因为通过这种方式设置的背景会自动跟随控件的大小变化第一个是固定大小。下面使用一下下面对剩下的控件做样式的设置输入密码时可以把密码影藏起来下面设置checkbox和按钮可以把按钮按下做一个样式的调整此时点击就有一个比较明显的变化了。14.绘图api的介绍接下来介绍一下Qt中的绘图api绘图就画画。前面学习Qt主要学Qt的各种控制那Qt的控件又是怎么样构成的呢本质上都是画出来的。前面学到的各种控件都是一些常用的东西Qt已经提前画好了拿过来就能使用。实际开发中很可能现有的控件无法满足需求就需要自己diy一些控件/效果。Qt提供的绘图API就是为了解决上述问题的(实际开发中大部分情况下不需要使用绘图api)。这是绘图api的核心类第一个QPainter里面这个类会提供一系列的绘图方法可以实现绘画的动作的理解为绘图者。QPaintDevice表示你要画的内容是往啥东西上画的理解为画板。平时用的QWidget就是QPaintDevice的子类可以往QWidget上画画。Qpen指的是画笔就是最终画的东西样子是通过QPen定义的画笔决定了线的属性。QBrush是画刷描述的填冲的属性。这有一个注意事项画图相关的操作一般不会放到QWidget的构造函数中调用执行而是Qt提供了一个paintEvent事件处理函数在这里进行调用。因为和paintEvent对应的会有一个QPaintEvent事件这个事件会在这样场景下触发1.控件首次创建的时候比如往QWidget上画画QWidget创建之前画的东西当然不生效首次创建QWidget就能显示出画的东西来。2.控件被遮挡再接触遮挡。这个时机进行绘制也是很重要的否则绘制的内容就会在被遮挡之后就没了。3.窗口被最小化再还原。4.控件大小发生改变的时候。5.主动再代码中调用repaint或者update触发事件(这是QWidget提供的成员函数)。因此放函数里是最安全的否则可能窗口一切换画的东西没有了。15.绘图api的使用接下来通过代码感受一下画图api的使用也可以用其它的参数试一试下面画一个矩形下面画个圆形我们还可以借助这些api来显示文字注意理解这里的坐标位置1此处的0横坐标表示的是文字最左侧的位置此处的100纵坐标表示的是文字的“基线位置”。我们以前写英文时用过四线格从上往下第三根线就是基线。我们还可以通过设置QFont设置文本字体信息上述绘制的都是黑色的我们可以通过QPen设置绘制的形状的颜色信息下面看看下面介绍一下QBrush画刷可以设置颜色和风格(文档有风格样子)16.绘制图片除了绘制基础形状Qt还能绘制一些图片。除了用到上面的QPainter以外还会用到QPixmap类。先把图片用qrc管理起来依然重写paintevent还能缩放再来介绍一下图片的旋转发现没有图片因为painter是绕着(0,0)坐标系的原点进行旋转所以看不到了。为了让图片能够显示出来可以把坐标系原点(Painter的起点)平移一下前⾯的代码中我们是使用QWidget作为绘图设备.在Qt中还存在下列三个比1较特殊的绘图设备此处我们也简要介绍