wxPython界面設計器——wxformbuilde的簡單教程

前段時間學習了wxPython基本使用方法,教程都是直接使用手寫代碼去做生成界面的。後來開始做項目,發現這樣的手寫代碼做出來的界面不止醜陋,而且效率低下。

於是,在網上搜索到這個可以給wxPython生成界面的代碼的設計器——wxformbuilde。但,苦於在網上找不到相關詳細教程。只能自己一步一步摸索怎麼使用了。下面是我的實踐經驗,歡迎指正。

0、基本環境

我是在Linux Mint下開發的,一個類似Ubuntu的Linxu發行版。系統自帶了python 2.7,並且我已經安裝了對應的wxPython。所以同學們需要自己去百度怎麼處理的操作系統的環境了。下面,將以我在Linux下的操作作爲例子。

1、下載wxformbuilde

打開如下網址:http://sourceforge.net/projects/wxformbuilder/files/wxformbuilder/3.1.70/

下載對應你的操作系統的安裝包,windows下載exe,Mac下載dmg,Linux下載tar.bz2

我的是linux,所以我下載了wxformbuilder_3.1.70-i386.tar.bz2

wKiom1ZXubGhhj9hAAEBYA4og4I699.png

2、安裝/解壓wxformbuilder

window和Mac怎麼操作,大家都懂的。咱們說Linux的。將下載完的軟件包放到一個你的一個目錄,因爲軟件是個綠色的可執行文件,所以直接解壓就能使用。

cp wxformbuilder_3.1.70-i386.tar.bz2 ~/
cd ~
tar -jxvf wxformbuilder_3.1.70-i386.tar.bz2

3、運行wxformbuilder

解壓完之後,咱們得到了一個wxformbuilder目錄,裏面就是我們需要的軟件了。分佈了不少的東西,可執行程序在wxformbuilder/bin/目錄下。

cd ~/wxformbuilder/bin/
./wxformbuilder

這樣就能成功運行wxformbuilder了,出來下面的界面。window和Mac的用戶,去哪裏找,你們都懂得。


wKioL1ZXvA3R3qHjAAKvQfw7G_k066.png

至此,咱們軟件基本及安裝完畢。可以使用了。下面咱們就來寫個簡單的界面。


1、準備一個窗體。

點擊wxformbuilder上方的標籤“forms”,並點擊標籤下方的第一個類似窗體的圖標“Frame”

wKioL1ZXvSrjf-ARAACDwU3sW-0406.png

然後,下面就會出現一個窗體。但是現在還不能直接往窗體上添加各種控件。咱們還需要給窗體添加布局器BoxSizer。

2、添加布局器

點擊wxformbuilder上方的標籤“Layout,並點擊標籤下方的第一個圖標“wxBoxSizer”。添加一個只有以列控件佈局的佈局器。這時,窗體上並沒有什麼變化。但是窗口左邊的目錄樹有變化了,窗體下多了一個佈局器。

wKioL1ZXvmfzQlbGAABS6uYV8E4643.png

3、放置控件

保持目錄樹如上圖一樣,選中佈局器bSizer1。這樣,添加進窗體的控件都屬於並使用這個佈局器的方法,單列布局。就是,所有添加上去的控件都是在一列上。

點擊wxformbuilder上方的標籤“Common,順次並點擊標籤下方的地三個圖標“wxStaticText”,第四個圖標“wxTextCtrl”,第一個圖標“wxButton”。這樣,窗體設置上就會多出一個文字標籤、一個文本框和按鈕。

wKioL1ZXwBbDSbgMAAD82EztBDk669.png

4、修改控件屬性

點擊設計窗體上的控件,或者左邊樹形結構的控件名。在wxformbuilder右邊的編輯欄都會自動變成對應控件的屬性編輯。在此,你可以修改該控件的和窗體的各類屬性。

此處,我們將會修改主窗體的name,文本編輯框的name,文字標籤的label,和按鍵的label。

4.1 修改主窗體的name

