木辛老师的编程课堂:Python和Qt之页面布局实战篇(一)

off999 2024-10-18 08:10 69 浏览 0 评论

通过前几节课的学习，我们已经基本上掌握了使用Qt Designer完成简单的布局管理。通过这些知识的学习，我们算是对PyQt进行了初步的了解，也算是入门了！
但是仅仅掌握这些知识还是远远不够的；
高深的程序技能是通过不断的练习，反复的试错才能掌握的一门简单，但是高深的武功。所以，今天我们就专门讲一节实战课程，总结一下有关Qt Designer的一些知识。
请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~

让我们通过实战，来进一步巩固学过的知识吧。

打开Qt Designer，新建一个主窗口（Main Window），然后从左侧的Buttons栏拖拽一个QPushButton到主窗口中，并将按钮的显示标签修改为“计算”

修改按钮显示文本的方法有两个

双击按钮控件，当按钮变为可输入状态的时候，既可以修改显示文本内容了
如上图所示，我们通过属性选择窗口，找到“text”，将其值改为“计算”文案即可

然后，我们来看一下如何放置这个按钮，即这个按钮的尺寸和位置

我们通过属性编辑窗口中的“geometry”的字段，依次修改对应的值

X：当前选中控件左上角距离主窗口左侧为370px
Y：当前选中控件上侧距离主窗口上边沿为170px
宽度：即是当前选中控件的宽度，为131px
高度：即是当前选中控件的高度，为41px

咱们再来看一下转换成Python代码后的样子

self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(370, 170, 131, 41))
self.pushButton.setObjectName("pushButton")

可以看到我们实例化了一个QPushButton转换，通过setGeometry方法设置了它的geometry属性，并且传入了X=370 Y=170 width=131 height=41的参数；

这样，就实现了和Qt Designer相同的效果，而这个转换后的python文件，就可以被其他的Python函数调用了。

我们来多放几个控件，尝试着做一个好玩的小玩具吧

我们在其中添加了一些控件：

从Display Widgets中，拖拽了6个QLabel分别命名为“一月”，“二月”，“三月”，“四月”，“收入”，“支出”；

从Input Widgets中，拖拽了8个Double Spin Box控件，并作为主要数据的输入框；

咱们再来看看对应的Python代码会是什么样子吧

红框中的代码

（第29行）

self.label_2 = QtWidgets.QLabel(self.centralwidget)

实例话了一个QLabel，并起名为label_2;

（第30行）

self.label_2.setGeometry(QtCore.QRect(180, 100, 81, 41))

设置了这个控件的绝对位置为180，100，81，41；

为了大伙能更清楚的看清楚细节，我们将字体调大了一些，这里我设置了字体大小为24

通过代码，我们可以看到

font = QtGui.QFont()
font.setPointSize(24)
self.label_2.setFont(font)

首先实例化了一个字体实例font，设置字体属性为24，将这个字体实例传入label_2的setFont方法中，就完成了设置label_2字体大小的操作。

之后的代码就类似了：实例化控件，设置字体大小，设置控件绝对位置。

所谓的绝对位置，是说控件所处于主窗口的x和y的坐标，不论主窗口的怎么改变，控件的位置都不会改变。

那有没有更加灵活的布局方式，在改变窗口大小的时候，控件会自动调整位置呢？

使用布局管理器布局

我们使用绝对坐标和大小的方式布局，每次都需要手动修改位置，比较麻烦；而且有时候窗口大小变化了，控件并不能自己调整大小。

接下来，我们将会使用布局管理器学习和设计布局

咱们在进行下一步操作之前呢，需要先使用一个小技巧，使我们的布局更合理

在左侧的QLabel控件的上方添加一个Qlabel控件，显示文本置为空，为什么要这么做呢？请看木辛老师接下来的讲解吧~

垂直布局

咱们选择左侧的4个QLabel控件（包含后来添加的空的QLabel），点击鼠标右键，在弹出的菜单中选择“布局” —> “垂直布局”，大家看看效果，这“3”个控件（有一个“看不见”的控件）是不是都在纵向对齐了呀？

是的，选择垂直布局之后，所选择的控件会以左边为基础，在纵向方向上对齐。

我们看一下转换后的Python代码是怎样的：

代码是不是很清晰呀？

首先，会实例化一个QVBoxLayout类，木辛老师也给大家讲过，水平布局的实例化方法（传送门：《木辛老师的编程课堂：Python和Qt第2讲之布局管理初探（三）》）；

然后，咱们创建的多个QLabel会被添加入这个垂直布局中；这样，系统就会将包含的多有控件在垂直方向自动左对齐了；

大家有没有注意到：在属性编辑器中，geometry属性变成了灰色不可用，这说明这些控件的位置和大小已经由垂直布局管理器接管，与geometry无关了。

网格布局

接下来，我们选中中间的10个输入框控件，点击鼠标右键，在弹出的快捷菜单中选择“布局” —>“栅格布局”，看看效果。

栅格布局的意思就是该布局管理器的窗口呈网格状排列。本来这8个零散的窗口控件就是要呈网格状排列，因此使用栅格布局管理器正好合适。

咱们看一下转换成Python代码转换的效果吧

通过这个源代码，可以看出：只要实例化QGridLayout对象，就可以生成一个grid layout一个对象，将对应控件加入到这个布局管理器中，就可以将布局控制权交出给管理器了。

水平布局

从Qt Designer的左侧的Spacers栏分别将Horizontal Spacer和Vertical Spacer窗口控件拖拽到主窗口中，从Display Widgets栏将Horizontal Line窗口控件拖拽到主窗口中，之后选择当前主窗口中所有控件，点击鼠标右键，在弹出的快捷菜单中选择“布局” —>“水平布局”，看看效果。

我们通过Qt Designer的菜单栏中“窗体”中的预览选项，或者使用快捷键command+R既可以尽心预览效果，非常方便哟！

学习了这么多布局管理器对窗体进行布局，大家已经是不是已经熟悉了布局的基础操作了呀？

也许经过多次的布局修改和调整，咱们的界面已经非常乱了，针对这种情况，Qt Designer提供了一个解决方法彻底修改布局：鼠标右键单击已存在的布局，在弹出的快捷菜单中选择“布局” —>“打破布局”。

好了，今天咱们就先讲到这里吧。

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

快乐编程，快乐成长！

python qt