極易上手的可視化wxPython GUI構(gòu)建工具(wxFormBuilder)

西北望msm66g9f 2020-02-06

展開全文

　　大家好，我是痞子衡，是正經(jīng)搞技術(shù)的痞子。今天痞子衡給大家介紹的是wxPython GUI構(gòu)建工具wxFormBuilder。

一、手工代碼布局GUI界面的煩惱

　　如果你曾經(jīng)設(shè)計(jì)過(guò)上位機(jī)軟件GUI界面，初始階段一定是純手工代碼布局GUI界面上的各個(gè)控件，相信你肯定遇到過(guò)如下煩惱：

控件類型較難找：UI界面里有很多控件類型，純手工寫代碼需要翻看文檔一個(gè)個(gè)去查找這些控件的名字與用法。
尺寸位置難調(diào)整：如果界面上已經(jīng)布了多個(gè)控件，想要整體去調(diào)整這些控件的尺寸與位置是一件頭疼的事。
效果查看不實(shí)時(shí)：每新添加一個(gè)控件都需要運(yùn)行才能查看整體效果，如果代碼添加不完善，可能無(wú)法運(yùn)行看不到效果。

二、wxFormBuilder工具背景

　　在講本文主角wxFormBuilder之前有必要提一下這個(gè)軟件的來(lái)歷，首先要追述到大名鼎鼎的跨平臺(tái)GUI庫(kù)wxWidgets，這個(gè)庫(kù)主要是用C++語(yǔ)言實(shí)現(xiàn)的；鑒于wxWidgets的流行，Robin Dunn用Python語(yǔ)言對(duì)wxWidgets做了一層封裝，封裝后便成了Python版GUI庫(kù)wxPython；下面是這兩個(gè)GUI庫(kù)的官方主頁(yè)：

wxWidgets項(xiàng)目官方主頁(yè): https://www./
wxPython項(xiàng)目官方主頁(yè): https://www./

　　wxWidgets的各種UI控件功能均是通過(guò)class來(lái)實(shí)現(xiàn)的，這個(gè)鏈接 http://docs./3.0/page_class_cat.html 列出了wxWidgets里的所有class，wxPython并沒(méi)有實(shí)現(xiàn)wxWidgets里全部class，但基本實(shí)現(xiàn)了大部分常用class，這個(gè)鏈接 https://docs./wx.1moduleindex.html 列出了wxPython里所有的class。

　　知道了wxPython的class便可以開始設(shè)計(jì)GUI界面，但手工寫代碼設(shè)計(jì)界面太繁瑣，因此wxFormBuilder應(yīng)運(yùn)而生，這是一款能夠可視化設(shè)計(jì)界面的工具（并不是唯一工具，還有wxGlade、Boa Constructor等），通過(guò)該工具設(shè)計(jì)GUI界面后可自動(dòng)生成wxPython代碼，下面是wxFormBuilder的官方主頁(yè)：

wxFormBuilder項(xiàng)目Github: https://github.com/wxFormBuilder/wxFormBuilder

三、wxFormBuilder快速上手

　　使用wxFormBuilder去設(shè)計(jì)GUI界面可以不用掌握wxPython里的各個(gè)控件class的具體用法，你只需要在wxFormBuilder軟件里添加這些控件即可，下面痞子衡將簡(jiǎn)介wxFormBuilder的用法：

3.1軟件界面

　　安裝好wxFormBuilder軟件之后打開這個(gè)軟件，可見到如下界面，界面主要分為四大區(qū)：項(xiàng)目區(qū)、控件區(qū)、編輯區(qū)、屬性區(qū)。軟件使用起來(lái)非常簡(jiǎn)單，就是在【控件區(qū)】里點(diǎn)擊添加需要的控件，這些控件的效果會(huì)在【編輯區(qū)】里實(shí)時(shí)顯示，并在【屬性區(qū)】這些控件的屬性，【項(xiàng)目區(qū)】用于顯示控件間的層級(jí)關(guān)系。

3.2基礎(chǔ)布局

　　讓我們開始創(chuàng)建一個(gè)GUI的基礎(chǔ)框架，基礎(chǔ)框架包括：Frame（外圍輪廓）、Sizer（內(nèi)部控件區(qū)）、menubar（頂部菜單欄）、statusBar（底部狀態(tài)欄）。
　　第一步是添加一個(gè)Frame，這是GUI的輪廓基礎(chǔ)，其size（default為500；300）決定了GUI整體界面的大小。

　　第二步是在Frame下添加一個(gè)Sizer，后續(xù)所有控件均是放在Sizer里的。關(guān)于Sizer部分需要特別說(shuō)明一下，wxPython提供的Sizer類型有如下七種：wxBoxSizer、wxWrapSizer、wxStaticBoxSizer、wxGridSizer、wxFlexGridSizer、wxGridBagSizer、wxStdDialogButtonSizer，Sizer的樣式?jīng)Q定了后續(xù)控件的整體相對(duì)位置關(guān)系，選定了Sizer即選定了GUI界面樣式。關(guān)于這七種Sizer的具體樣式請(qǐng)見 https://docs./sizers_overview.html#sizers-overview。如果你覺(jué)得單個(gè)Sizer里的控件布局太單調(diào)，你可以嵌套使用Sizer，這是實(shí)現(xiàn)GUI界面控件布局多樣化的關(guān)鍵。

