Python圖形界面開發—wxPython庫的布局管理及頁面切換

前言

wxPython是基於Python的跨平台GUI擴展庫，對wxWidgets（ C++ 編寫）封裝實現。GUI程序的開發中界面布局是很重要的一個部分，合理的頁面布局能夠給予用戶良好使用體驗。雖然在GUI的控件和窗口布局上可以使用坐標，但更多且更方便的是用sizer來布局。本文主要介紹wxPython的布局管理應用以及在此基礎上實現的頁面切換功能。

最小架構實現

wxPython程序由組件wx.App、wx.Frame、wx.Panel以及其他widget控件/窗體（如wx.ComboBox, wx.Button）組成。一個wxPython程序只有一個wx.App創建的實例用於執行事件循環，至少一個Frame對象作為控件的容器，調用Show()方法使其顯示，Frame中至少有一個Panel用來控制布局的窗口，而其他的控件建立在Panel之上。

在App類中未定義init()方法，但在Python中實例化一個對象時父方法wx.App.init()將被自動調用，如果定義了init()方法，需要手動調用基類的init()方法，如Frame類和Panel類中的實現（創建Frame類、Panel類可更靈活地設計我們所需要的GUI）。OnInit()是wxPython所特有的一個方法，在應用程序創建后到事件循環開始前被wx.App父類調用，需返回一個True的布爾值。SetTopWindow()方法設置當前Frame為應用程序的頂級窗口，該方法繼承自wx.App父類。

應用程序一旦進入主事件循環，控制權將轉交給wxPython，程序響應用戶的鼠標和鍵盤事件。當應用程序的所有Frame關閉后app.MainLoop()方法結束並退出程序。

class Panel(wx.Panel): def __init__(self,parent): wx.Panel.__init__(self,parent=parent, id=-1) pass class Frame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent = None, title = u'量化軟件', size=(1000,600), style=wx.DEFAULT_FRAME_STYLE^wx.MAXIMIZE_BOX) self.MPL = Panel(self) pass class App(wx.App): def OnInit(self): self.frame = Frame() self.frame.Show() self.SetTopWindow(self.frame) return True if __name__ == '__main__': app = App() app.MainLoop()

布局管理介紹

控件可通過絕對坐標形式定位在容器中，由構造函數中pos參數指定以像素為單位的坐標值。如wx.TextCtrl的構造函數所示：

wx.TextCtrl(parent,id,value='',pos=wx.DefaultPostion,size=wx.DefaultSize,style=0,validator=wx.DefaultValidator,name=wx.TextCtrlNameStr)

絕對定位方式需為每一個控件設計大小和位置，修改布局時十分繁瑣，而且調整容器（Frame或Panel）尺寸時控件無法對應改變。wxPython的布局管理器Sizer能對容器中的控件進行更優雅的管理，隨着容器尺寸的變化自動計算控件最優化的大小和位置。

wxPython中定義的sizer主要有wx.BoxSizer，wx.StaticBoxSizer，wx.GridSizer，wx.FlexGridSizer和wx.GridBagSizer，它們繼承了Wx.Sizer基類，並在此之上各自具有管理窗口布局的規則。

• GridSizer: 最基礎的二維網格布局，可指定行列，每個網格的尺寸相同。控件以左到右和由上到下方順序添加於網格內。
• FlexGridSizer：在Grid的基礎上進行了改進，網格的尺寸可以不同。
• GridBagSizer：最靈活的網格布局器，可以隨意放置在網格中放置組件。
• BoxSizer：在一條水平線或垂直線上進行布局，網格的尺寸可以不同，通常用於嵌套。
• StaticBoxSizer：標准的box sizer，提供了圍繞框以及頂部文本標簽。

以下通過例程介紹Sizer布局應用。wx.BoxSizer的布局方向分為橫向和縱向兩種，並且可以在橫向或縱向方向上包含子sizer以創建嵌套的布局。按下表所示要求進行布局，即ParaPanel、MPL、RightPanel三個面板采用橫向boxsizer布局。ParaPanel嵌套wx.StaticBoxSizer布局器及wx.RadioBox和wx.TextCtrl控件，三者采用縱向boxsizer排布。RightPanel中嵌套wx.FlexGridSizer布局器指定3個wx.Button控件按網格尺寸排布。

（1） 分別創建ParaPanel、MPL、RightPanel面板，創建一個縱向wx.BoxSizer用於排列ParaPanel中控件，創建一個橫向wx.BoxSizer用於排布ParaPanel、MPL、RightPanel面板。

