程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PyQt5系列教程(二)利用QtDesigner設計UI界面

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

編輯:關於PHP編程

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文件比較類似,用來制定資源文件的路徑

            qt.png        penguin.jpg     

接下來就可以在QtDesigner的Resource Browser裡倒入qrc文件,這樣qrc文件中描述的資源就可以使用了

將firstPyQt5.ui轉換成python代碼

非常簡單,通過Qt提供的命令行工具pyuic5就可以輕松實現

pyuic5 -o firstPyQt5.py firstPyQt5.ui 

創建PyCharm工程

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

# -*- coding: utf-8 -*-__author__ = '[email protected]'import sysfrom PyQt5.QtWidgets import QApplication , QMainWindowfrom 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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved