PyQT5 入门教程(之二)

2021年11月23日 阅读数:3
这篇文章主要向大家介绍PyQT5 入门教程(之二),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

REFless

https://www.jianshu.com/p/3832eb48f3d5编辑器

 

布局(Layout)管理

Qt Designer中,在工具箱中最上方能够看到有4种布局。分别是垂直布局、水平布局、栅格布局和表单布局工具


 

 


四种布局
布局名称     布局含义
垂直(Vertical)布局     布局内的控件按照从上到下的顺序纵向排列
水平(Horizontal)布局     布局内的控件按照从左到右的顺序横向排列
栅格(Grid)布局     将控件放入栅格中,而后划分红若干行与若干列,而且将每一个窗口控件放在合适的单元中
表单(Form)布局     控件以两列布局在表单中,左列包含标签,右列包含输入控件

在Qt Designer中实现布局有两种方式,经过布局管理器进行布局和经过容器控件进行布局。
布局管理器

让咱们在左侧的工具箱中随意拖动一些诸如按钮、标签、输入框等控件到主窗口中。

很随意的主窗口
布局

 

 


因为刚才是随意拖拽至主窗口,所以全部控件的排放是乱七八糟的。此时,咱们不选中任何控件,在空白处点击右键,找到弹出菜单最下方的Layout布局。

右键菜单学习

 

 


能够看到,在右键菜单中能够指定布局的方式以及相应布局方式的快捷键。这里咱们选择Lay Out Vertically(垂直布局),整个主窗口内的全部控件一瞬间都垂直着排列整齐了。
垂直布局的效果
ui

 

 


此时若是须要调整垂直布局的顺序,只需按住待调整的控件,上下拖动便可。可是这样布局是针对整个窗口的,有时咱们须要让不一样的布局有父子关系的继承。那么这时就不能单纯地在空白的地方点击右键来布局了。
让咱们再次点击 右键 -> Lay Out -> Break LayOut 来打开(取消)布局。this

 

 

选中须要水平布局的2个控件(ctrl+鼠标单击),选中后点击右键,水平布局。再选中另外两个控件(ctrl+鼠标单击),选择水平布局。此时的主窗口应该如图所示:
spa

 

 


2个水平布局

最后,咱们再将两个布局选中(框选),点击右键垂直布局,来排列两个水平布局。
将两个水平布局垂直布局
3d

 

 


最后在空白区域再次使用垂直布局。这样即便咱们缩放窗口,整个窗口内的控件也会跟着窗口的变化作出相应改变了。
最终效果
code

 

 


在上述操做的过程当中,咱们的一系列操做有决定这些物体的父子关系(层级关系)。而其层级关系在对象查看器中能够直观地看出。

 

 


对象查看器中的层级关系

 


布局管理生成的代码

让咱们把前面制做的布局保存为.ui文件,并使用PyUIC转换为.py文件。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'firstQTui2.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(488, 303)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.verticalLayout = QtWidgets.QVBoxLayout()
        self.verticalLayout.setObjectName("verticalLayout")
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout.addWidget(self.pushButton)
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setObjectName("label")
        self.horizontalLayout.addWidget(self.label)
        self.verticalLayout.addLayout(self.horizontalLayout)
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.checkBox = QtWidgets.QCheckBox(self.centralwidget)
        self.checkBox.setObjectName("checkBox")
        self.horizontalLayout_2.addWidget(self.checkBox)
        self.radioButton = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton.setObjectName("radioButton")
        self.horizontalLayout_2.addWidget(self.radioButton)
        self.verticalLayout.addLayout(self.horizontalLayout_2)
        self.verticalLayout_2.addLayout(self.verticalLayout)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 488, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.label.setText(_translate("MainWindow", "TextLabel"))
        self.checkBox.setText(_translate("MainWindow", "CheckBox"))
        self.radioButton.setText(_translate("MainWindow", "RadioButton"))

 


从上面的代码中,咱们找到关键的几行。如定义label的时候,是以下代码:

        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setObjectName("label")
        self.horizontalLayout.addWidget(self.label)


其中,最后一行将label添加为了horizontalLayout的子物体。

        self.horizontalLayout_2.addWidget(self.pushButton)
        self.verticalLayout_3.addLayout(self.horizontalLayout_2)
        self.verticalLayout_4.addLayout(self.verticalLayout_3)



后面的几行代码,如verticalLayout_3将horizontalLayout_2做为了其子物体;verticalLayout_4将verticalLayout_3做为了其子物体。这些都是与咱们在Qt Designer中作的操做是同样的。


使用容器进行布局

容器(Container)指的就是能容纳其余子控件的一个控件。使用容器控件能够将容器控件中的全部控件归为一类,从而区别于其余的控件。固然,正如上文提到过的,使用容器也能够对控件进行布局。

 

 


工具盒中的容器控件

首先,从左侧的Container中拖出一个Frame控件到主窗口中,再拖出一个label、line edit和push button到Frame中。此时Frame中的控件应该是以下图:

 

 


杂乱的Frame

但选中Frame控件,点击 右键-> Lay Out -> Lay Out Horizontally 则会自动水平排列Frame中的三个控件。

 

 


水平布局Frame中的控件

当咱们须要变动Frame的位置的时候,能够直接拖动Frame到相应地位置,这样管理更加方便。使用容器进行布局的实质也是使用容器管理器进行布局的。
绝对布局

咱们前面的学习重点放在了布局管理器上面。可是最简单的布局则是之间输入控件的Geometry属性值。

 

 


属性编辑器


在属性编辑器中,咱们经过修改X Y值来将控件放置在相应地位置,经过修改Width和Height来更改其高度。让咱们经过以下表格来解读一下这个Button的Geometry属性。
名称     值     含义
X     290     控件的最左上角距离主窗口的左侧290px
Y     140     控件的最左上角距离主窗口的上方140px
Width     93     按钮的宽度为93px
Height     28     按钮的高度为23px

而上述的Geometry属性在.py代码中是以下体现的:

self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(290, 140, 93, 28))
self.pushButton.setObjectName("pushButton")

 



能够看到,上述代码的第二行经过setGeometry方法指定了Geometry属性的四个值。经过以上的方法,咱们能够对任何一个控件进行布局。