初级布局讲解：木辛老师带你实战多种布局管理
初级布局讲解：木辛老师带你实战多种布局管理然后，我们来看一下如何放置这个按钮，即这个按钮的尺寸和位置修改按钮显示文本的方法有两个让我们通过实战，来进一步巩固学过的知识吧。打开Qt Designer，新建一个主窗口（Main Window），然后从左侧的Buttons栏拖拽一个QPushButton到主窗口中，并将按钮的显示标签修改为“计算”添加按钮
通过前几节课的学习，我们已经基本上掌握了使用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代码会是什么样子吧
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代码转换的效果吧
Python代码转换
通过这个源代码，可以看出：只要实例化QGridLayout对象，就可以生成一个grid layout一个对象，将对应控件加入到这个布局管理器中，就可以将布局控制权交出给管理器了。
水平布局从Qt Designer的左侧的Spacers栏分别将Horizontal Spacer和Vertical Spacer窗口控件拖拽到主窗口中，从Display Widgets栏将Horizontal Line窗口控件拖拽到主窗口中，之后选择当前主窗口中所有控件，点击鼠标右键，在弹出的快捷菜单中选择“布局” —>“水平布局”，看看效果。
使用水平布局
我们通过Qt Designer的菜单栏中“窗体”中的预览选项，或者使用快捷键command R既可以尽心预览效果，非常方便哟！
使用预览查看
学习了这么多布局管理器对窗体进行布局，大家已经是不是已经熟悉了布局的基础操作了呀？
也许经过多次的布局修改和调整，咱们的界面已经非常乱了，针对这种情况，Qt Designer提供了一个解决方法彻底修改布局：鼠标右键单击已存在的布局，在弹出的快捷菜单中选择“布局” —>“打破布局”。
好了，今天咱们就先讲到这里吧。
请持续关注木辛老师的编程课哟，后续更多精彩陆续到来！
快乐编程，快乐成长！
