Python UI设计学习笔记，第二课：创建主窗口

第2课：创建主窗口 @2021.10.19、2021.10.23

1. 创建组织工程文件夹目录

• 根目录
  • main.py:启动程序
  • qt_core.py：qt库导入管理程序
  • gui folder：UI设计文件存放处
    • windows folder：窗口设计
      • main_window:主窗口设计文件夹
        • ui_main_window.py： 用代码拼出UI主界面

2. 程序注释
   添加脚本开头的共同注释部分（增加中文翻译）, 也可以使用 PyCharm 自带的创建py文件自动加抬头注释。

# ///
#
# BY: Author name
# PROJECT MADE WITH: Qt Designer and PySide6
# V: 1.0.0
#
# This project can be used freely for all uses, as long as they maintain the
# respective credits only in the Python scripts, any information in the visual
# interface (GUI) can be modified without any implication.
#
# There are limitations on Qt licenses if you want to use your products
# commercially, I recommend reading them on the official website:
# https://doc.qt.io/qtforpython/licenses.html
#
# 这个项目可以被所有用户自由使用，只要他们只在Python脚本中保留各自的原作者信息，
# 可视界面(GUI)中的任何信息都可以被修改而不需要任何暗示。
# 如果你想在商业上使用你的产品，Qt许可证是有限制的，我建议你在官方网站上阅读它们
# ///

3. pyside6运行的最小框架

• qt_core.py：增加其他程序需要调用qt库的所有功能。

from PySide6.QtCore import *
from PySide6.QtGui import *
from PySide6.QtWidgets import *

• main.py: app 主程序，创建MainWindow类，继承自QMainWindow。

# IMPORT MODULES
import sys
import os

# IMPORT QT CORE
from qt_core import *

# MAIN WINDOW
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Python3.9 PySide6 Learning")
        # SHOW APP
        self.show()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    app.setWindowIcon(QIcon("icon.ico"))
    window = MainWindow()
    # window.show() # 展示我们的app 窗口,或者在MainWindow()构造函数中写self.show()
    sys.exit(app.exec())

4.工程文件结构优化

• 使用独立的py文件ui_main_window.py，定义UI_MainWindow类,并且定义setup_ui方法。在setup_ui方法中在使用pyside6创建的UI界面类
• 在上述py文件中编写(使用 pyside6 创建&layout一系列控件)或复制来自 Qt Designer自动生成的UI界面代码

# IMPORT QT CORE
from qt_core import *

# MAIN WINDOW
class UI_MainWindow(object):
    def setup_ui(self, parent):
        '''parent: 一般由 main.py文件中MainWindow类的实例self变量作为父类，目的是UI_MainWindow实例做mai文件中的UI界面。
            通常，在main.py，这样调用setup_ui方法
                    # SETUP MAIN WINDOW
                    self.ui = UI_MainWindow()
                    self.ui.setup_ui(self)
        '''
        if not parent.objectName(): # 此判断，经测试，一定会进入
            parent.setObjectName("MainWindow") #TODO(wangjh-xm): 暂时不清楚setObjectName的作用效果。
            # print('test')

        # SET INITIAL PARAMETERS
        # ///
        parent.resize(1200, 720) # 重新设启动时的界面大小
        parent.setMinimumSize(960, 540) # 设置手动调整的最小尺寸

• main.py文件中的调用方式
• 导入UI_MainWindow类，并生成self.ui实例变量。通过 self.ui.setup_ui(self) 让self.ui作为MainWindow实例变量self的界面。

# IMPORT MODULES
import sys
import os

# IMPORT QT CORE
from qt_core import *

# IMPORT MAIN WINDOW
from gui.windows.main_window.ui_main_window import UI_MainWindow


# MAIN WINDOW
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Python3.9 PySide6 Learning")
        
        # SETUP MAIN WINDOW
        self.ui = UI_MainWindow()
        self.ui.setup_ui(self)

        # SHOW APP
        self.show()
if __name__ == "__main__":
    app = QApplication(sys.argv)
    app.setWindowIcon(QIcon("icon.ico"))
    window = MainWindow()
    # window.show() # 展示我们的app 窗口,或者在MainWindow()构造函数中写self.show()
    sys.exit(app.exec())

5. ui_main_window.py代码增加：实现典型UI布局设计: menu(左侧) + content(右侧)
   

