痞子衡嵌入式：極易上手的可視化wxPython GUI構建工具(wxFormBuilder)

---

　　你們好，我是痞子衡，是正經搞技術的痞子。今天痞子衡給你們介紹的是wxPython GUI構建工具wxFormBuilder。

1、手工代碼佈局GUI界面的煩惱

　　若是你曾經設計過上位機軟件GUI界面，初始階段必定是純手工代碼佈局GUI界面上的各個控件，相信你確定遇到過以下煩惱：

• 控件類型較難找：UI界面裏有不少控件類型，純手工寫代碼須要翻看文檔一個個去查找這些控件的名字與用法。
• 尺寸位置難調整：若是界面上已經布了多個控件，想要總體去調整這些控件的尺寸與位置是一件頭疼的事。
• 效果查看不實時：每新添加一個控件都須要運行才能查看總體效果，若是代碼添加不完善，可能沒法運行看不到效果。

2、wxFormBuilder工具背景

　　在講本文主角wxFormBuilder以前有必要提一下這個軟件的來歷，首先要追述到大名鼎鼎的跨平臺GUI庫wxWidgets，這個庫主要是用C++語言實現的；鑑於wxWidgets的流行，Robin Dunn用Python語言對wxWidgets作了一層封裝，封裝後便成了Python版GUI庫wxPython；下面是這兩個GUI庫的官方主頁：

• wxWidgets項目官方主頁: https://www.wxwidgets.org/
  
• wxPython項目官方主頁: https://www.wxpython.org/

　　wxWidgets的各類UI控件功能均是經過class來實現的，這個連接 http://docs.wxwidgets.org/3.0/page_class_cat.html 列出了wxWidgets裏的全部class，wxPython並無實現wxWidgets裏所有class，但基本實現了大部分經常使用class，這個連接 https://docs.wxpython.org/wx.1moduleindex.html 列出了wxPython裏全部的class。

　　知道了wxPython的class即可以開始設計GUI界面，但手工寫代碼設計界面太繁瑣，所以wxFormBuilder應運而生，這是一款可以可視化設計界面的工具（並非惟一工具，還有wxGlade、Boa Constructor等），經過該工具設計GUI界面後可自動生成wxPython代碼，下面是wxFormBuilder的官方主頁：

• wxFormBuilder項目Github: https://github.com/wxFormBuilder/wxFormBuilder

3、wxFormBuilder快速上手

　　使用wxFormBuilder去設計GUI界面能夠不用掌握wxPython裏的各個控件class的具體用法，你只須要在wxFormBuilder軟件裏添加這些控件便可，下面痞子衡將簡介wxFormBuilder的用法：

3.1軟件界面

　　安裝好wxFormBuilder軟件以後打開這個軟件，可見到以下界面，界面主要分爲四大區：項目區、控件區、編輯區、屬性區。軟件使用起來很是簡單，就是在【控件區】裏點擊添加須要的控件，這些控件的效果會在【編輯區】裏實時顯示，並在【屬性區】這些控件的屬性，【項目區】用於顯示控件間的層級關係。

3.2基礎佈局

　　讓咱們開始建立一個GUI的基礎框架，基礎框架包括：Frame（外圍輪廓）、Sizer（內部控件區）、menubar（頂部菜單欄）、statusBar（底部狀態欄）。
　　第一步是添加一個Frame，這是GUI的輪廓基礎，其size（default爲500； 300）決定了GUI總體界面的大小。

　　第二步是在Frame下添加一個Sizer，後續全部控件均是放在Sizer裏的。關於Sizer部分須要特別說明一下，wxPython提供的Sizer類型有以下七種：wxBoxSizer、wxWrapSizer、wxStaticBoxSizer、wxGridSizer、wxFlexGridSizer、wxGridBagSizer、wxStdDialogButtonSizer，Sizer的樣式決定了後續控件的總體相對位置關係，選定了Sizer即選定了GUI界面樣式。關於這七種Sizer的具體樣式請見 https://docs.wxpython.org/sizers_overview.html#sizers-overview。若是你以爲單個Sizer裏的控件佈局太單調，你能夠嵌套使用Sizer，這是實現GUI界面控件佈局多樣化的關鍵。

　　第三步是在Frame頂部添加一個menubar：

　　第四步是在Frame底部添加一個statusBar：

3.3多種控件

　　基礎佈局搞定以後，接下來即是在Sizer裏添加控件，wxPython支持的控件很是豐富，其中比較經常使用的是以下幾個：button（按鈕）、staticText（靜態顯示文本框）、textCtrl（輸入輸出文本框）、Choice（複選框）、checkBox（選中框）、slider（滑動條）。前面痞子衡選擇的Sizer是wxBoxSizer，即自上而下佈局，所以這些控件在Sizer是自上而下排列的，各個控件的位置後續在屬性裏還能夠微調，但改變不了自上而下的格局。

3.4控件屬性

　　添加了全部控件以後，下一步即是分別設置控件的屬性，進一步調整控件。痞子衡以Button屬性爲例，痞子衡勾選了以下4項比較重要的屬性設置，分別是name（button在後續python代碼的對象名，通常須要按其功能修改，修改後使得代碼閱讀/修改起來更直觀）、label（button在GUI裏顯示的標籤名，此處是MyButton，也須要按其功能修改，方便用戶使用軟件）、size（設置button的尺寸，這個尺寸最大不該超過Sizer尺寸）、flag（調整對齊方式從而調整Button在Sizer裏的位置）。另外有一個屬性不得不說，即控件位置pos，在wxFormBuilder裏設置這個屬性並不生效，痞子衡猜測可能跟Sizer樣式有關，由於Sizer決定了控件間相對位置關係，所以控件的pos不能隨意設置。

