经过上一章的练习，相信大家对Qt Designer这个工具已经有了一定的了解，如果不是很熟悉的，建议多花点时间，为什么一直强调呢，因为这个确实会影响到开发的速度和效果。我们应该尽量做到对每个控件和属性都有了解。如果没有下载源码的可以先下载，可能会需要用到。
源码地址：https://github.com/zengjiawei/CommAssistant-for-PyQt5
这一章，开始进入真正UI设计，先讲一下我这个串口UI的界面构成，这张图在大家第一章的时候已经见过了。这里主要由三部分组成。
串口界面UI
1. 自定义标题栏
就是左上角的小图标（icon）和名称版本，还有最右边的 "最小化" ， "最大化" ， "关闭" 按钮图标，这些都需要自己设计。当然，如果大家想快速开发的话，Qt也提供原生的windows风格标题栏（如果在苹果上，就是苹果的风格），如下图（Windows）。
windons风格标题栏
如果大家不嫌弃或者开发时间比较赶，建议还是用默认的。但是我是抱着学习的心态，所以选择自定义标题栏，这样能做出完全符合自己风格的标题。标题栏主要用到QLable和QPushButton控件。那如何让QLabel和QPushButton控件显示相应的图标呢？其实非常简单，都是用到Qt Designer的QSS样式，如果大家写过HTML的就知道有个叫CSS的样式，这个其实就是Qt里的CSS。
先介绍一下如何修改QLable控件的图案。首先，可以点击QLabel控件，然后选择属性栏的styleSheet一栏后面的 "..." ，接下来会经常用到这个来修改控件的样式。
styleSheet样式
打开之后输入以下代码，url后面的括号是图片的绝对路径，也可以用项目的相对路径（相对路径就是工程目录下的地址），这个最后会影响软件的依赖文件，这个后面讲到打包成.exe文件的时候再细说。
border-image: url(C:/images/title_icon.png)
一般控件都是通过这句代码设置成图片的，非特殊情况后面不再解释。
通过QSS设置图片
软件名称的修改相信这个就不用多解释了，比较简单，双击一下就可以修改。重点讲一下右上角那三个小图标，如果大家下载了代码在Pycharm运行一下，或者下载了可执行文件，可以看到当我们把鼠标靠近这几个图标时，颜色会发生改变，如下图所示。那怎么实现呢？
鼠标移动前
鼠标移动后
首先这3个都是QPushButton控件，然后每个控件需要准备两张图片，一张是鼠标靠近前的，一张是鼠标靠近后的，具体样式根据用户爱好选择。那么，如何检测鼠标是否移动到这个图标的上方呢？这个同样通过设置QSS样式（即styleSheet）来实现，代码如下。第一句是鼠标没有移动到这个图片前，即正常情况下的图标，第二个是鼠标移动到图标上方，通过hover属性来设置。
QPushButton{border-image: url(C:/images/close_first.png);}
QPushButton:hover{border-image: url(C:/images/close_latter.png);}
我们单个控件的样式都配置完成之后，我们需要将他们统一放到一块作为标题栏。我的操作是新建一个Widget控件。
创建Widget控件
新建完成后把对应的控件放到Widget里面，如下图所示。这里用到了一个弹簧工具，这个主要是用来占据空白地方的，Layout（下面会讲到）之后保证相应的控件在标题栏的两边，这个控件可以在左侧控件栏的 "Spacers" 分类下找到，该分类下有两种，一种是横向的，一种是纵向的，拖出来多试几次，它的功能比较单一，但用途很广。
标题栏
那如何将Widget变成黑色呢？同样是用到styleSheet（不知道在哪里的翻一下上面，很重要！）修改一下代码就可以了，反正记着跟样式有关的就找styleSheet，后面不再细说，代码如下。大家可能会问为什么会有#TitleBar，TitleBar就不用解释了，就是Widget控件的名称，重点是 "#" ，这里要跟大家说个知识点，父类跟子类的特性，父类的属性会继承给子类即内部的每个控件，所以修改的属性都会被子类继承，如果不用 "#"，那么我修改父类的背景颜色为黑色，那父类下的所有子类背景颜色也会被设成黑色，这不是我们想要的，所以需要加个 "#" ，表示该父类的属性不用子类继承。
#TitleBar{background-color: rgb(0, 0, 0);}
弄到这里标题栏已经有了大概的形状了，不过还差最后一步，就是上面提到的Layout。Layout的作用是在软件被拉伸的时候保持相对位置。大家不明白的，可以直接按一下Ctrl+R，然后把界面拉大，大家就可以看到下图的情况。就是标题栏并没有随着软件的拉伸而跟着拉伸。
Layout的作用
那如何解决呢，其实非常简单，就是点击新建的Widget，然后右键Layout，这里主要用到的是Lay out Horizontally（横向分布，可以通过看图标来理解），选择之后标题栏就会根据我们的选择进行横向分布，纵向同理。这里还有Lay out Vertically(纵向分布)等等其他分布方式，最好的理解方式就是实际操作一遍，这里不再详说，操作完还是不理解的可以baidu一下Qt Designer Layout 帮助理解。
如果大家按一下Ctrl+R，可能发现Layout完为什么拉伸的时候还是不会变化呢？大家点击控件栏下方的 "Object Inspector" 就知道为什么了。原来标题栏的Widget其实是在整个Widget下的，所以我们还需要Layout 整个工作区，由于我们还有两个部分需要设计，这里就先不Layout整个工作区了，有兴趣的可以先试一下。细心的人可能会发现，没有Layout的属性会有一个类似 "禁停" 的图标，这可以帮助我们快速知道哪个控件还没有Layout。
对象管理器
标题栏Layout之后，如果大家对控件的位置不满意，可以通过调节以下绿色框内的属性来调整控件的大小位置。不明白具体有什么效果的，还是那句话，每个试一下就明白了。大家会发现Layout之后geometry就无法更改了，所以一开始不用急着修改，等最终Layout之后修改绿色框的属性就好了。
属性框
如果点击标题栏的Widget，除了看到上图的属性外，往下拉可以看到几个不一样的属性。建议大家都调一调。
Layout的属性
第一部分讲那么详细是想着看这篇文章的可能是新手，后面我会慢慢弱化基础的讲解，但这不代表不重要，基础的东西需要大家去慢慢理解消化，后续主要以我遇到的坑为主，简单的我会一笔带过。
2. 主体
主体部分控件比较多，不过也不用怕，这么多的东西都是由小小的部件组合而成的，就好像标题栏一样，一定要擅用几个几个控件组合成Layout的方法，这样位置的调整才比较容易，这可能需要花点时间。不明白的可以下载我的源码文件，用Qt Designer打开就可以看到了。
主体
这里再讲一下，大家看到主体里面有很多红色的框框，那是我将靠在一起的控件通过Layout的方式打包在一起，这样比较好管理，是一个不错的技巧。Layout之后还能调节Layout属性，非常方便。
这里说2个坑，其实这个坑主要是针对我这个软件，不过也还是要告诉大家，防止以后遇到又要折腾。
- 大家看到我的背景是灰色的，而默认的字体是黑色的，由于两者色差不是很多大，这样用户就很难分辨出，所以我就将字体全部改成白色的了，那怎么修改文字颜色了，这里有两种方法：第一种可以通过修改HTML属性。
设置字体颜色
点击后面的 "..." 可以进入设置，如下图所示。大家可以看到红色框的地方可以修改字体颜色为白色，修改之后点击Source就会看到HTML代码发生变化了，而且Rich Text下的文字好像消失了，其实只是变成白色了，你只要全选它就能看见了，这是第一种方法。
Html设置
第二种方法是直接修改QSS样式，代码如下：
color: rgb(255, 255, 255);
既然两种都能设置为什么说是坑呢？因为我发现如果两者同时使用会出现冲突，造成QSS的样式无法显示的问题。这里我建议统一是用QSS设置。如果出现无法显示QSS样式怎么办？试试将Source的HTML代码删掉或者把控件删除重新添加好了。
- 第二个坑来自CheckBox控件，就是那个可以打勾的那个。我拿 "Hex显示" 为例，其他同理，大家在界面上可以看到下图。一般人会认为这是一个控件，其实我这里是由CheckBox控件和QLable控件组成的，只是我把CheckBox自带的文字删掉。这时可能就有人会问CheckBox不是本来就带有文字的么？为何还要多此一举？
CheckBox
原因还是因为背景是灰色的，我需要将字体设为白色。这个步骤上面也说到了，就是通过修改QSS属性来改，但是我发现修改之后字体确实变成了白色。但是，里面的 "√" 也变成了白色，这就不行了，因为框本来就是白色背景的，最终的效果就是 "√" 看不见了，这显然不是我们想要的，所以我干脆不用自带的字体了，再增加一个QLabel控件，就可以解决这个问题（目前没有想到其他更好的办法，如果有的欢迎下方评论）。
3. 底部
有了设计标题栏的经验，相信底部的设计根本难不倒大家。不过，大家看到，我的 "Receive" 、 "Send" 还有 "当前时间" 等控件后面为什么会有数据呢？其实我是在他们后面多添加一个控件，控件的实际数据会在程序中修改，这里只是为了看看排版及调整控件的间隔，内容本身并无实际意义。设计完记得Layout整个工作区。
最后，做完之后，记得给自己的控件改个名字，因为在程序中需要调用一些控件，如果在程序中没有调用的控件，不改也行，主要是为了方便自己记忆。修改的方法是鼠标点一下控件，在属性栏的第一个 "objectName" 那里修改，也可以直接双击控件栏中的控件修改。
最后的最后就是需要将Qt的界面转换成python，在pycharm的安装和环境配置的那个章节，我们添加了两个外部工具，一个是这一章用的Qt Designer，还有一个是Pyuic。这一步用到Pyuic这个工具将.ui文件转化成.py文件，具体操作如下图。
将ui文件转换成py
点击之后就会生成一个XXXX_UI.py文件，这个文件就是程序的界面程序，有一点要注意的是，每一次修改Qt Designer中的内容都需要保存，并执行转化。
UI的设计讲完就一章的内容，但是使用的过程可能会遇到很多问题，需要多操作，多baidu，或者下载我的源码参考一下，也可以在下方留言，我看到了会回复的。下一章开始进入代码部分的分析。
网友评论