腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

pycharm開發(fā)一個簡單界面和通用mvc模板(操作方法圖解)

更新時間：2020年05月27日 11:20:04 作者：teamlet

這篇文章主要介紹了pycharm開發(fā)最簡單的界面和通用mvc模板的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

文章首先使用pycharm的 PyQt5 Designer 做一個簡單的界面，然后引入所謂的“mvc框架”。

一、設(shè)計登錄界面

下面開始第一個話題，使用pycharm的 PyQt5 Designer 做一個簡單的界面。

上一篇最后，在pycharm中配置了PyQt5 Designer 和 uic，接下來，使用這些工具，開發(fā)一個界面。

1、首先打開 Designer1) 在左側(cè)任意位置（下圖桔色框內(nèi)）點擊右鍵，彈出菜單，在External Tools 選中 PyQt5 Designer

在這里插入圖片描述

2) 打開 Designer

在這里插入圖片描述

3) 選擇Main Windows ，點擊創(chuàng)建

在這里插入圖片描述

4）新窗口

在這里插入圖片描述

5）修改窗口標(biāo)題

在這里插入圖片描述

6）保存到項目的main目錄下，名稱為 Main.ui

在這里插入圖片描述

7) 轉(zhuǎn)換圖形文件為源代碼

右鍵選中 Main.ui ，彈出菜單，選中 External Tools --> uic

在這里插入圖片描述

生成源代碼 Ui_Main.py
底部提示：Process finished with exit code 0 ，其中 0 表示成功。
如果是 -1 表示執(zhí)行失敗。

在這里插入圖片描述

8）查看源代碼

Designer圖形工具設(shè)計后生成的源代碼，圖像定義的核心代碼是 setupUi()方法。

# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'D:\projects\pycharm\p377test\main\Main.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
 def setupUi(self, MainWindow):
  MainWindow.setObjectName("MainWindow")
  MainWindow.resize(800, 600)
  self.centralwidget = QtWidgets.QWidget(MainWindow)
  self.centralwidget.setObjectName("centralwidget")
  MainWindow.setCentralWidget(self.centralwidget)
  self.menubar = QtWidgets.QMenuBar(MainWindow)
  self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
  self.menubar.setObjectName("menubar")
  MainWindow.setMenuBar(self.menubar)
  self.statusbar = QtWidgets.QStatusBar(MainWindow)
  self.statusbar.setObjectName("statusbar")
  MainWindow.setStatusBar(self.statusbar)
  self.retranslateUi(MainWindow)
  QtCore.QMetaObject.connectSlotsByName(MainWindow)
 def retranslateUi(self, MainWindow):
  _translate = QtCore.QCoreApplication.translate
  MainWindow.setWindowTitle(_translate("MainWindow", "登錄"))

9）總結(jié)

前面，用 PyQt5 Designer 設(shè)計了一個界面，保存為 ui 文件；
通過 uic 將 ui 文件轉(zhuǎn)換成 py 代碼。

這個py代碼還不能執(zhí)行，因為這些代碼只是創(chuàng)建了界面的組件。

需要編寫控制代碼，才能顯示界面。

二、通用mvc框架

引入mvc框架的可以解決圖形界面代碼覆蓋的問題，實現(xiàn)界面和控制邏輯分離。

界面生成后，如果把控制邏輯也寫進(jìn)界面代碼，下一次修改保存界面就會把控制邏輯代碼覆蓋。

因此，防止代碼覆蓋的角度，需要將控制邏輯和界面代碼分離，這樣無論如何怎樣修改界面代碼，也不影響控制邏輯的代碼。

第二點，從設(shè)計模式為出發(fā)點，考慮客戶端應(yīng)用以及組件的控制方式，mvc模式是最佳的實踐。通過將代碼按照界面(View)、數(shù)據(jù)模型(Model)和控制邏輯(Control)進(jìn)行劃分，每一個部分關(guān)注應(yīng)用的不同功能，代碼分工清晰，責(zé)任明確。

1）新建控制代碼

右鍵點擊 main 目錄，彈出菜單，選擇 New -> Python File

在這里插入圖片描述

2)通用模板

在Main.py中，增加如下內(nèi)容：

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
import sys
from Ui_Main import Ui_MainWindow
class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
 # ---------------------------------------------------------------------------------
 #
 #  初始化
 #
 # ---------------------------------------------------------------------------------
 def __init__(self):
  super(MainWindow, self).__init__()
  self.setupUi(self)
if __name__ == '__main__': # 判斷本文件是否是啟動入口，__main__是系統(tǒng)賦給啟動模塊的變量值；
 app = QtWidgets.QApplication(sys.argv) # 如果是啟動文件，則創(chuàng)建 Application 實例 app
 window = MainWindow()     # 創(chuàng)建 MainWindow 的實例 window
 window.show()       # 顯示窗口
 sys.exit(app.exec_())     # 捕獲 app 退出狀態(tài)

這是一個通用的、最簡單的模板。
通過 from Ui_Main import Ui_MainWindow導(dǎo)入圖形界面的定義類。
通過繼承的方式使用界面類，class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow)，并在初始化方法中，調(diào)用圖形定義代碼 setupUi()

3) 設(shè)置源代碼根目錄

右鍵點擊 main 目錄，選擇 Make Directory as --> Sources Root
在這里插入圖片描述