3.5觸發事件

　　有些控件是須要有響應的，好比Button，在GUI軟件實際使用中，用戶若是按下了Button，應該須要觸發某個任務，任務須要有響應函數，這個響應函數須要在【Events】裏設置，Button的響應函數在OnButtonClick裏設置，痞子衡在這裏指定了響應函數名爲showMessage。在wxFormBuilder裏咱們只須要指定控件響應函數名便可，響應函數的具體功能實現，不屬於wxFormBuilder設計範疇。

3.6生成代碼

　　當GUI界面佈局所有完成以後，需選擇File->Generate Code或F8生成python代碼，須要複製全部的python代碼並保存在單獨的文件裏，痞子衡保存在了my_win.py文件裏。

　　能夠簡單看一下這個my_win.py裏的內容，代碼裏首先import了wx庫（即wxPython庫），並定義了名爲MyFrame1的class，這個class主要包含兩個函數__init__()和showMessage()：__init__()裏初始化了各個控件成員self.m_xx，這與咱們在wxFormBuilder裏添加控件是對應的；showMessage()是Button控件的響應函數，但這個響應函數並無任何實質代碼，固然咱們能夠在這個函數裏面實現Button響應功能，但通常不建議直接在wxFormBuilder生成的代碼裏添加代碼，由於你可能隨時調整GUI頁面佈局，那麼main_win.py裏的代碼會從新生成，這樣會覆蓋咱們本身添加的代碼，致使維護起來比較麻煩。

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

###########################################################################
## Python code generated with wxFormBuilder (version Jul 11 2018)
## http://www.wxformbuilder.org/
##
## PLEASE DO *NOT* EDIT THIS FILE!
###########################################################################

import wx
import wx.xrc

###########################################################################
## Class MyFrame1
###########################################################################

class MyFrame1 ( wx.Frame ):
    
    def __init__( self, parent ):
        wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
        
        self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )
        
        bSizer1 = wx.BoxSizer( wx.VERTICAL )
        
        self.m_button1 = wx.Button( self, wx.ID_ANY, u"MyButton", wx.Point( -1,-1 ), wx.DefaultSize, 0 )
        bSizer1.Add( self.m_button1, 0, wx.ALL, 5 )
        
        self.m_staticText1 = wx.StaticText( self, wx.ID_ANY, u"MyLabel", wx.DefaultPosition, wx.DefaultSize, 0 )
        self.m_staticText1.Wrap( -1 )
        
        bSizer1.Add( self.m_staticText1, 0, wx.ALL, 5 )
        
        self.m_textCtrl1 = wx.TextCtrl( self, wx.ID_ANY, wx.EmptyString, wx.Point( -1,-1 ), wx.DefaultSize, 0 )
        bSizer1.Add( self.m_textCtrl1, 0, wx.ALL, 5 )
        
        m_choice1Choices = []
        self.m_choice1 = wx.Choice( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, m_choice1Choices, 0 )
        self.m_choice1.SetSelection( 0 )
        bSizer1.Add( self.m_choice1, 0, wx.ALL, 5 )
        
        self.m_checkBox1 = wx.CheckBox( self, wx.ID_ANY, u"Check Me!", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer1.Add( self.m_checkBox1, 0, wx.ALL, 5 )
        
        self.m_slider1 = wx.Slider( self, wx.ID_ANY, 50, 0, 100, wx.DefaultPosition, wx.DefaultSize, wx.SL_HORIZONTAL )
        bSizer1.Add( self.m_slider1, 0, wx.ALL, 5 )
        
        
        self.SetSizer( bSizer1 )
        self.Layout()
        self.m_menubar1 = wx.MenuBar( 0 )
        self.m_menu1 = wx.Menu()
        self.m_menuItem1 = wx.MenuItem( self.m_menu1, wx.ID_ANY, u"MyMenuItem", wx.EmptyString, wx.ITEM_NORMAL )
        self.m_menu1.Append( self.m_menuItem1 )
        
        self.m_menubar1.Append( self.m_menu1, u"MyMenu" ) 
        
        self.SetMenuBar( self.m_menubar1 )
        
        self.m_statusBar1 = self.CreateStatusBar( 1, wx.STB_SIZEGRIP, wx.ID_ANY )
        
        self.Centre( wx.BOTH )
        
        # Connect Events
        self.m_button1.Bind( wx.EVT_BUTTON, self.showMessage )
    
    def __del__( self ):
        pass
    
    
    # Virtual event handlers, overide them in your derived class
    def showMessage( self, event ):
        event.Skip()

4、使用wxFormBuilder生成的代碼

　　前面已經使用wxFormBuilder生成GUI界面類MyFrame1並保存在my_win.py文件中，此時須要建立一個主函數文件去調用MyFrame1，下面是痞子衡建立的main_win.py中的代碼：

import wx
# 導入my_win.py中內容
import my_win

# 建立mainWin類並傳入my_win.MyFrame1
class mainWin(my_win.MyFrame1):

   # 實現Button控件的響應函數showMessage
   def showMessage(self, event):
       self.m_textCtrl1.Clear()
       self.m_textCtrl1.SetValue('hello world')

if __name__ == '__main__':
    # 下面是使用wxPython的固定用法
    app = wx.App()

    main_win = mainWin(None)
    main_win.Show()

    app.MainLoop()

　　最後讓咱們測試一下這個GUI軟件，在命令行下運行main_win.py

PS D:\my_git_repo\> python .\main_win.py

　　至此，wxPython GUI構建工具wxFormBuilder痞子衡便介紹完畢了，掌聲在哪裏~~~

參考資料

1. wxPython的界面設計wxformbuilde初學筆記
2. wxPython 基礎使用教程