1. 程式人生 > >快速熟悉 PyQt5 與 Eric6 的極速 GUI 開發

快速熟悉 PyQt5 與 Eric6 的極速 GUI 開發

http://blog.csdn.net/weiaitaowang/article/details/52048462

完美安裝 Anaconda3 + PyQt5 + Eric6 一文對PyQt5與Eric6的安裝做了詳細的記錄。這次將結合使用PyQt5和Eric6以例項的方式向大家展示PyQt5與Eric6的極速GUI開發,同時也可以讓大家對PyQt5與Eric6先混個臉熟。

用 Eric6 與 PyQt5 結合,非常方便的實現介面與邏輯分離,滿足Python的極速GUI程式設計,你只需要關注程式的邏輯實現,而不需要在介面上花很多時間。

可以說這是一對GUI開發完美的組合!

好了,閒言碎語少說,來點實際的吧!

為了方便使用在正式開始之前我們先簡單配置一下Eric6的專案工作區

配置Eric6

開啟 Eric6
這裡寫圖片描述

選擇選單欄 設定-首選項
這裡寫圖片描述

在左側列表中選擇專案-多重專案,點選右側圖示後選定硬碟中的一個位置,我這裡是F:\Python\PyQt5資料夾。選好後點擊右下方的OK按鈕。
這裡寫圖片描述

簡單配置後,讓我們正式開始體驗極速GUI開發

例項

建立專案

開啟Eric6,選單欄中選擇專案-新建
這裡寫圖片描述

在專案屬性對話方塊中的專案名稱中輸入Hello,你會發現右下方的OK按鈕不可用。究其原因是專案資料夾中顯示的是我們剛設定的多重專案工作區目錄,也就是說在該目錄下可以存在多個專案。多個專案混在一起肯定是不行的了,還要將它們用資料夾區分開來,簡而言之就是該目錄下的每個資料夾就是一個專案(當然了,自己胡亂建立的資料夾肯定不是了,呵呵!)。找到原因後我們就可以解決問題了。

點選專案資料夾後面的圖示
這裡寫圖片描述

在開啟的選擇專案資料夾對話方塊中右鍵點選空白處,在彈出的選單中選擇新建-資料夾
這裡寫圖片描述

更改新建資料夾的名稱為Hello(一般與專案名稱同),選中該資料夾後點擊右下方的選擇資料夾按鈕
這裡寫圖片描述

回到專案屬性對話方塊後可以看到專案資料夾已變成F:\Python\PyQt5\Hello,同時右下角的OK按鈕已顯示可用。
這裡寫圖片描述

點選OK按鈕後出現一個提示框,是否將已有檔案新增到專案中?雖然該專案資料夾下還沒有任何檔案,但是這裡選擇Yes,因為我曾經選擇No後到執行指令碼時發現不能執行該功能。
這裡寫圖片描述

點選Yes後在彈出的檔案型別關聯對話方塊直接OK
這裡寫圖片描述

觀察程式主介面的標題欄發現顯示Hello – eric6

。在專案瀏覽器的頂部原始碼標籤裡自動為我們生成一個_init_.py檔案,該檔案中沒有任何程式碼,我們不用去理會。
這裡寫圖片描述

建立窗體

點選原始碼標籤右邊的窗體標籤,在標籤下面的空白處右鍵點選,彈出的選單選擇新建窗體
這裡寫圖片描述

彈出新建窗體對話方塊,可以選擇其它窗體型別,這裡我們使用預設對話方塊型別,點選OK按鈕
這裡寫圖片描述

在彈出的新建窗體儲存對話方塊中可以看到程式已將路徑定位到專案資料夾下,輸入檔名後點擊儲存按鈕
這裡寫圖片描述

在Eric6的窗體標籤下可以看到程式已自動建立了HelloWindow.ui檔案
這裡寫圖片描述

設計窗體

點選上一步的儲存按鈕後,計算機會直接開啟Qt設計師,並自動將HelloWindow.ui載入到程式中
這裡寫圖片描述

在左側的Widget Box裡找到Push Button控制元件,用滑鼠左鍵按住該控制元件不放,拖拽到HelloWindow.ui的設計窗體。拖拽兩個Push Button控制元件到窗體
這裡寫圖片描述

再找到Label控制元件,拖拽一個該控制元件到窗體
這裡寫圖片描述

在程式的右側觀察物件檢視器屬性編輯器。使用物件檢視器可以快速選取窗體中的控制元件,屬性編輯器可以編輯修改窗體、控制元件的各種屬性。

利用物件檢視器選擇我們剛拖拽的三個控制元件,分別將它們的objectName屬性更改成:

  • 左邊PushButton:Button_ok
  • 右邊PushButton:Button_close
  • Label:label

    這裡寫圖片描述

分別將它們的text屬性更改成:

  • 左邊PushButton:確定
  • 右邊PushButton:關閉
  • Label:顯示

這裡寫圖片描述

編輯訊號/槽