主窗體的name和控件的name決定了你之後要使用的python代碼時,使用的實體對象的變量名。點擊樹形結構的MyFrame1,並在右邊屬性編輯欄修改窗體的name值爲“BaseMainWind。如下圖:

wKiom1ZXwcuzr_VdAABVpCfyCmk757.png

此時,左邊樹形中對應的主窗體也會跟着改變名字,如下圖:

wKiom1ZXwimjhIifAABjf9PKz8o343.png

4.2修改控件的屬性

依照同樣的方法,在右邊的編輯框修改對應控件的屬性。

文本編輯框wxTextCtrl的name屬性修改爲“text_main”,文字標籤wxStaticText的label屬性修改爲“主窗口測試”,和按鍵wxButton的label屬性修改爲“清空”,按鍵wxButton的name屬性修改爲“button_main”。

剩下name屬性的我偷個懶,都懶得改了。直接使用默認的好了。

修改完只有應該如下圖所示:

wKiom1ZXxD6xljxFAAIFTzHsXdU817.png5、 添加控件的觸發事情函數

當按鈕被按下時,咱們應該觸發一個函數,將文本框裏的內容清空。所以,應該給按鈕控件添加一個觸發按下之後應該使用的處理函數。    

點擊選中按鈕控件button_main,在右邊的屬性編輯框,點擊上面的另外一個標籤“Events”。添加一個給“OnButtonClick”的處理函數名:main_button_click。如下圖:

wKioL1ZXxbzwkZuvAABZbA3w5Eo274.png

6、測試窗體內容。

窗體設計基本完事了,咱們現在稍微測試一個窗體的樣子。按下F5,彈出對話框後點擊確定。這樣就wxformbuilder簡單將咱們設計的窗體編譯C++的顯示方法,顯示出窗體的樣子。如下圖:

wKiom1ZXxm_DQuEGAAATO0CXud4581.png

由於咱們沒有制定主窗口的大小,也沒有拖動窗口。所以直接套用默認值就是這樣的以適合控件佈局爲大小的窗口。但是,不妨礙咱們做測試。

7、保存給python用的代碼。

點擊選中左邊樹形圖的最上面的圖標,即選中工程。

wKioL1ZXx8OwY-FWAABV184GnOk482.png

再點擊最下面標籤的python,即可出現在wxPython的代碼了。如下圖:

wKiom1ZXx52geji_AAAuVacuo14612.png

此時,全選上面的代碼。右鍵,【Copy】。

新建一個py源文件,並將全部代碼粘貼進去,保存名爲basewin.py的python代碼源文件。

至此,wxPython代碼就已經生成完畢了,請不要輕易變動文件裏的代碼。下面就是咱們調用窗體的主要邏輯代碼了。

8、編輯邏輯代碼

將邏輯代碼保存爲main_win.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import wx
import basewin
# 首先,咱們從剛剛源文件中將主窗體繼承下來.就是修改過name屬性的主窗體咯。
class MianWindow(basewin.baseMainWindow):
    # 咱們給個初始化函數,將文本框初始填有‘主窗口測試’幾個字
    # 不能直接覆蓋原有__ini__方法,這樣會導致窗體啓動失敗。咱們新建一個,然後再調用
    def init_main_window(self):
        self.text_main.SetValue('主窗口測試')
    # 將點擊按鈕清空文本框的,功能寫成函數
    def main_button_click(self, event):
        self.text_main.Clear()
if __name__ == '__main__':
    app = wx.App()
    # None表示的是此窗口沒有上級父窗體。如果有,就直接在父窗體代碼調用的時候填入‘self’就好了。
    main_win = MianWindow(None)
    main_win.init_main_window()
    main_win.Show()
    app.MainLoop()


將上面的邏輯代碼保存爲main_win.py,並跟剛剛生成那個basewin.py,放在同一個目錄裏。再給main_win.py可執行的權限。

chmod +x main_win.py
./main_win.py

然後就能運行界面了,試一試點擊哪個【清空】按鈕。是不是輸入框裏的文字消失了。φ(≧ω≦*)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章