当前位置：网站首页 > 技术资源 > 正文

木辛老师的编程课堂:Python和Qt第2讲之布局管理初探(三)

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

在主窗口中放置多个控件，最好的方法是使用布局。控件的布局是学习PyQt路上比较关键也也是比较难理解的部分，赶快跟着木辛老师一起去看看吧。
请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~

同学们好！

在之前的课程里，传送门：《木辛老师的编程课堂：Python和Qt第2讲之QtDesigner的使用（二）》

我们尝试将一个按钮放置到了主窗口中，如果需要放置更多的控件，则可以从左侧的工具箱中拖拽更多的控件到主窗口上。

不过，控件过多之后，管理是比较棘手的。Qt Designer提供了布局的管理方式，方便管理多个控件的布局情况。

布局方式

Qt Designer提供了4中窗口布局方式

Vertical Layout（垂直布局）
Horizontal Layout（水平布局）
Grid Layout（栅格布局）
Form Layout（表单布局）

他们位于Qt Designer主窗口左侧区域的工具箱里的Layouts（布局）栏中。

垂直布局：控件默认按照从上到下的顺序进行纵向添加

水平布局：控件默认按照从左到右的顺序进行横向添加

栅格布局：将窗口控件放入一个网格之中，然后将他们合理的划分成若干行（row）和列（column），并把其其中的每个窗口控件放置在合适的单元（cell）中，这里的单元即是由行和列划分出来的控件。

表单布局：控件以两列的形式布局在表单中，其中左列包含标签，右列包含输入控件

在Qt Designer中，进行布局有两种方式：一是通过布局管理器进行布局；二是通过容器控件进行布局。

利用布局管理器布局

咱们做个例子试试吧

打开Qt Designer（大家还记得如何打开Qt Designer工具吗？传送门：《木辛老师的编程课堂：Python和Qt第2讲之QtDesigner的使用（一）》）。

新建一个主窗口

然后将一个输入文本框和一个按钮拖拽都主窗口上

选中这两个控件之后，点击鼠标右键

在“布局”菜单中选择“水平布局”；

Qt Designer会自动将两个控件水平对齐

就如上图所示。

这样，我们通过Qt Designer简单的拖拽和选择，就完成了一个水平方向布局的美观的控件组合了！

我们保存一下这个.ui文件。

最后通过，PyCharm的插件将这个.ui文件转换成.py文件。

通过上方的源代码，我们可以看到：

我们定义的输入文本框和按钮，已经被放入了一个QHBoxLayout的水平布局的widget里了。

这样，两个控件就会根据实际情况，自动水平对齐。

重点指出：QPushButton和QLineEdit两个空间在实例化的时候，指定了QWidget作为其父控件，布局对象QHBoxLayout指定的父控件也是QWidget。

咱们再回到Qt Designer，看一下控件和窗口之间的层次关系哈

可以看到，与转换后的Python代码一样，QPushButton和QLineEdit也是归属到widget中的；通过这个对象查看窗口，我们也可以方便地看出窗口 —> 布局—> 控件的之间的层级关系。窗口一般作为顶层显示，然后将控件按照我们的布局方式进行排列。

利用容器进行布局

另外一个管理布局的方式，是通过容器的进行布局的管理。

所谓容器控件，就是指能够容纳子容器的控件；使用容器控件，就是将容器控件中的控件归为一类。当然了，使用容器控件也可以对它的子控件进行布局，只不过呢，没有布局管理器常用。

我们还用刚才的例子，将主窗口中的控件全都删除。

然后，在左侧的容器导航栏中拖入一个Frame控件，然后在其中放入一个QLabel，一个QLineEdit，一个QPushButton控件。

选中Frame控件，并点击鼠标右键，选择“布局” —> “水平布局”，就可以得到如下图所示的效果了，是不是很简单呀~

之后，我们通过PyCharm的插件PyUIC工具将.ui文件转换为.py文件，就可以直接调用使用了。

咱们一起来看一下转换后的文件的比较重要的地方吧????

self.frame = QtWidgets.QFrame(self.centralwidget)
self.frame.setGeometry(QtCore.QRect(150, 80, 378, 64))
self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
self.frame.setObjectName("frame")
self.horizontalLayout = QtWidgets.QHBoxLayout(self.frame)
self.horizontalLayout.setObjectName("horizontalLayout")
self.label = QtWidgets.QLabel(self.frame)

可以看到，咱们尽管使用了容器进行空间的布局，但是本质上还是通过QHBoxLayout 调用了布局管理器进行的。

经过如上的操作，我们已经初步的了解了如何通过Qt Designer工具进行布局设计，并学到了Qt Designer提供的4中布局管理方式；

咱们通过实例，练习了其中的水平布局，其他的布局方式请同学们自己尝试一下吧，如果有任何问题欢迎随时给木辛老师发送私信哟！

好了，今天的课程就到这里吧，请持续关注木辛老师的编程课哟，后续更多精彩陆续到来！

快乐编程，快乐成长！

python qt