接下來給關閉按鈕新增退出程式的命令。在Qt設計師中,可以很直觀的為控制元件新增事件命令,在PyQt5中這種方式新增的事件命令被稱為訊號/槽。(注:訊號/槽機制是PyQt獨有的訊號傳遞機制,使用非常方便)

點選工具欄的編輯訊號/槽圖示
這裡寫圖片描述

滑鼠移動到關閉控制元件上面,左鍵按下拖拽處紅色地線標誌後鬆開滑鼠
這裡寫圖片描述

彈出配置連結視窗,在該視窗中勾選顯示從QWidget繼承的訊號和槽
這裡寫圖片描述

在左側列表選擇clicked(),在右側列表選擇close()

這個操作的意義為:當點選關閉按鈕時,執行關閉命令
這裡寫圖片描述

點選OK後可以看到剛選擇的兩項已連結附加到關閉按鈕上
這裡寫圖片描述

點選工具欄中的儲存按鈕後關閉Qt設計師程式
這裡寫圖片描述

編譯測試

回到Eric6中,右鍵點選HelloWindow.ui檔案,在彈出的選單中選擇編譯窗體
這裡寫圖片描述

稍等片刻後程序會提示編譯成功
這裡寫圖片描述

返回原始碼標籤可以發現專案中多了一個Ui_HelloWindow.py檔案,雙擊該檔案可以檢視我們設計好的窗體程式碼
這裡寫圖片描述

點選選單欄的開始-執行指令碼(或直接按鍵盤F2鍵)
這裡寫圖片描述

在彈出的執行指令碼對話方塊直接OK
這裡寫圖片描述

OK後即可看到我們剛在Qt設計師中設計的窗體,點選關閉按鈕
這裡寫圖片描述

彈出對話方塊中直接OK,即可關閉該程式
這裡寫圖片描述

進一步完善程式

到現在我們沒有編寫一句程式碼即可實現了程式的顯示與退出

接下來我們手動給確定按鈕新增事件命令

在Eric6中的專案瀏覽器中找到HelloWindow.ui檔案,右鍵點選該檔案,彈出選單中選擇生成對話方塊程式碼
這裡寫圖片描述

在彈出的窗體程式碼產生器視窗中點選新建
這裡寫圖片描述

彈出新建對話方塊類中輸入類名後點擊OK
這裡寫圖片描述

回到窗體程式碼產生器視窗後展開Button_ok(QPushButton),勾選on_Button_ok_clicked(),點選OK
這裡寫圖片描述

在專案瀏覽器中可以看到原始碼標籤下又多了一個HelloWindow.py檔案
這裡寫圖片描述

雙擊該檔案檢視程式內容。若現在F2,程式將會報錯,將

from .Ui_HelloWindow import Ui_Dialog

中.Ui前面的點去掉

from Ui_HelloWindow import Ui_Dialog

這裡寫圖片描述

儲存後若F2,發現還是不行,程式一閃而過。給原始碼新增以下內容
這裡寫圖片描述

儲存後F2,沒問題了,可以點選確定按鈕後還是會報錯,是因為我們還沒有告訴程式點選確定按鈕後程序做出什麼反應,修改on_Button_ok_clicked函式如下
這裡寫圖片描述

儲存後F2,點選確定後Label內容顯示會變成這是我的第一個 PyQt5 程式,一切正常
這裡寫圖片描述

附錄與後記

附圖

附加圖:Label控制元件的位置與寬度
這裡寫圖片描述

附加圖:完成後的檔案
這裡寫圖片描述

後記

雖然我們通過這個例項能夠感受得到PyQt5與Eric6結合使用的強大功能與極速GUI開發的能力非比尋常,可是對於像我這樣剛接觸PyQt5與Eric6的童鞋來說,要想發揮PyQt5與Eric6的強大功能與極速開發也是痴人說夢,究其原因是PyQt5與Eric6的結合讓我們只用少量的程式碼編寫就可以實現很多強大的功能,幾乎底層的程式碼都不用去自己編寫,因此,PyQt5真正強大的內容離我們很遠。

這個例項就像一層窗戶紙被捅破了,但是我們根本就邁不過去。所以若要真的學會PyQt5我們還需多學些PyQt5的底層內容,多手動編寫一些程式碼。當隨著我們的PyQt5水平不斷提高,到那時我們會發現PyQt5與Eric6結合使用才是如虎添翼,馳騁在程式的海洋。

程式碼貼附

最後將HelloWindow.py程式碼完整貼附如下:

# -*- coding: utf-8 -*-

"""
Module implementing HelloWindow.
"""
import sys
from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QDialog, QApplication

from Ui_HelloWindow import Ui_Dialog


class HelloWindow(QDialog, Ui_Dialog):
    """
    Class documentation goes here.
    """
    def __init__(self, parent=None):
        """
        Constructor

        @param parent reference to the parent widget
        @type QWidget
        """
        super(HelloWindow, self).__init__(parent)
        self.setupUi(self)

    @pyqtSlot()
    def on_Button_ok_clicked(self):
        self.label.setText('這是我的第一個 PyQt5 程式')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    dlg = HelloWindow()
    dlg.show()
    sys.exit(app.exec_())