pyqt5新手入门教学（木辛老师的编程课堂之PyQt5实战慕课软件开发）

软件实战开始，快速提供编程能力；通过实战，分析产品需求，梳理设计需求，提升项目分析和架构的能力。快点跟着木辛老师一起学习吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~

我们今天的课程还是继续上一节课的内容，讲解一下如何通过编码设置较为复杂的交互界面逻辑。

我们今天还是沿用登录页面，继续完善它的功能吧

大家是否还记得上节课，我们给控件们起了各自的名字？

• 背景图用的QLabel 叫做：lbl_bg_of_login。
• 显示软件logo的控件，我们也是用QLabel，命名为：lbl_logo_of_login。
• 软件标题的部分也是一个Qlabel，命名为：lbl_title_of_app。
• QListWidget是用来选择用户身份的，命名为：lst_identities_of_user。
• QLineEdit用来输入用户学号和密码的，命名为：edit_name_of_user，edit_pwd_of_user。
• “记住我”选项框，是一个QCheckbox，命名为：chk_remember_me。
• QPushButton负责，用户点击之后将读取到用户输入的相关数据提交到服务器上，命名为：btn_confrim_login
• “去注册”按钮命名为：btn_register。

大家如果有所忘记，可以前往前一节课进行复习，传送门：《木辛老师的编程课堂之Python和Qt实战慕课软件开发 登录界面（1）》

下面我们对图片显示控件的一些代码逻辑进行完善吧，首先将.ui文件，通过PyCharm的PyUIC插件转换为python文件。

然后，新建一个页面和逻辑分离的Python程序，负责调用页面显示逻辑。姑且就叫它：CallLoginMainWin.py吧。

具体代码咱们可以这么写

调用页面的逻辑代码

右键单击CallLoginMainWin.py，选择运行程序，查看效果。

QLabel加载背景图片和LOGO

好了，目前的界面控件都放好了，但是实在是太不好看了。那我们开始美化吧。

第一个是增加登录页面左侧背景图片。

我们需要Python能读到指定的图片资源，所以我们在项目的根目录下新建一个images目录，并将图片资源拷贝过来。

我在登录页面中使用的背景图片就像这样：

./images/auth_slider_bg.png

打开CallLoginMainWin.py，在类ClassLoginMainWin中的__init__方法中添加如下代码

self.lbl_bg_of_login.setPixmap(QPixmap(images/auth_slider_bg.png))

通过QLabel的setPixmap方法设置auth_slider_bg图片作为背景图片。

同样道理，我们将logo也设置到界面上。

添加如下代码：

self.lbl_logo_of_login.setGeometry(QRect(64, 80, 96, 70)) self.lbl_logo_of_login.setScaledContents(True) self.lbl_logo_of_login.setPixmap(QPixmap(images/logo_slider.png))

setGeometry方法就是设置控件的geometry属性；

咱们之前的课程里讲到过，geometry属性控制控件的位置和尺寸，通过这种方式的布局称为绝对布局，传送门：《木辛老师的编程课堂：Python和Qt之页面布局实战篇（一）》。

现在来看一下效果吧

调整窗口和控件尺寸

有的同学遇到了一些问题，比如，界面尺寸不对，加载的背景图片并没有铺满整个窗口的左侧。

这时候呢，有一个比较方便的调整的办法，就是回到Qt Designer工具，通过图形化的操作进行调整。

比如，按照我们的设计稿，我们的登录窗口应该是520 x 480 px的，所以我们通过属性编辑窗口，对整个主窗口的尺寸进行了调整

调整主窗口尺寸

当然了，我们是按照自己的标准进行调整的，同学们完全可以按照自己喜欢的尺寸调整，只要显示美观即可，这个没有特殊要求哟！

此时，调整了主窗口，我们左侧用于显示背景的QLabel的位置和尺寸也需要同时做一下修改，还是通过这个控件的属性编辑窗口进行：

调整空间属性

隐藏标题栏

有的同学又问了，我们已经通过geometry属性将左侧背景定格了呀？

为什么运行效果并不是我们想要的，背景图片上方还是没有完全覆盖左侧区域呀？

这个呢，并不是同学们代码的问题，而是Qt Designer本身默认会对主窗口添加标题栏，这样就无法将左侧背景图片完全铺开了。

那么我们试着隐藏掉这个标题栏吧~

通过如下代码，我们尝试隐藏登录页面的标题栏：

self.setWindowFlags(Qt.FramelessWindowHint) # 去掉标题栏

通过如上的代码，我们成功的将登录页面主窗口的标题栏隐藏掉了，那么这段代码需要放置在什么位置呢？

隐藏标题栏代码

是的，就是放置在CallLoginMainWin这个类的__init__方法中，放到setupUi这句之前。

咱们运行一下看看效果吧。

运行效果图片

嗯嗯，不错，效果达到了，看着还不错！

暂时还不能关闭软件

不过，好像尴尬了，我们怎么关闭这个窗口呢？我们的关闭按钮也随着标题栏消失了呀！

目前，只能先通过PyCharm自带的关闭按钮，结束这个程序的运行了。

杀死程序

就是这个红色的小方块按钮，点击两次之后，运行的登录窗口被彻底杀死了。

每次都这么操作真的很麻烦呀！特别是以后我们软件发布了，用户也不可能使用这个功能关闭软件呀！

嗯，说的很有道理，我们今天先卖个关子，具体的实现逻辑我们放到了下一节课~

不过我们可以提前剧透一下，是需要根据之前学过的信号和槽的相关知识解决，大家有思路吗？传送门：《木辛老师的编程课堂：Python和Qt之页面布局实战篇（2）》

请持续关注木辛老师的编程课哟，后续更多精彩陆续到来！

快乐编程，快乐成长！

,