使用布局管理来调整控件

通过前面的学习，我们掌握了一些基本的GUI控件，比如QLabel, QPushButton, QCheckBox, QRadioButton, QLineEdit, QTextEdit等，也学习了PyQt的四种布局管理,了解如何使用Qt Designer来实现可视化布局，在本文中，我们将综合运用这些知识，使用Qt Designer，综合运用各种布局管理来来实现一个简单的个人信息登记界面。

假设我们已经用Qt Desingner拖曳一些控件到界面上，并进行了相应的命名，和大致的位置摆放, 如图所示:

我们的最终目标窗口的摆放位置如图二所示：

操作步骤简述：

• 按住CTRL键，点击鼠标左键，选中名字为"男"和"女"的两个QRadioButton,松开CTRL键，点击工具栏上的水平布局，将"男"和"女"QRadioButton置于一水平布局下；
• 同样操作方式将"音乐"，"体育"和"旅游"三个QCheckBox置于一水平布局下；
• 同样操作方式将"保存"和"取消"两个QPushBotton置于一水平布局下；
• 调整布局，标签"昵称"和对象名称为leNickname的QLineEdit布局大致放一水平线, 其他四种情况类似操作，大致为QFormGrid布局管理后的界面布置；
• 按下鼠标左键，从左上角向右下角拉动，选中所有布局到QFormLayoutGrid中的控件，然后点击工具条上的Form布局按钮，完成对选中控件的Form布局；
• 调整Form布局中label域和field域间隔，选中Form布局,在右边的属性编辑栏中，将其layoutHorizontalSpacing的间隔调整为20；
• 在Form布局和"保存"/"退出"按钮所在的水平布局之间添加一垂直Spacer（“弹簧”）；
• 在右边的对象列表栏，选中centrawidget,点击点击工具栏上的垂直布局，将主窗口的布局设置为垂直布局。

按CTRL+R预览布局，看看是否达到预设目标，如果有偏差，可进行调整。操作过程如图3动态显示。

测试

将ui文件保存为demo3.ui,并将其转换成Python代码文件为 Ui_demo3.py. 创建文件qtdesignerdemo3.py 在其中创建类 DesignerDemo3，并在其中导入Ui_demo3的Ui_MainWindow，并作为主窗口显示，qtdesignerdemo3.py完整代码如下：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox
from Ui_demo3 import Ui_MainWindow
 
class DesignerDemo3(QMainWindow):
    def __init__(self, parent=None):
        super(DesignerDemo3, self).__init__(parent)
        ui = Ui_MainWindow()
        ui.setupUi(self)
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DesignerDemo3()
    window.show()
    sys.exit(app.exec())

运行结果如下图：

本文知识点

• 在Qt Designer中多种方式选中多个控件；
• 布局嵌套；
• 创建对象的方式使用UI生成的python对象。

喜欢本文内容就收藏，点赞，评论，关注和转发。