Python+PyQt架構(gòu):使用設(shè)計(jì)師編寫界面程序入門示例
PyQt是Qt界面庫在Python下的綁定,為在Python語言下編寫GUI界面程序提供了極大的便利。對(duì)于界面程序的設(shè)計(jì),可以使用代碼構(gòu)建,也可以借助于其提供的設(shè)計(jì)師(Qt Designer)工具來構(gòu)建。
下面給出一個(gè)在Python語言中使用PyQt界面庫及設(shè)計(jì)師工具編寫界面程序的入門例子。
例子說明
該例運(yùn)行界面如下圖所示,包括了常用軟件界面必備的幾個(gè)區(qū)域部分:菜單欄、工具欄、狀態(tài)欄及主窗口顯示區(qū)域,其中,主窗口顯示區(qū)域使用水平及垂直分割條控件以左一右二的形式分為了三個(gè)窗口部分。
工具欄的顯示樣式可通過菜單設(shè)置為”僅顯示圖標(biāo)”或”顯示圖標(biāo)和文字”兩種樣式。另外,通過點(diǎn)擊工具欄上窗口視圖的下拉菜單可設(shè)置右面兩個(gè)窗口的顯示或隱藏狀態(tài)。
下面看下怎么在設(shè)計(jì)師(Qt Designer)中來實(shí)現(xiàn)這個(gè)界面程序的設(shè)計(jì)。
前提條件
假定你使用的IDE是PyCharm,并且已經(jīng)配置了如下圖所示三個(gè)常用工具:
具體的配置方法可參考前面的文章:
這三個(gè)常用工具都可以在PyCharm的右鍵菜單中操作,功能簡(jiǎn)要說明如下:
Qt Designer:可以在PyCharm中開發(fā)環(huán)境中快速打開設(shè)計(jì)師(Qt Designer)工具。
PyUIC:將Qt Designer設(shè)計(jì)的”.ui”界面文件轉(zhuǎn)換成”.py”文件。
Rcc2Py:將Qt Designer設(shè)計(jì)中用到的資源文件”.qrc”文件轉(zhuǎn)換成”.py”文件。
軟件界面使用設(shè)計(jì)師(Qt Designer)工具的設(shè)計(jì)過程
1、新建UI文件
打開設(shè)計(jì)師,新建一個(gè)窗體,模板選擇為Main Window,如下圖所示,并保存為”Main.ui”文件:
2、新建資源文件
在設(shè)計(jì)師的資源瀏覽器中新建一個(gè)資源文件保存名稱為”MyRes.qrc”,將本例界面中用到的圖標(biāo)等資源文件添加到該文件中,如下圖所示(前綴設(shè)置為空,圖標(biāo)文件保存在當(dāng)前程序所在目錄的img子文件夾下):
3、在動(dòng)作編輯器編輯各種action
菜單欄、工具欄上的大部分功能都可以通過動(dòng)作編輯器完成,可以設(shè)置每個(gè)action的名稱、文本、快捷鍵、是否可選、工具提示等信息,本例中動(dòng)作編輯完成后如下圖所示:
4、菜單欄設(shè)計(jì)
通過拖放前面創(chuàng)建的action,可在設(shè)計(jì)師中完成菜單欄的設(shè)計(jì),對(duì)于本例,設(shè)計(jì)完成后文件、選項(xiàng)-工具欄樣式及選項(xiàng)-窗口視圖菜單項(xiàng)分別如下圖所示:
5、工具欄設(shè)計(jì)
同菜單欄設(shè)計(jì)過程類似通過拖放前面創(chuàng)建的action完成工具欄的設(shè)計(jì),本例中工具欄編輯完成后如下圖所示:
需要說明的是,本例工具欄還包括一個(gè)帶下拉菜單的QToolButton控件,在設(shè)計(jì)師中不能直接將其放到工具欄區(qū)域中,后面需在代碼中手動(dòng)創(chuàng)建該控件。
6、狀態(tài)欄設(shè)計(jì)
本例狀態(tài)欄比較簡(jiǎn)單,只在狀態(tài)欄中添加一個(gè)QLabel控件作一個(gè)簡(jiǎn)單的信息顯示即可。同樣,在設(shè)計(jì)師中不能直接將QLabel控件放到狀態(tài)欄區(qū)域中,后面需在代碼中手動(dòng)創(chuàng)建該控件。
7、主顯示區(qū)域設(shè)計(jì)
本例中,主顯示區(qū)域分為左一右二的三個(gè)窗口,使用分割條進(jìn)行布局。為簡(jiǎn)單起見,本例使用三個(gè)”Plain Text Edit”控件作為顯示窗口。在設(shè)計(jì)師中拖放三個(gè)狀態(tài)欄”Plain Text Edit”控件到主窗口區(qū)域中,分別命名為leftWnd、rightWnd1和rightWnd2,同時(shí),在屬性編輯器設(shè)置三個(gè)控件的plainText屬性分別為左窗口、右窗口1、右窗口2。然后選中rightWnd1和rightWnd2,在設(shè)計(jì)師中選擇”使用分裂器垂直布局”,完成右面兩個(gè)窗口的垂直布局。然后再選中這個(gè)垂直布局和leftWnd窗口,在設(shè)計(jì)師中選擇”使用分裂器水平布局”,這樣使用水平分割條完成了整個(gè)界面左、右兩部分的水平布局。如下圖所示:
8、信號(hào)/槽的設(shè)計(jì)
在設(shè)計(jì)師的信號(hào)/槽編輯器中可完成信號(hào)與槽函數(shù)的關(guān)聯(lián),對(duì)于本例,將動(dòng)作actExit關(guān)聯(lián)到主窗口的關(guān)閉事件中,這樣,在工具欄中點(diǎn)擊退出按鈕時(shí),可退出該程序,如下圖所示:
至此,在設(shè)計(jì)師中完成了整個(gè)界面的設(shè)計(jì),保存文件。該界面中涉及到的所有界面對(duì)象元素如下圖所示:
界面文件至Python文件的轉(zhuǎn)換
在設(shè)計(jì)師中界面設(shè)計(jì)完成后,我們得到了兩個(gè)文件:”Main.ui”界面文件和”MyRes.qrc”資源文件,需將這兩個(gè)文件轉(zhuǎn)換為Python能夠識(shí)別的文件,這就用到了前面提到的已經(jīng)集成好的兩個(gè)工具”PyUIC”和”Rcc2Py”。
在PyCharm開發(fā)環(huán)境中,選中這兩個(gè)文件,在右鍵菜單中分別選擇”PyQt4–>PyUIC”和”PyQt4–>Rcc2Py”即可完成這兩個(gè)文件的轉(zhuǎn)換。
轉(zhuǎn)換完成后,生成了兩個(gè)新的文件,分別為界面文件”Ui_Main.py”和資源文件”MyRes_rc.py”。
其中,”Ui_Main.py”文件中主要定義了一個(gè)界面布局類”Ui_MainWindow”,在該類中,會(huì)自動(dòng)導(dǎo)入”MyRes_rc.py”的內(nèi)容。
主程序”Main.py”的編寫
在PyCharm開發(fā)環(huán)境中新建一個(gè)Python文件”Main.py”。其調(diào)用界面文件的主要思路為:
定義一個(gè)類MainWindow,繼承自QMainWindow和Ui_MainWindow類,在該類中實(shí)現(xiàn)設(shè)計(jì)師中不能完成的界面元素,如本例中工具欄上的下拉菜單按鈕和狀態(tài)欄上的label控件等,實(shí)現(xiàn)信號(hào)與槽函數(shù)的關(guān)聯(lián),完成槽函數(shù)的實(shí)現(xiàn)。
MainWindow類的具體實(shí)現(xiàn)代碼如下圖所示:
對(duì)上述代碼說明如下:
第16-45行,類的初始化函數(shù)。
第20-36行,添加設(shè)計(jì)師中不能完成的界面元素,詳細(xì)請(qǐng)參考注釋。
第38-40行,實(shí)現(xiàn)兩個(gè)動(dòng)作與槽函數(shù)的關(guān)聯(lián),用以設(shè)置工具欄的樣式和右邊兩個(gè)窗口是否可見。
第42-45行,設(shè)置主分割條mainSplitter的左右兩邊的比例,并將其設(shè)置為主窗口的中心部件。
第47-57行,兩個(gè)槽函數(shù)的具體實(shí)現(xiàn)。
程序的完整測(cè)試代碼如下圖所示:
程序運(yùn)行后,即可看到本文開頭的提到的界面運(yùn)行圖。
備注
本例開發(fā)環(huán)境配置:Python2.7 PyQt4。
如果你覺得這篇文章對(duì)你有用的話,抖抖小手點(diǎn)個(gè)贊吧。