self.MPL = PanelA(self) self.ParaPanel = wx.Panel(self,-1) self.RightPanel = wx.Panel(self,-1) vboxnetA = wx.BoxSizer(wx.VERTICAL)#縱向box  self.HBoxPanel = wx.BoxSizer(wx.HORIZONTAL)

（2）創建一個wx.StaticBox靜態框對象，創建wx.StaticBoxSizer布局管理器將靜態框作為參數傳入進行布局管理，創建控件並通過Add()方法添加至StaticBoxSizer布局管理器中。

paraInput_Box = wx.StaticBox(self.ParaPanel, -1, u'參數輸入')
paraInput_Sizer = wx.StaticBoxSizer(paraInput_Box, wx.VERTICAL)
stockCode_Text = wx.StaticText(self.ParaPanel, -1, u'模塊名稱')
stockData_Text = wx.StaticText(self.ParaPanel, -1, u'模塊型號')
paraInput_Sizer.Add(stockCode_Text,proportion=0,flag=wx.EXPAND|wx.LEFT|wx.BOTTOM|wx.RIGHT,border=5)
paraInput_Sizer.Add(stockData_Text,proportion=0,flag=wx.EXPAND|wx.LEFT|wx.BOTTOM|wx.RIGHT,border=5)

（3） 創建wx.GridSizer布局管理器，創建控件通過Add()方法添加至均勻分布的二維網格中，即同一行的控件具有相同高度，同一列中控件具有相同的寬度。對RightPanel調用SetSizer()方法使布局有效。

self.FlexGridSizer=wx.FlexGridSizer(rows=3, cols=1, vgap=3, hgap=3) self.FlexGridSizer.Add(self.Button1,proportion = 0, border = 5,flag = wx.ALL | wx.EXPAND) self.FlexGridSizer.Add(self.Button2,proportion = 0, border = 5,flag = wx.ALL | wx.EXPAND) self.FlexGridSizer.Add(self.Button3,proportion = 0, border = 5,flag = wx.ALL | wx.EXPAND) self.FlexGridSizer.SetFlexibleDirection(wx.BOTH) self.RightPanel.SetSizer(self.FlexGridSizer)

（4） ParaPanel中控件添加至縱向BoxSizer中，而后與MPL、RightPanel一同添加至橫向BoxSizer以實現嵌套布局。Add()方法中proportion為比例控制，假如在橫向BoxSizer中兩個控件的proportion相等，那么Frame尺寸橫向改變時，控件大小保持相同，若proportion=0則大小不變。

vboxnetA.Add(paraInput_Sizer,proportion=0,flag=wx.EXPAND|wx.LEFT|wx.BOTTOM|wx.RIGHT,border=5) vboxnetA.Add(self.IndicatInput_Box,proportion=0,flag=wx.EXPAND|wx.LEFT|wx.BOTTOM|wx.RIGHT,border=5) vboxnetA.Add(self.TextAInput,proportion=0,flag=wx.EXPAND|wx.LEFT|wx.BOTTOM|wx.RIGHT,border=5) self.ParaPanel.SetSizer(vboxnetA) self.HBoxPanel.Add(self.ParaPanel,proportion = 1, border = 2,flag = wx.ALL | wx.EXPAND) self.HBoxPanel.Add(self.MPL,proportion = 1, border = 2,flag = wx.ALL | wx.EXPAND) self.HBoxPanel.Add(self.RightPanel,proportion = 1, border = 2,flag = wx.ALL | wx.EXPAND) self.SetSizer(self.HBoxPanel)

頁面切換實現3噸叉車價格

此章節介紹在GUI界面中點擊按鈕實現主頁面的切換功能。sizer布局器除了Add()方法外還包括Detach()方法移除控件，Insert()方法插入控件等，可支持動態布局的實現，此處在按鈕事件任務中動態創建OptionPanel面板，使用Replace()方法替換MPL面板，通過Layout()函數強制Sizer重新繪制界面。點擊Diag按鈕后界面如下圖所示。

def Button1Event(self,event): #創建選項欄目面板 self.OptionPanel = PanelB(self) self.HBoxPanel.Hide(self.MPL) self.HBoxPanel.Replace(self.MPL,self.OptionPanel) self.SetSizer(self.HBoxPanel) self.HBoxPanel.Layout() self.ProcessPanelB()