软件实战开始,快速提供编程能力;通过实战,分析产品需求,梳理设计需求,提升项目分析和架构的能力。快点跟着木辛老师一起学习吧!
请点击右上角“关注”按钮关注我们哟:跟着木辛老师学习Python编程知识,变身快乐的编程达人吧~
上节课的时候,留了一个小尾巴,不知道大家这几天有没有思考过这个问题呢?
“将主窗口的标题栏隐藏之后,发现无法关闭窗口。这应该怎么解决?”
那么,在这一节课里,我们就讲一下通过编码的方式,调用系统方法,将窗口顺利的关闭。
目前的登录页面还没有制作完毕,还需要继续使用登录页面的设计稿。
登录界面设计稿
如果大家需要复习一下信号和槽的知识,可以参考一下木辛老师之前的一篇教程,传送门:《木辛老师的编程课堂:Python和Qt之页面布局实战篇(2)》。
增加关闭按钮
我们需要先按照设计稿的要求,在主窗口中添加一个关闭按钮:“x”。
将关闭按钮的素材图片拷贝到当前项目的images目录下,姑且名字就叫做:
close_windows.png
打开Qt Designer开发工具,在弹出的对话框中点击“打开”按钮,选择构建登录页面的.ui文件,在这里是“LoginMainWin.ui”;
双击打开,或者单击选中这个文件之后,点击右下角的“打开”按钮。
打开登录界面文件
成功打开之后,大家就可以看到之前尚未完成的登录页面。
拖拽左侧Buttons区的QPushButton到主窗口,并按照设计稿将这个按钮放置在560px x 10px的位置。
通过右侧的属性编辑窗口,修改geometry属性,将这个控件的X、Y、宽度和高度分别修改为:560、10、25、20。
起个名字
在之前的课程里,并没有提到这个关闭按钮,所以,这个关闭按钮目前还没名没姓,属于一个黑户!
那咱们给他起一个名字吧,按照之前的规定,这个关闭按钮就叫它:
btn_close_window
同时,一定要修改这个控件的objectName属性哟,否则无法通过btn_close_window这个名字找到这个控件。
具体方法就是:选中这个控件,在属性编辑窗口中修改QObject中的objectName字段,将这个字段的值修改为btn_close_window就可以了。
好了,目前位置我们已经将关闭按钮添加好了,保存程序;进入PyCharm软件,右键点击LoginMainWin.ui文件,在弹出来的菜单中选择“External Tools”中的“PyUIC”插件,将.ui文件转换为.py文件。
转换.ui文件为.py文件
此时,打开LoginMainWin.py文件,咱们一起看看代码有没有更新吧。
查看python文件的变化
可以看到,代码中出现了刚才添加的QPushButton控件,并通过对象的setGeometry方法,将对应的属性成功传递。
按钮加载图片
接下来,需要将关闭按钮的图像放置上去了。
pixmap = QtGui.QPixmap(QtGui.QImage('images/close_windows.png'))
self.btn_close_window.setIcon(QtGui.QIcon(pixmap))
self.btn_close_window.setIconSize(QSize(10, 10))
我们通过实例化了一个QPixmap对象,加载了关闭按钮的图片文件,通过使用QPushButton的setIcon方法,将这个pixmap设置为QPushButton上的一个小图标,同时还将图标尺寸设置为10x10px,这样看起来更美观一些。
增加关闭按钮之后的效果
看着挺不错的,(#^.^#)。
好了,已经添加完关闭按钮了,咱们这个页面又做完一个新功能,收工吧。
咦······,怎么还是没法关闭这个窗口呀!
这是怎么回事啊,已经将关闭按钮添加上去了,为什么还不能关闭呢?
是这样的,我们仅仅是将按钮放置到了主窗口上,并没有给它添加事件;也就是说,在我们点击了按钮之后,它并不知道要做什么,所以,只能呆呆的没有反应。
教程开始的时候,提到过需要先复习一下“信号和槽”的相关知识,在这里就需要用到了。
添加事件
我们需要给关闭按钮添加事件,让按钮作为一个事件发起者,发送出一个关闭信号。
这个事件在什么情况下发生呢?
当我们点击关闭按钮的时候,需要通知系统:我们想要关闭当前主窗口,请快快把主窗口关闭吧!
具体代码可以这么写:
self.btn_close_window.clicked.connect(self.close)
调用QPushButton的clicked方法,并通过其connect,将这个信号发送给系统的close方法,完成关闭主窗口的操作。
逻辑就是这么简单的!
咱们重新梳理下流程哈
- 在这里的定义关闭按钮是信号发出者
- 当点击关闭按钮之后,会发射一个信号
- 通过connect方法,将这个按钮的电机事件连接到了主窗口的关闭事件上
- 接收者窗体在接收到关闭信号之后,将运行槽函数close(),将主窗口关闭。
这么一讲,大家是不是就能理解信号和槽机制的运行机理了呢?
好了,咱们的关闭按钮完工咯!
不对!发现一个问题,这个关闭按钮四周有一个边框呢,这个在设计稿里可以没有的。咱们需要想想办法把这个边框去掉吧。
这样吧,今天咱们就把这个问题留作一个思考问题,请大家想想:如何去掉按钮的边框吧。
下一节课中,我们会引入一个新的概念,实现去掉按钮的边框。
请持续关注木辛老师的编程课哟,后续更多精彩陆续到来!
快乐编程,快乐成长!