QFrame画布的作用:主要控制边框样式，继承自QWidget
主要思路:

• 创建一个中央画布central_frame
• 创建主布局main_layout，设定中央画布中的控件布局方式是水平(H,推荐)/垂直(V)布局
• 创建一个左侧菜单画布left_menu，同时创建一个右侧内容画布content，通过CCS格式，设定其背景颜色，便于区分不同画布
• 调用主布局增加窗口的方法 main_layout.addWidget，将左右侧画布依次加到主布局中
• 设置父类中央窗口parent.setCentralWidgets是中央画布central_frame
  

美化思路：

• 在主布局中，边缘间隔setContentsMargins设定成0，左右画布中间间隔setSpacing也设置成0
  

• 左菜单栏最大宽度(水平布局)/高度(垂直布局) setMaximumWidth/setMaximumHeight，设定成50

  • 水平布局
    

# IMPORT QT CORE
from qt_core import *

# MAIN WINDOW
class UI_MainWindow(object):
    def setup_ui(self, parent):
        '''parent: 一般由 main.py文件中MainWindow类的实例self变量作为父类，目的是UI_MainWindow实例做mai文件中的UI界面。
            通常，在main.py，这样调用setup_ui方法
                    # SETUP MAIN WINDOW
                    self.ui = UI_MainWindow()
                    self.ui.setup_ui(self)
        '''
        if not parent.objectName():  # 此判断，经测试，一定会进入
            parent.setObjectName("MainWindow")  # TODO(wangjh-xm): 暂时不清楚setObjectName的作用效果。
            # print('test')

        # SET INITIAL PARAMETERS
        # ///
        parent.resize(1200, 720)  # 重新设启动时的界面大小
        parent.setMinimumSize(960, 540)  # 设置手动调整的最小尺寸
        
        # CREATE CENTRAL WIDGET
        self.central_frame = QFrame()

        # CREATE MAIN LAYOUT
        self.main_layout = QHBoxLayout(self.central_frame)
        self.main_layout.setContentsMargins(0, 0, 0, 0)
        self.main_layout.setSpacing(0)

        # LEFT MANU
        self.left_menu = QFrame()
        self.left_menu.setStyleSheet("background-color: #44475a")
        self.left_menu.setMaximumWidth(50)

        # CONTENT
        self.content = QFrame()
        self.content.setStyleSheet("background-color: #282a36")

        # ADD WIDGETS TO APP
        self.main_layout.addWidget(self.left_menu)
        self.main_layout.addWidget(self.content)

        # SET CENTRAL
        parent.setCentralWidget(self.central_frame)

• 垂直布局
  

# IMPORT QT CORE
from qt_core import *

# MAIN WINDOW
class UI_MainWindow(object):
    def setup_ui(self, parent):
        '''parent: 一般由 main.py文件中MainWindow类的实例self变量作为父类，目的是UI_MainWindow实例做mai文件中的UI界面。
            通常，在main.py，这样调用setup_ui方法
                    # SETUP MAIN WINDOW
                    self.ui = UI_MainWindow()
                    self.ui.setup_ui(self)
        '''
        if not parent.objectName():  # 此判断，经测试，一定会进入
            parent.setObjectName("MainWindow")  # TODO(wangjh-xm): 暂时不清楚setObjectName的作用效果。
            # print('test')

        # SET INITIAL PARAMETERS
        # ///
        parent.resize(1200, 720)  # 重新设启动时的界面大小
        parent.setMinimumSize(960, 540)  # 设置手动调整的最小尺寸
        
        # CREATE CENTRAL WIDGET
        self.central_frame = QFrame()

        # CREATE MAIN LAYOUT
        self.main_layout = QVBoxLayout(self.central_frame)
        self.main_layout.setContentsMargins(0, 0, 0, 0)
        self.main_layout.setSpacing(0)

        # LEFT MANU
        self.left_menu = QFrame()
        self.left_menu.setStyleSheet("background-color: #44475a")
        self.left_menu.setMaximumHeight(50)

        # CONTENT
        self.content = QFrame()
        self.content.setStyleSheet("background-color: #282a36")

        # ADD WIDGETS TO APP
        self.main_layout.addWidget(self.left_menu)
        self.main_layout.addWidget(self.content)

        # SET CENTRAL
        parent.setCentralWidget(self.central_frame)