当界面上控件比较多的时候，我们建议使用QTDesigner
目录
8 pycharm Tools中设置Qt.designer，pyuic5，pyrcc5
1 安装工具
安装完毕后我们进入环境的路径
如果不知道环境在哪，我们使用在pycharm中点击File --> settings
打开之后这样选，箭头指向的位置就是环境的位置
像我现在用的是conda，我们找到anaconda的安装文件夹，我这里使用的是base，所以库就在lib/site-packages中
- 如果我们用的是虚拟环境，那么就会在envs/环境名字/lib/site-package中，这个我就不展示了
进入之后我们搜索designer.exe
可以找到上面这个应用程序
我的designer.exe在F:\anaconda\Lib\site-packages\qt5_applications\Qt\bin路径中
2 简单使用
双击打开之后是这样的
点击这个创建会出现一个面板
我们可以使用左侧的控件区域拖拽出一个简易的登陆界面来
之后按ctrl+r，可以试运行
3 属性设置
此时我们的密码并不是密文的形式，现在对右侧的属性进行调整
选中我们要调整的QLineEdit，然后我们可以看到右侧的属性栏，其中有三层，分别是他自身和他的父对象
我们之前讲过，密文是QLineEdit中的属性，此时我们不难找到echomode
选择password后，再次试运行
发现第二栏为密文形式
4 伙伴设置
我们现在的标签还没有绑定小伙伴，这个时候我们绑定一下，选择Edit --> Edit Buddle
- 有的版本是中文，有的版本的英文，大抵都在这个位置
选择之后，点击标签，然后拖到他对应的小伙伴控件的地方
然后再点击这里，即可完成编辑
- 当我们点击中间的箭头时，即可选中小伙伴连接，然后再按Del就可以删除了，红色为伙伴的选中状态
这个时候我发现我快捷键写错了，应该为&+快捷键
经测试按alt+b和alt+c确实可以生效
5 信号与槽设置
现在我们想给按钮连接一个槽函数
点击这个
之后选择我们的按钮，然后往右拖
会出现地线一样的东西，此时我们松开鼠标左键，会弹出一个对话框
- 拖拽的时候拖到哪个控件上就会自动找到哪个控件的方法，我们现在就是拖到后面那个大控件QWidget上了
左边是信号，右边是槽
点击这个复选框后会出现该控件父类的信号和槽
我们此时选中点击信号，然后点击编辑
点击之后会弹出这样一个对话框
我们点击槽的加号可以自定义一个槽函数
我们现在对其命名为check_login()
然后我们点击下面的OK
之后回到了这个界面，我们将新创建的槽选中，然后点击OK
现在在界面上就会出现信号和槽的名字
之后再点击这个，我们就回到了编辑控件的模式
6 设置样式
我们现在想给按钮的背景放一张图片
选中按钮之后，然后在属性栏中搜索styleSheet
此时我们点开右侧的三个点会出现这个对话框
这个对话框也可以右键控件，然后选择change styleSheet弹出来
弹出之后我们点击添加颜色右侧的小箭头，可设置的qss如下
此时我们选择color，然后随便选一个颜色作为前景色，选择完之后我们可以看到左下角的文字，这个就表明这个样式表是有效的，如果出现语法错误也会进行提示
我现在随便输入一些字符，它就会告诉你这个样式表是无效的
它有问题的时候咱们就OK也应用不了了
我们改正之后点击Apply按钮
发现可以生效
我们现在想添加一张图片，我们点击添加资源旁边的小箭头
里面有三种Image
我们现在选择background-image
点击后，会弹出选择资源的对话框
现在我们什么资源都没有，现在我们点击一下小铅笔
弹出了这样一个对话框，我们点击这样一个按钮创建资源
之后会弹出这样一个对话框
- 这一步会创建一个qrc文件，我们选择一个目录进行放置
我们命名为test_source，然后点击保存
这个时候编辑资源的对话框就是这样了
这个时候我们点这个
- 这一步是添加图片的前缀
我们命名为lk
然后选中后点击添加文件按钮
点击之后会出现这样一个对话框，这个时候我们选中我们一张图片文件
比如我们选择这个气球，然后点击打开
编辑资源对话框会变成这样，现在我们点击一下OK
选择资源对话框会变成这样，我们点击一下OK
此时我们样式表对话框会变成这样，此时我们点击一下Apply
发现它变了
我们再点击这个界面中的OK就完事儿了，当然点OK之前不点应用也可以
7 设计完了之后使用
此时我们这个登陆界面设计完毕了，现在我们ctrl+s保存界面
会保存为一个ui后缀的文件
我们选择路径，输入文件名，然后点击保存
我们为了好看我们把上面的qrc文件与这个UI文件放到同一个文件夹中
在更改的时候如果出现这个对话框，我们点击复制就可以了
更改之后我们还需要再保存一遍
此时我们的项目路径下一共有三个文件
一个UI,一个qrc，一张图
UI文件本质上是一个xml文件，我们可以直接加载这个xml文件，也可以把这个UI文件转换为PY文件
7.1 UI文件转py文件
我们需要在pyuic5的路径下输入这样一条命令
这个工具在安装Pyqt时已经自动安装完毕了，不需要再装一遍
我们现在先找到pyuic5
这个应用程序在这个路径中
我们在这个路径中搜索pyuic就可以找到
回到咱们这个命令
需要替换两个地方，第一个地方是需要转换的文件，第二个地方是指定的路径
我们现在把刚刚的UI文件转化一下
首先打开cmd
进入script路径
然后我们这样写
写完之后敲一下回车
这个时候我们就在指定目录下多了一个py文件
我们现在可以点开看一下，它大概是这样的
把咱们的拖拽效果搞成了编码，这些编码在咱们之前的课程中都有介绍过
我们也可以把UI文件转换成可执行的py文件，我们重新搞一个名字，然后在后面加-x
这样我们的代码下面就加上了main
咱们现在还需要一个样式表样式表
7.2 qrc文件转py文件
这个要用到pyrcc5，同样在脚本中可以找到
我们现在转一下
- 一般来讲我们会将转换后的文件名加上 _rc
转完之后的py文件是这样的，它会把图转换成二进制文件
7.3 加入槽函数
现在我们还差最后一个东西，我们刚刚自定义了一个槽函数，但是并没有填写内容，我们现在把这个内容填进去，槽函数的内容在这
我们有两种操作方式，一种是替换掉这个槽函数的父对象
另一方式是在下面用实例化后的对象来搞，像这样
至此，我们设计的UI界面就可以在pycharm中打开了
8 pycharm Tools中设置Qt.designer，pyuic5，pyrcc5
首先我们点开 setting
在tools下找到External Tools
点击加号
8.1 加入Qt.designer
点开加号之后我们输入Name和Description，Description可以不写
然后再Program中选择designer.exe
选完之后就变成这样了
然后我们更改一下 Working directory，这个是指UI文件默认保存在哪
我们首先给默认的删掉，然后点击插入宏
点开之后里面会有一个ProjectFileDir 这个的意思的项目路径，我们选中后点击Insert
这个时候就变成这样了，然后点击OK
在这里也点击OK
然后我们在这里就可以找到刚刚创建的工具了
经测试点击之后确实可以打开Qtdesigner
8.2 加入UI转PY
还是点刚刚的加号，之后输入名字和描述
program选中pyuic5.exe
Pyuic5这个工具是需要接收参数的
我们一般是在pycharm中右键选择UI文件后直接转换，所以我们这样写
$FileName$ -o $FileNameWithoutExtension$.py -x
之后我们再修改工作目录，我们通常把UI文件与转换的PY文件放在同一路径下，所以我们选择 $FileDir$
之后点击两个OK，这个时候我们就可以直接转了
经测试是可以的
8.3 加入qrc转py
这个我就不赘述了，我把内容展示一下
- Program: F:\anaconda\Scripts\pyrcc5.exe
- Arguments: $FileName$ -o $FileNameWithoutExtension$_rc.py
- Working directory:$FileDir$
经测试确实能转
9 QtDesigner详细用法
我们在新建窗体的时候一般会选择Widget，选择这个之后他会把我们确定的操作(如插入控件，连接槽函数)等会封装在一个类中，我们可以实例化这个类进行操作
9.1 控件的父子关系调整
我在原本的widget上又放了一个widget2，然后再在widget2上放一个按钮，这个时候按钮默认为widget2的子控件
现在的父子关系是这样的
我现状不想让按钮为QWidget2的子控件，还想让他保持原位置不动，我们先把当前的位置记下来
- x,y是按钮的当前相对于widget2的位置
然后我们把按钮拖出Qwidget2，此时父子关系自动消除
然后选择按钮，之后通过输入x,y改变位置
输入时，我们应先查看QWidget2的位置，然后做加法
当前QWidget2的位置为(200,310),按钮刚刚查看的位置是(50,60),所以当前按钮的位置应该输入为(250,370)
这个时候按钮在不改变位置的情况下独立于QWidget2了
9.2 覆盖控件
此时我想用QWidget2把按钮遮住，为了好看我先改变一下QWidget2的背景颜色
我们右击QWidget2，然后点击放在前面
这样就覆盖掉了
9.3 增加属性
我们在使用qss的时候对指定属性设置过qss，增加的属性就是做这个用的
比如我们现在对按钮加上一个error_level属性
我们选中按钮后点击属性编辑器的加号，然后点击字符串
弹出创建动态属性对话框，然后输入error_lever然后点击OK
这个时候会在右边出现这个
我们输入对应的属性值即可
当我们想删除这个属性时，我们可以选中后点击这个减号删掉
9.4 添加渐变色
我们在样式表的第二项就可以添加渐变色
比如我们现在想更改背景颜色，我们点击background-color，此时会弹出这个对话框
这些都是渐变的方式，我们可以选择其中一个进行编辑，也可以新建一个
- 这个用的不多一遍是添加一张图片作为背景，等我用到的时候再添加相应的内容
我们就选择下面的这个彩虹作为背景颜色
点击两个OK后，背景颜色有所变化
9.5 添加图片作为资源
这个之前介绍过，方法我就不赘述了，在添加资源时，可以一块添加多个资源
9.6 使用自定义类别
首先我们创建一个py文件放置自定义的类，在例子中我们就将它命名为costom_btn，然后在其中填写如下内容
然后我们在qtdesigner中右键指定控件，然后点击提升为
会弹出这样一个对话框
在对话框中，输入提升的类名称btn
头文件填写创建类的文件名costom_btn
然后点击添加
之后点击提升
现在我们的QPushbutton的类就变为了btn
此时试运行(ctrl+r)是不能展现出自定义类的效果的，我们现在保存这个UI文件，名称为costom_widget
然后我们把UI文件转换为py文件，之后打开py文件，在这里就有自定义控件的体现
这个时候在Pycharm中运行这个py文件就有效果了
9.7 设置布局
当我们要对整个窗体整体进行布局时，我们可以点击上面这四个按钮,分别是水平布局，竖直布局，网格布局，表单布局，下面这个图是我没布局前的样子，我们现在点击网格布局
当我们想取消布局的时候，我们点击这个按钮
点击后就会变为无布局的形式
我们也可以进行某几个控件的部分布局，此时我们选择想要布局的控件，然后点击布局按钮
我们此时点击了水平布局，点击后他们就变为了水平布局
可以对布局调整大小，里面的控件会根据尺寸策略自动调整大小
如果想取消我们点击取消布局的按钮
在布局中我们可以把弹簧加入进来
如果我们设置完控件尺寸之后，发现控件没按照自己想象的对齐方式摆放，我们可以右键点击控件，然后选择Layout Alignment，然后再其中就可以选择对齐方式
9.8 UI文件的使用
除了上面介绍的转成py文件使用，我们也可以直接使用UI文件
首先我们创建一个Py文件，然后把模板放进去
然后加上这两句话
这样我们就可以直接运行了
但是如果界面中有图片的话会加载不出来，如果有槽函数的话会直接报错
9.8.1 解决槽函数问题
这个我们设置给self后需要自己定义一个
定义后不会报错，可以运行
9.8.2 调整子控件
调整之前我们需要先找到子控件，此时我们需要打开UI文件，然后查看这里
比如我现在相对lineEdit_2进行调整
这个时候就调整好了
9.8.3 解决图的问题
这个首先需要UI对应的qrc文件，然后把qrc文件转换为py文件，之后再在开头输入这一句
- 这个是qrc对应py文件的名字，并不是固定的
这样我们就有图片了
9.8.4 另一种使用UI的方式
我们把UI文件转换为py文件后，再新建一个py文件，之后把UI转换的py文件导入新建的py文件中
槽函数和图片和上面的处理方式相同即可
5358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
