PyQt5系列教程(二)利用QtDesigner設計UI界面

軟硬件環境

• OS X EI Capitan
• Python 3.5.1
• PyQt 5.5.1
• PyCharm 5.0.1

前言

在PyQt5系列教程的第一篇http://blog.csdn.net/djstavaV/article/details/50218157，咱們已經搭建好了開發環境，今天，咱們就用Python開發第一個Qt GUI程序，讓你們感覺下Qt開發的魅力，熟悉下Qt開發GUI程序的通常流程。

製做程序UI界面，通常會有2種方法，利用UI製做工具和純代碼編寫，像移動開發中的Android和iOS都是這樣，在PyQt5中，咱們也有這麼2種方式。

QtDesigner工具簡介

QtDesigner是專門用來製做Qt程序UI界面的工具，它使用起來很是簡單，只要經過拖拽和點擊就能夠完成複雜的界面設計，並且還能夠隨時預覽查看效果圖。

其中，區域1是UI界面製做導向，QtDesigner爲咱們提供了一些經常使用模塊，很是方便；區域2是UI控件列表；區域3是控件屬性列表；區域4是Action Editor編輯列表；區域5信號和槽的編輯列列表；區域6是資源處理窗口。

第一個PyQt5程序

說了這麼多，還不如來動手實踐一下。

這個是咱們第一個PyQt5項目的界面效果圖，須要實現的是當點擊界面上的按鈕時，彈出一個提示框，提示框內顯示一串文字。

好了，目標定好了，立刻開始去實現它。

QtDesigner設計UI

建立一個基於Main Window模塊的UI文件，取名叫firstPyQt5.ui。從Widget Box中找到(也能夠)Push Button，將它拖拽到工做空間裏，調整位置，在Button上輸入文字，調整字體及大小，這些均可以在Property Editor裏操做。按鈕點擊彈框的操做會牽出Qt裏很是重要的一對概念，即信號和槽(signal and slot)，關於這個我打算再開一篇博文細講。如今你只須要知道slot就是一個函數，若是一個signal和一個slot綁定之後，那麼signal被觸發，slot就會被執行。

那麼問題來了，怎麼在QtDesigner裏綁定signal和slot呢？打開菜單欄裏的Edit—>Edit Signals/Slots，而後光標移到按鈕上點擊拖拽，這時會彈出一個編輯框

由於是點擊，因此signal選擇clicked()，slot函數如今尚未，咱們就點擊Edit新建一個，叫firstPyQt5_button_click()

爲了演示一下資源文件的使用，這裏導入兩張圖片，一張給主窗口，另外一張給幫助菜單項裏的Action。

在QtDesigner引用資源文件以前，須要先準備一個qrc文件，它跟xml文件比較相似，用來制定資源文件的路徑

<RCC version="1.0">
    <qresource>
        <file>qt.png</file>
        <file>penguin.jpg</file>
    </qresource>
</RCC>

接下來就能夠在QtDesigner的Resource Browser裏倒入qrc文件，這樣qrc文件中描述的資源就可使用了

將firstPyQt5.ui轉換成python代碼

很是簡單，經過Qt提供的命令行工具pyuic5就能夠輕鬆實現

pyuic5 -o firstPyQt5.py firstPyQt5.ui

建立PyCharm工程

新建一個新的python文件main.py,代碼以下

# -*- coding: utf-8 -*-
__author__ = 'djstava@gmail.com'

import sys

from PyQt5.QtWidgets import QApplication , QMainWindow

from firstPyQt5 import *

if __name__ == '__main__':
    '''
    主函數
    '''

    app = QApplication(sys.argv)
    mainWindow = QMainWindow()
    ui = Ui_mainWindow()
    ui.setupUi(mainWindow)
    mainWindow.show()
    sys.exit(app.exec_())

接下修改下firstPyQt5.py文件，主要是去實現slot函數，由於以前在QtDesigner裏沒有實現，讓它彈出一個消息框

def firtPyQt5_button_click(self):
    QtWidgets.QMessageBox.information(self.pushButton,"標題","這是第一個PyQt5 GUI程序")

最後運行下工程

這裏通常將ui文件單獨存成一個文件，便於更新。

源碼下載

http://download.csdn.net/detail/djstavav/9351205