栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

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

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

文章目录
      • 第2课:创建主窗口 @2021.10.19、2021.10.23

第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主界面
  1. 程序注释
    添加脚本开头的共同注释部分(增加中文翻译), 也可以使用 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许可证是有限制的,我建议你在官方网站上阅读它们
# ///
  1. 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())
  1. 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)
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/853224.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号