wxPython如何Layout GUI

在wxPython裡面有兩種Layout方式 :

1. Absolute positioning (絕對位址) :
   指定widget的絕對位址就可以顯示在你想要的地方, 缺點是 :
   1. window改變大小時, 用絕對位址指定的widget不會改變位址跟大小, 跟我們一般認知 不太一樣.
   2. Layout要大改的時候, 程式通常都需要大改.
   3. 在不同platform可能會看起來不太一樣.
   優點則是很簡單完成, 不用考慮到每個元件的相對位址.
   
   
2. Sizer(相對位址) :
   利用一個BoxSizer包在widget元件的外面, 所以當window改變的時候, BoxSizer會跟著改變, 當然裡面的widget元件也會跟著改變.

當然用Sizer Layout出來的東西會比較符合我們的要求, 所以主要會對BoxSizer如何使用做介紹.

Sizer

1. wx.BoxSizer : 基本的Sizer, 可以決定widget元件要水平排放還是垂直排放
   
   
   
2. wx.StaticBoxSizer : 在wx.BoxSizer外面加入Text來說明裡面的元件的意義
   
3. wx.GridSizer : 可以加入像格子一樣的Sizer, 可以決定格子的長寬是多少, 加入元件的順序是
   由上而下, 由左而右.
   
4. wx.FlexGridSizer : 可以讓GridSizer的格子大小隨著Window size改變而變大變小, 使用function : AddGrowableRow, AddGrowableCol 來指定row還是col可以隨著視窗而改變
   
5. wx.GridBagSizer : 可以不先指定GridSizer格子數, 而在加入元件時, 指定要加入在哪個(row,col)的格子裡, 方便對於介面做設計
   

主要的語法都是大同小異, 所以在這裡主要介紹wx.BoxSizer為主.

# -*- coding: cp950 -*-
# border.py

import wx

class Border(wx.Frame):
  def __init__(self, parent, id, title):
      wx.Frame.__init__(self, parent, id, title, size=(250, 200))
      #建立最外層的panel
      panel = wx.Panel(self, -1)
      panel.SetBackgroundColour('#4f5049')
      #建立一個垂直的BoxSizer
      vbox = wx.BoxSizer(wx.VERTICAL)
      #建立內層的panel
      midPan = wx.Panel(panel, -1)
      midPan.SetBackgroundColour('#ededed')
      #把內層的panel加入BoxSizer中
      vbox.Add(midPan, 1, wx.EXPAND | wx.ALL, 5)
      #建立內層的panel
      midPan = wx.Panel(panel, -1)
      midPan.SetBackgroundColour('#ededed')
      #把內層的panel加入BoxSizer中
      vbox.Add(midPan, 1, wx.EXPAND | wx.ALL, 5)
      #設定外層panel的BoxSizer
      panel.SetSizer(vbox)
      self.Centre()
      self.Show(True)

app = wx.App()
Border(None, -1, '')
app.MainLoop()

在這段程式裡面主要說明如何加入一個BoxSizer到panel裡面.

產生一個外層的panel, 他的用處在於放置我們最後產生的BoxSizer. 接下來在BoxSizer中加入兩個
panel, 最後再把BoxSizer設定到外層的panel.

BoxSizer裡面可以加入其他widget元件, 而且BoxSizer裡面也可以加入BoxSizer, 利用這樣的方式,
我們就可以組合出我們想要的UI介面.

參考資料 :
The wxPython tutorial