qtdesigner页面布局

---

前言

最近学习pyqt5来编写GUI界面，发现qtdesigner这个工具是在是太好用了，不仅能很方便的设计页面，还能很快捷的将设计出来的界面转换成代码。下面做一下学习笔记。

---

一、四大布局

打开qtdesigner工具，界面大致如下，左边是存放各种控件的控件库；中间是设计GUI界面的窗口；右边是设置各种控件参数的窗口。
在这里，首先做一个简易的登录界面。

然后快捷键ctrl+R就能够预览实际运行的效果

但这时候你会发现里面的控件不能随窗口的拉大而改变位置，这时候就要用到布局了。先介绍一下四大布局

水平布局(HorizontalLayout)

顾名思义，就是把控件水平排列

垂直布局(VerticalLayout)

顾名思义，就是把控件垂直排列

栅格布局(GridLayout)

大致排列好控件位置，设置布局之后会把控件更规范的排列，大小也会自动适配，缩放布局的时候里面的控件也会跟着缩放。

表单布局(FromLayout)

跟栅格布局差不多。

设置布局方法：
选中要进行布局的控件，然后点击布局即可

延伸

一、使得控件随窗口缩放而缩放的方法

需要给整个窗口加布局，点击窗口类，在选择布局

二、布局之上再设置布局

布局不仅可以给控件设置，也可以给布局设置。下面页面的布局是：先给每一行的两个控件设置为水平布局，然后给上水平布局设置垂直布局。这样也能达到表格布局的效果。

二、布局参数

点击布局之后会看到下面参数

layoutName：布局名
layoutLeftMargin：左间距，跟css里面的margin一样是外边距的意思
layoutRighttMargin：右间距
layoutTopMargin：顶部间距
layoutBottomMargin：底板间距
layoutHorizontalSpacing：控件之间的间距
分别对应下面位置的间距

layoutRowStretch：每一行的高度比
layoutColumnStretch：每一列的宽度比
如layoutColunmStretch设置为1,4，那么就相当于把布局的宽度分为5份，第一列占1份。第二列占4份

layoutRowStretch的设置也是同样的道理。

因为当前布局行方向和列方向都是只分成了两个部分，所以只有两个参数(a,b)，如果是分成3部分的话会有三个参数(a,b,c)，分成4部分就会有四个参数，以此类推。

三、ui文件转换成py文件

布局完之后，保存文件会发现是ui文件而不是py文件，它们之间要怎么转换呢？
这个不难，只要输入下面命令就可以了

pyuic5 -o demo.py demo.ui

demo.py

但生成的代码只是构建页面的代码，不能直接运行，在这里新建一个py文件引用界面代码并运行
demo_main.py

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication

from demo import Ui_Form


class DemoMain(QMainWindow, Ui_Form):

    def __init__(self):
        # 初始化父类
        super().__init__()
        # 调用Ui_Form的setupUi()方法构建页面
        self.setupUi(self)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    # 实例化页面并展示
    demo_win = DemoMain()
    demo_win.show()

    sys.exit(app.exec_())

这样就可以运行了。

不过这里可能会有人有疑问：为什么不直接在生成的py文件里面写执行显示页面的代码呢？
因为一个界面可能会经过很多次修改，每次修改页面后生成的代码会覆盖之前的代码，那么其中的一些逻辑函数和执行函数又要根据新代码来重新编写。相信我，你并不希望这样。
ui对应的代码和逻辑代码分开的好处是，无论你如何修改ui，逻辑代码那边因为只是引入了ui代码，所以无需重新编写，只需要添加新的逻辑代码就好

---

总结

qtdesigner是个很强大的工具，可以帮助我们快速方便开发GUI界面。有什么问题欢迎在评论区留言。