刚接到通知,要我用Designer设计,说后面只需要更改ui文件就行,让我看看怎么实现。还让我先实现一个demo原型来完善需求。我真的麻了,没人教啊。
那么我们先熟悉pyside6自带的designer吧
vscode配置插件
其实很简单,知道pyside6包在哪基本就行。安装Qt for Python插件
然后在扩展设置里,找到路径设置。一共有三个,分别是designer和rcc以及uic
这三个都在python文件夹下的Sripts文件夹下,如果是anaconda的虚拟环境,就需要进入envs\虚拟环境\Scripts。
填完路径,你的右键就可以新建一个UI File了,直接进入designer。
QLayout
layout是什么?为什么要使用layout?怎么使用?
首先接触过css的肯定知道layout就是一种布局,在qt中layout的继承结构如下:
它并不是QWidget的子类,因此并没有QWidget类相关的属性和功能,唯一的作用就是排版布局,实际上QWidget类本身就具有一个layout属性。
除了布局,layout还有一个比较重要的功能,那就是让组件随着窗口移动而移动。比如默认的效果是,随着窗口的增大,里面的各个组件也会变化。
选择一个对象,然后在工具栏点击就可以更改其内部的布局。
布局的使用可以方便的进行排版,可以调整QLayout中的参数来实现各种各样的效果。
可以在右侧的属性编辑器里修改layout中的属性,来控制内部组件之前的距离等等。
基本框架
实现效果如图所示:
我们首先创建一个MainWindow窗口,这个窗口就是我们以后的主窗口。
之前说过,主窗口自带一个菜单栏和状态栏,以及零或多个工具栏。
首先是菜单栏。
designer以及给出了位置,不过由于一些bug,菜单栏中输入不了中文,可以通过粘贴,或者先输入英文后续再修改的方式变成中文。
其次是工具栏,工具栏首先需要添加一条工具栏,然后向工具栏中添加动作
随后将创建好的动作,拖动到工具栏即可
然后就是中间QWidget的设计了。
中间的部分我需要划分为三个部分,分别是选项,展示以及工具部分。这三个部分全部使用QWidgets也没关系,因为目前我还不了解业务逻辑,也不知道怎么写。
不过还是有些细节需要注意。
每个部分需要设定最小的宽度和高度,否则随着窗口被缩小,这些部分就一点信息都展示不了。
其次如何给每个部分设定固定的比例呢,比如我想要1:2:1的宽度,这样会好看一下,那么就需要学习,sizepolicy
这个属性。或者也可以设置mininumSize
这一部分我还不太清楚。目前还在学习,有些地方没搞懂。
最后就是将ui文件保存,一般来说,会自动编译成py文件,如果找不到,就手动编译,如果配置好的话,右键ui文件,找到编译选项即可。
最后,实现简单的界面设计和业务逻辑分离
import sys
from PySide6.QtWidgets import QApplication, QLabel, QMainWindow
from ui_mainwindow import Ui_MainWindow
import qdarkstyle
class MyMainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None):
super(MyMainWindow, self).__init__(parent)
self.setupUi(self)
if __name__ == '__main__':
app = QApplication(sys.argv)
mainWin = MyMainWindow()
app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api='pyside6'))
mainWin.show()
sys.exit(app.exec())
我还导入一个qdarkstyle包,在主函数中加载这个包的qss文件即可。
最终得到一个基础的框架。
下一步,我的任务是,继续学习布局以及实现页面切换,包括了如何单独设计一个QWidget,并把这个Qwidget嵌入到MainWindows中,也就是模块化的设计。