小白学PyQt5（2）：Hello World

        注：博主有些唠叨，不过所有不影响操作的话都会用小一号字斜体写出，就像你现在看到的这段话一样      另外蓝色的字词是一个链接，点开可以看到相关内容，如下载页面或词语解释等  。

        大家学任何一个语言，最开始就是写一个“Hello World”啦，我们的《小白学PyQt5》也一样，既然已经搭建好了开发环境，那就来试试写一个属于我们PyQt5的“Hello World”的程序吧~上一篇《小白学PyQt5（1）：环境搭建》我们曾经看到过一张图：

那么我们在这次的内容中实现上图的效果。

        首先，我们先来了解一下PyQt5使用Qt Designer开发的整个流程：

Qt Designer绘制GUI界面 ——> .ui文件转换为.py格式 ——> 调用GUI界面

        其中Qt Designer绘制的GUI界面保存为.ui文件，需要使用PyQt5的pyuic工具将.ui文件转为Python能够导入调用的.py格式，最后是使用你的程序去调用这个GUI文件即可。

        是的，三步走，就能开发出属于你的带界面的Python程序。

        具体操作步骤如下：

1. 打开PyCharm

2. 新建工程

3. 新建外部工具

        点开PyCharm的工具栏 File --> Settings... --> Tools --> External Tools

        

4. 新建一个外部工具用于打开PyQt5的Designer设计师工具

    (1) 添加外部工具；

    (2) 取一个名字；

    (3) 添加外部工具的注释（可不填）；

    (4) 添加 Python的解释器；

        这里我们点开右边的 “...” 选项，找到你虚拟环境下安装的PyQt5的designer.exe，一般路径为...\Lib\site-packages\pyqt5-tools\designer.exe

    (5) 添加参数（可不填，最好填一下）

        这里我们点开右边的 “Insert Macro...” 选项，找到FileDir，手动添加一个右斜杠“\”，再点开右边的 “Insert Macro...” 选项，最后应该为$FileDir$\$FileName$

    (6) 工作目录

        这里我们点开右边的 “Insert Macro...” 选项，找到ProjectFileDir

完成后如下图效果：

5. 打开外部工具从而打开Designer

        右击你的工程文件，找到External Tools，会发现里面出现了你刚刚建立好的外部工具。

        尝试打开外部工具，成功进入Qt Designer，但是弹出一个对话框报错。直接关闭对话框就好了，为什么会这样，因为我们之前在建立外部工具的时候添加了参数，这个参数指向当前文件，当该文件为.ui文件时就是打开设计界面，如果是其他类型的文件就会出错（一般也不会这么做，第一次这么做是因为没有创建.ui文件），心细的同学可以在PyCharm下方的控制台看到一行输出，就是外部工具实际执行的命令。为了我们每次打开Qt Designer时直接加载.ui文件，我们还是添加参数比较方便。

而正常的创建界面应该是这样的：

6. 创建.ui文件

        新建选项有很多，分为templates\forms（模板\界面）和Widgets（窗口小部件），我们一般直接选择前者作为界面的设计，所以后者不做讨论。

        templates\forms里面有五个选项可供选择，其中前三个其实就是同一类界面，只不过多了按钮，我一般喜欢选择没有按钮的。所以其实只有三类界面Dialog、Main Windows、Widget。我们这次选择Dialog 作为我们的界面（也就是Dialogwithout Buttons），至于这三类界面的区别在之后会单独写一篇进行讲解。

        新建界面打开后，主要有这么几各部分是我们必须要关注的：

(1) 内置的控件工具箱（内置的控件足够满足我们一般要求）

(2) 设计窗口（所见即所得的界面）

(3) 各个控件之间的关系树（当界面复杂起来后会比较有用）

(4) 控件的属性列表（可以在这里修改一些控件的固定属性）

7. 绘制界面

        从控件工具箱中找到Display Widgets下的Label（标签），直接用鼠标将其拖拽到设计窗口里面；再从控件工具箱中找到Buttons下的Dialog Button Box，也是用鼠标将其拖拽到设计窗口里面，如下图：

        接着点击设计窗口的空白处，然后点击下图(2)处的Lay Out Vertical，再点击下图(3)处的Adjust Size，你会发现你就完成了我们最开始讲的那个界面。具体怎么使用这些控件都会在后面的教程讲到。

        还是差了一点，我们现在选中Label标签（就是显示TextLabel的控件），双击它，把内容改为“HELLO”，这下和最初的内容就完全一致了。按下Ctrl + R，就能够进行界面的预览（不同的系统风格不同哦）。

最后我们进行保存，我这里保存的名字为dialog.ui。然后就可以关闭Qt Designer了。

8. 新建外部工具用于将.ui文件转换为.py文件

        参考上一个外部工具PyQt5 Designer的设置，进行下图的(1)(2)处修改，其中(1)处是虚拟环境下的Python解释器：

9. 打开外部工具从而转换文件

        右击你的.ui文件，找到External Tools选项里的你刚建立好的外部工具PyUIC，点击即可完成转换，如果发现失败就重启下PyCharm让设置生效。

10. 创建主py文件

        现在我们有了py版的界面文件，只需要有一个Python文件对其进行调用。所以我们现在新建一个Python文件。右击项目名，选择New --> Python File。

        然后输入下面的代码：

import sys
from PyQt5.QtWidgets import QApplication, QDialog
from dialog import Ui_Dialog#dialog对应转换后的界面文件的名字，后面的Ui_Dialog可以打开dialog.py文件进行查看

app = QApplication(sys.argv)
window = QDialog()
ui = Ui_Dialog()#这里和上面一条注释一样
ui.setupUi(window)

window.show()
sys.exit(app.exec_())

        最后选择工具栏的Run --> Run，在弹出来的小窗口中选择main，随后就能看到我们制作的界面啦，重点是这个界面是我们通过Python调用实现的，也就是说，现在这个Python程序是一个有界面的Python程序。

好了，我们已经成功实现了第一个PyQt5的“Hello World”小程序，整个流程可以归纳成：

Qt Designer绘制GUI界面 ——> .ui文件转换为.py格式 ——> 调用GUI界面

        当然这个程序实在是太简单，简单到只有一个界面，并没有实现交互功能，别着急，本篇只是为了让大家能够体验一个PyQt5程序是怎么个操作流程。这才是个开始，在后面还有很多内容等待大家去学习。

        本篇中的源代码我会放在我的码云上，大家可以进行下载学习，https://gitee.com/gan19951101/xbxpyqt5

如果觉得xycy写得还可以，请记得顶一下哦，转载记得说明出处，谢谢大家。