|从零开始的Pyside2界面编程|绘图、布局及页面切换

🐑 |从零开始的Pyside2界面编程| 布局及页面切换🐑

♈前言♈

经过两周的学习自己设备的前端也算是完成了一小半了，最起码把自己的算法都放进去以及控件间的交互也完成的差不多，剩下的就是拓展一些内容了，这周的博客就来记录一下最近做的一些内容，主要就是包含在前段界面对ui界面的一些布局处理，以及增加页面切换的内容。

♈页面切换♈

先来介绍一下页面切换的部分，大致就是创建两个页面后给前一个页面的控件加一个交互的操作，一般都是按钮pushbutton，然后再执行后进入到下一个页面并且关闭或者维持前一个页面，就类似于登录界面。大概就类似于下面这个图的效果（主界面没怎么做就先不展示了）

首先就是创建两个ui界面，我这里就直接用QTdesigner进行创建了。


然后我们需要实现的是在点击第一个页面的登录按钮后能够跳转到第二个界面并把第一个界面关闭，因此第一个登录界面需要加一个QpushButton,我这里把他命名为loginbutton。然后后面直接上代码。

from PySide2.QtWidgets import QApplication, QWidget, QPushButton
from PySide2.QtUiTools import QUiLoader
import sysclass FirstWindow(QWidget):def __init__(self):super().__init__()self.ui = QUiLoader().load("login.ui")self.ui.loginbutton.clicked.connect(self.open_second_window)def open_second_window(self):self.second = SecondWindow()self.second.show()self.ui.close()  # 关闭第一个UI窗口

我把第一个ui界面保存为login.ui，第二个保存为test.ui。首先第一个类FirstWindow就是对login.ui的创建，初始化的时候由于这里只用到了一个loginbutton因此其他文本框什么的就没有加，直接就只初始化了一个self.ui.loginbutton.clicked.connect(self.open_second_window)，也就是当点击loginbutton的时候就去执行open_secone_window这个方法。而open_secone_window这个方法的实现也很简单，就是打开第二个ui界面和关闭第一个ui界面

class SecondWindow(QWidget):def __init__(self):super().__init__()self.ui = QUiLoader().load("test.ui")if __name__ == "__main__":app = QApplication(sys.argv)window = FirstWindow()window.setWindowTitle('登录')window.ui.show()sys.exit(app.exec_())

这部分是第二个ui界面的创建和主代码。

♈页面布局♈

然后就来看一下页面布局，也就是 layout的部分，本来我们在qt页面中所设计的ui界面是无法随着界面的放大和缩小控制里面的控件也跟着放大和缩小的，但如果我们加入了一个全局的layout就可以做到全局的放大和缩小，增加layout同样也是代码实现和qtdesigner实现都可以，这里展示一下qtdesigner实现。
首先来看一下布局的方式，在界面的左上方有一列layouts

比较常用的就是前三个，分别是水平布局、垂直布局以及栅格布局。我这个登录的界面就是用的一个全局的垂直布局，因为要让文本框和两个按钮垂直排列在一起。
我这里的实现步骤就是首先把两个文本框放在一起做一个垂直布局然后把两个按钮也放在一起做一个垂直布局，也比较推荐这种先把一小部分放在一个布局里面，最后用总的布局去布局小布局的形式，这种方式会使得结构比较清晰，而且在独立控制每个控件间距和对齐形式的时候会比较容易，我这个ui界面因为比较小，元素也不多所以比较难体现出这种好处，但是当控件元素比较多的时候就会很容易体现出。下面一步一步简单演示一下。
首先我们来给两个文本框做一个垂直布局，同时选中这两个文本框然后右键点击在菜单栏中选择布局，垂直布局。

然后拖动布局大小调整一个比较合适的大小

在右侧的属性栏中，我们可以调节布局中控件之间的距离以及边缘布局距离控件的距离，加入我们想把两个文本框放在控件的中间位置，可以退通过设置leftmargin和rightmargin来实现

现在我们把左右边缘调整至100可以看出在控件距离布局边缘位置100的时候可以有一个居中的效果。然后我们可以通过上方菜单栏中的’窗体’、‘预览’来实时查看效果。

从预览中可以看出两个控件相隔距离略大，此时可以通过调整layoutspacing或者直接拖动布局来控制间隔，我们将他调小一点

调整后的效果

同样的操作运用在下方两个按钮上面

最后我们在右侧对象查看器的地方设置全局布局为垂直布局

设置好了以后就根据全局布局后的预览效果来一点点调整

我这个就属于第一个文本框的布局将控件的距离调整的过小并且由于全局布局后将局部的布局拉大使得第一开始设置的margin过于小，并且按钮的布局也是margin 比较小，那么依次将文本框的距离增大并且分别调整两个局部布局的margin，这里需要注意的是当我们全局布局结束后，就不可以在拖动局部布局以及控件的大小了所以只能通过属性栏的调整来达到自己想要的效果。
由于此时整个框体的大小为712*557所以对第一个layout做了如下调整

同理也调整一下第二个布局，调整后可以看一下总体效果。

如果不希望在正式使用时，用户将页面放大或者缩小，我们可以通过点击最上层控件将其minimumSize和maximumSize来设置为当前页面大小。下图蓝色箭头为当前页面大小。

此时这一步就算是完成了。

♈总结♈

这一次的博客比较简短，主要也是这周熬得太狠了，从零开始学习界面编程并且还要整自己硬件的通讯协议和算法让他在ui界面实现，但好在结果也还行，也算是越来越熟练了目测再过两周就能完整做完，但也快要到比赛的ddl了，只能说再接再厉吧。