　　第三步是在Frame頂部添加一個(gè)menubar：

　　第四步是在Frame底部添加一個(gè)statusBar：

3.3多種控件

　　基礎(chǔ)布局搞定之后，接下來(lái)便是在Sizer里添加控件，wxPython支持的控件非常豐富，其中比較常用的是如下幾個(gè)：button（按鈕）、staticText（靜態(tài)顯示文本框）、textCtrl（輸入輸出文本框）、Choice（復(fù)選框）、checkBox（選中框）、slider（滑動(dòng)條）。前面痞子衡選擇的Sizer是wxBoxSizer，即自上而下布局，因此這些控件在Sizer是自上而下排列的，各個(gè)控件的位置后續(xù)在屬性里還可以微調(diào)，但改變不了自上而下的格局。

3.4控件屬性

　　添加了所有控件之后，下一步便是分別設(shè)置控件的屬性，進(jìn)一步調(diào)整控件。痞子衡以Button屬性為例，痞子衡勾選了如下4項(xiàng)比較重要的屬性設(shè)置，分別是name（button在后續(xù)python代碼的對(duì)象名，一般需要按其功能修改，修改后使得代碼閱讀/修改起來(lái)更直觀）、label（button在GUI里顯示的標(biāo)簽名，此處是MyButton，也需要按其功能修改，方便用戶使用軟件）、size（設(shè)置button的尺寸，這個(gè)尺寸最大不應(yīng)超過(guò)Sizer尺寸）、flag（調(diào)整對(duì)齊方式從而調(diào)整Button在Sizer里的位置）。另外有一個(gè)屬性不得不說(shuō)，即控件位置pos，在wxFormBuilder里設(shè)置這個(gè)屬性并不生效，痞子衡猜想可能跟Sizer樣式有關(guān)，因?yàn)镾izer決定了控件間相對(duì)位置關(guān)系，因此控件的pos不能隨意設(shè)置。

3.5觸發(fā)事件

　　有些控件是需要有響應(yīng)的，比如Button，在GUI軟件實(shí)際使用中，用戶如果按下了Button，應(yīng)該需要觸發(fā)某個(gè)任務(wù)，任務(wù)需要有響應(yīng)函數(shù)，這個(gè)響應(yīng)函數(shù)需要在【Events】里設(shè)置，Button的響應(yīng)函數(shù)在OnButtonClick里設(shè)置，痞子衡在這里指定了響應(yīng)函數(shù)名為showMessage。在wxFormBuilder里我們只需要指定控件響應(yīng)函數(shù)名即可，響應(yīng)函數(shù)的具體功能實(shí)現(xiàn)，不屬于wxFormBuilder設(shè)計(jì)范疇。

3.6生成代碼

　　當(dāng)GUI界面布局全部完成之后，需選擇File->Generate Code或F8生成python代碼，需要復(fù)制所有的python代碼并保存在單獨(dú)的文件里，痞子衡保存在了my_win.py文件里。

　　可以簡(jiǎn)單看一下這個(gè)my_win.py里的內(nèi)容，代碼里首先import了wx庫(kù)（即wxPython庫(kù)），并定義了名為MyFrame1的class，這個(gè)class主要包含兩個(gè)函數(shù)__init__()和showMessage()：__init__()里初始化了各個(gè)控件成員self.m_xx，這與我們?cè)趙xFormBuilder里添加控件是對(duì)應(yīng)的；showMessage()是Button控件的響應(yīng)函數(shù)，但這個(gè)響應(yīng)函數(shù)并沒(méi)有任何實(shí)質(zhì)代碼，當(dāng)然我們可以在這個(gè)函數(shù)里面實(shí)現(xiàn)Button響應(yīng)功能，但一般不建議直接在wxFormBuilder生成的代碼里添加代碼，因?yàn)槟憧赡茈S時(shí)調(diào)整GUI頁(yè)面布局，那么main_win.py里的代碼會(huì)重新生成，這樣會(huì)覆蓋我們自己添加的代碼，導(dǎo)致維護(hù)起來(lái)比較麻煩。

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

###########################################################################
## Python code generated with wxFormBuilder (version Jul 11 2018)
## http://www./
##
## 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()

四、使用wxFormBuilder生成的代碼

　　前面已經(jīng)使用wxFormBuilder生成GUI界面類MyFrame1并保存在my_win.py文件中，此時(shí)需要?jiǎng)?chuàng)建一個(gè)主函數(shù)文件去調(diào)用MyFrame1，下面是痞子衡創(chuàng)建的main_win.py中的代碼：

import wx
# 導(dǎo)入my_win.py中內(nèi)容
import my_win

# 創(chuàng)建mainWin類并傳入my_win.MyFrame1
class mainWin(my_win.MyFrame1):

   # 實(shí)現(xiàn)Button控件的響應(yīng)函數(shù)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()

　　最后讓我們測(cè)試一下這個(gè)GUI軟件，在命令行下運(yùn)行main_win.py

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

　　至此，wxPython GUI構(gòu)建工具wxFormBuilder痞子衡便介紹完畢了，掌聲在哪里~~~

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：西北望msm66g9f > 《培訓(xùn)》

舉報(bào)/認(rèn)領(lǐng)