1 pycahrm 安装

官网 https://www.jetbrains.com/pycharm/

2 python 安装

python.org 选择 python3.9
pyside6 support python3.6-python3.9

3 创建虚拟环境

3.9官方文档 ： https://docs.python.org/zh-cn/3/library/venv.html 

  1. # python3 -m venv /path/to/new/virtual/environment
  2. python3 -m venv ~/pyside6-env
  3. # 也可以在pycahrm 单独项目配置虚拟环境 我基本都使用这一个环境

4 创建新项目

image.png

4.1 创建完环境 安装pyside6

  1. pip install pyuic6

image.png

5 配置qt designer 和pyside6-uic

5.1 配置qt designer

ps： qt designer 是图形化qt 设计器，pyside6-uic 可以将 qtdesigner 创建的.ui 文件转化成py文件 的脚本
image.png

image.png

在虚拟环境下 路径下 找到 designer.app 例如 /Users/{bernie}/pysideenv/lib/python3.9/site-packages/PySide6/Designer.app
working directory 同上
image.png
image.png

5.2 配置pyside6-uic

image.png

  1. program: /Users/bernie/pysideenv/bin/pyside6-uic
  2. arguments:  $FileName$ -o $FileNameWithoutExtension$.py
  3. working directory: $FileDir$

6 测试成功

6.1 qtdesigner 画个hello world

打开qt designer

image.png

6.1.2 创建 widget text 框 并保存到 项目文件夹下

image.png

6.1.3

image.png

6.2 使用 pyside6-uic 将ui 文件 转化成 py文件

image.png

6.2.2 文件代码

image.png

  1. # -*- coding: utf-8 -*-
  3. ################################################################################
  4. ## Form generated from reading UI file 'untitled.ui'
  5. ##
  6. ## Created by: Qt User Interface Compiler version 6.1.1
  7. ##
  8. ## WARNING! All changes made in this file will be lost when recompiling UI file!
  9. ################################################################################
  11. from PySide6.QtCore import *  # type: ignore
  12. from PySide6.QtGui import *  # type: ignore
  13. from PySide6.QtWidgets import *  # type: ignore
  16. class Ui_MainWindow(object):
  17.     def setupUi(self, MainWindow):
  18.         if not MainWindow.objectName():
  19.             MainWindow.setObjectName(u"MainWindow")
  20.         MainWindow.resize(800, 518)
  21.         self.centralwidget = QWidget(MainWindow)
  22.         self.centralwidget.setObjectName(u"centralwidget")
  23.         self.textEdit = QTextEdit(self.centralwidget)
  24.         self.textEdit.setObjectName(u"textEdit")
  25.         self.textEdit.setGeometry(QRect(300, 130, 104, 71))
  26.         MainWindow.setCentralWidget(self.centralwidget)
  27.         self.menubar = QMenuBar(MainWindow)
  28.         self.menubar.setObjectName(u"menubar")
  29.         self.menubar.setGeometry(QRect(0, 0, 800, 24))
  30.         MainWindow.setMenuBar(self.menubar)
  31.         self.statusbar = QStatusBar(MainWindow)
  32.         self.statusbar.setObjectName(u"statusbar")
  33.         MainWindow.setStatusBar(self.statusbar)
  35.         self.retranslateUi(MainWindow)
  37.         QMetaObject.connectSlotsByName(MainWindow)
  38.     # setupUi
  40.     def retranslateUi(self, MainWindow):
  41.         MainWindow.setWindowTitle(QCoreApplication.translate("MainWindow", u"MainWindow", None))
  42.         self.textEdit.setHtml(QCoreApplication.translate("MainWindow", u"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n"
  43. "<html><head><meta name=\"qrichtext\" content=\"1\" /><meta charset=\"utf-8\" /><style type=\"text/css\">\n"
  44. "p, li { white-space: pre-wrap; }\n"
  45. "</style></head><body style=\" font-family:'.AppleSystemUIFont'; font-size:13pt; font-weight:400; font-style:normal;\">\n"
  46. "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">hello world</p></body></html>", None))
  47.     # retranslateUi

6.3 启动window

启动需要一个main.py 实例化该对象
整理下文件夹
image.png

  1. import sys
  2. from PySide6.QtWidgets import QApplication, QMainWindow
  3. from PySide6.QtCore import QFile
  4. from untitled import Ui_MainWindow
  7. class MainWindow(QMainWindow):
  8.     def __init__(self):
  9.         super(MainWindow, self).__init__()
  10.         self.ui = Ui_MainWindow()
  11.         self.ui.setupUi(self)
  12. if __name__ == "__main__":
  13.     app = QApplication(sys.argv)
  14.     window = MainWindow()
  15.     window.show()
  16.     sys.exit(app.exec())

6.4 效果

image.png