PyQt窗口布局管理
date
May 27, 2020
Last edited time
Jun 27, 2021 06:38 AM
status
Published
slug
pyqt_basic_5
tags
PyQt
summary
type
Post
Field
Plat
这节课很重要。。界面整洁美观与否就看布局了。。这里讲布局方法,至于设计的天赋与最终界面的美感那就看造化了。。
本文主要讲述 Qt Designer 工具实现界面控件布局管理,就是排列组合控件。包括水平布局、垂直布局、网格布局、表单布局。至于绝对布局太复杂。。短期内 hold 不住
方法一:Qt Designer -> Form 菜单栏
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7598fb55-c367-4c0d-9658-a70af618653d%2FUntitled.png?table=block&id=c20a9261-7895-4511-ad8c-a73252d7a9f1&cache=v2)
方法二:右键单击主窗口 -> Lay out
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2cdbf774-2b77-45e2-bb42-0d4f3ee83fee%2FUntitled.png?table=block&id=f7e55470-7ecb-4871-8cb2-c6cf487c7b85&cache=v2)
(1)水平布局 Lay Out Horizontally:被选中的控件在水平方向上从左到右排列。杂乱无章的四个控件水平布局后效果如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8d5443dc-bc64-43b8-9df3-bdf77e8d4d9d%2FUntitled.png?table=block&id=75205824-9c93-41e2-940b-f424a62a5f03&cache=v2)
(2)垂直布局 Lay Out Vertically:被选中的控件在垂直方向上依次排列。杂乱无章的四个控件垂直排列后效果如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F63f1c8ab-bdd1-4e8b-89a2-79eb48333082%2FUntitled.png?table=block&id=dae30c99-f174-45b1-b90e-e3ba13554da5&cache=v2)
(3)表单布局 Lay Out in a Form:控件以 2 列的形式布局在表单中。左列包含标签(label),右列包含输入控件。 用户名和密码相关的四个控件组合表单布局。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3b30a945-c669-414f-aa57-e2ff960e1cd8%2FUntitled.png?table=block&id=3b1bd483-aef2-496b-8281-fb8a3cea1e02&cache=v2)
(4)网格布局 Lay Out in a Grid:网格布局是将窗口分隔成行和列的网格来进行排列。被选中组合的控件以网格的形式排列。参考如下。。好像也不美观。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F61a7480f-3af4-4ead-832e-ea422e25db2e%2FUntitled.png?table=block&id=cc9cd91c-2673-47fe-b9a2-74a8c7aa64e8&cache=v2)
界面控件类型简单可以考虑采用上述四种布局方式进行单一布局。但是控件类型多样化的话就要考虑布局的嵌套了。就是分析控件的特点,采用不同布局方式组合控件。
如下主窗口中用户名 + 密码的标签 + 单行输入框控件组合使用表单布局,然后与登录 + 退出控件使用垂直布局,最后与显示文本框采用网格布局。具体效果如下
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff3f9c646-7c27-4fcf-9322-d5a051b67aaf%2FUntitled.png?table=block&id=5b6d3ea8-e1b9-417a-a6eb-f38d0295256f&cache=v2)
注意:组合控件使用的布局如果需要打破布局,可以通过选择组合的控件,然后单击菜单 Form -> Break Layout 方式进行打破布局。实际上使用撤销也可以。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F56f59196-42c1-4375-9972-02d958712e20%2FUntitled.png?table=block&id=d110785b-22e3-47e6-a29c-9e639d58a006&cache=v2)
某些时候采用布局管理工具完成的界面设置并不满足你的要求,可以考虑修改控件 geometry 属性相对坐标及长、框的方式进行对齐。geometry 属性在 PyQt 中主要用来设置控件在窗口中的绝对坐标与控件自身的大小。如下图所示。对于包含控件类型及个数不多的界面可以考虑采用这种方式。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2c5a7046-f616-4cc0-8baa-7ff6c3e2c545%2FUntitled.png?table=block&id=06eb9f23-487c-4b86-97d1-cadfc452b33e&cache=v2)
下面针对这几个控件的对齐简单描述一下。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5949a6cd-e059-434e-a1f9-a2e3e02396c0%2FUntitled.png?table=block&id=3ae13c61-8bf3-4962-92d6-f4e712954e80&cache=v2)
第一行中“获取整数”按钮与“lineEdit”两个控件对齐:控件 Y 轴数值、Height 长度值保持一致。控件间隔通过计算获取。这里两个控件间隔为 150-80-50=30
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff38a33b0-bcd3-4bf7-943e-d8e47540c290%2FUntitled.png?table=block&id=c4e61ff2-dfc2-42e6-8444-99b1152dec1e&cache=v2)
第一列“获取整数”和“获取字符串”控件对齐:保持 X 轴数值、Width 数值一致。列间间距为 80-31-30=19。这样“获取列表选项”控件也以间距 19 保持即可。
是不是很简单?如果觉得布局管理出来效果不好,就动手尝试一下这种方法把。。
1、采用绝对布局的方式进行控件布局。但是这种上手难度比较大,后面在实践过程中遇到有好的方法可以针对 Qt 界面布局管理后的效果进行优化的再补充介绍。
2、修改控件属性。通过修改控件的属性,比如最小尺寸、最大尺寸、长、宽、字体等等。比如我想针对小工具的需求我会经常使用固定最小尺寸、最大尺寸保持一致的方式,使主窗口及控件不受拉伸影响。
本文针对 Qt Designer 布局管理中的水平布局、垂直布局、网格布局以及表单布局的最最基本的使用方法和布局效果进行了基本介绍。内容都很简单,看完也很容易自己动手实践一下。当然还有很多其他辅助的方式(比如添加水平线、垂直线等)可以帮助完成界面更合理的布局,这个需要后面再进行探索。。有新的理解或者内容后续再更新本文。期望自己可以布局一个还能过的去的界面。。 https://www.cnblogs.com/linyfeng/p/11223709.html