wxpython筆記：wxpython的界面佈局方式（二）

前言

前面wxpython筆記：wxpython的界面佈局方式（一）介紹了Grid、Box、Static box三種佈局方式，還剩下Flex grid與Grid bag沒有介紹。

• Flex grid：對grid sizer稍微作了些改變，當窗口部件有不一樣的尺寸時，能夠有更好的結果。
• Grid bag：grid sizer系列中最靈活的成員。使得網格中的窗口部件能夠更隨意的放置。

flex grid sizer和grid bag sizer本質上是grid的變種。

 

flex grid sizer

flex grid sizer是grid sizer的一個更靈活的版本。它與標準的grid sizer幾乎相同，除了下面的例外：

• 一、每行和每列能夠有各自的尺寸。經過proportion參數。
• 二、默認狀況下，當尺寸調整時，它不改變它的單元格的尺寸。若是須要的話，你能夠指定哪行或哪列應該增加。
• 三、它能夠在兩個方向之一靈活地增加，意思是你能夠爲個別的子元素指定比列量，而且你能夠指定固定方向上的行爲。

例如：

一個flex grid sizer是wx.FlexGridSizer的一個實例。類wx.FlexGridSizer是wx.GridSizer的子類，因此wx.GridSizer的屬性方法依然有效。

wx.FlexGridSizer的構造函數與其父類的相同：

wx.FlexGridSizer(rows, cols, vgap, hgap)

爲了當sizer擴展時，使一行或列也擴展，你須要使用適當的方法顯式地告訴該sizer該行或列是可擴展的：

AddGrowableCol(index, proportion=0) #指定某列的proportion參數
AddGrowableRow(index, proportion=0) #指定某行的proportion參數

當sizer水平擴展時，關於新寬度的默認行爲被等同地分配給每一個可擴展的列。一樣，一個垂直的尺寸調整也被等同地分配給每一個可擴展的行。

要改變這個默認的行爲而且使不一樣的行和列有不現的擴展比率，你須要使用proportion參數。若是proportion參數被使用了，那麼與該參數相關的新的空間就被分配給了

相應的行或列。例如，若是你有兩個尺寸可調整的行，而且它們的proportion分別是2和1，那麼這第一個行將獲得新空間的2/3，第二行將獲得1/3。

實例

import wx

class Example(wx.Frame):

    def __init__(self, parent, title):
        super(Example, self).__init__(parent, title = title, size = (300, 250))
        self.InitUI()
        self.Centre()
        self.Show()

    def InitUI(self):
        panel = wx.Panel(self)
        hbox = wx.BoxSizer(wx.HORIZONTAL)
        # 三行兩列
        fgs = wx.FlexGridSizer(3, 2, 10 ,10)
        title = wx.StaticText(panel, label = "Title")
        author = wx.StaticText(panel, label = "Name of the Author")
        review = wx.StaticText(panel, label = "Review")
        tc1 = wx.TextCtrl(panel)
        tc2 = wx.TextCtrl(panel)
        tc3 = wx.TextCtrl(panel, style = wx.TE_MULTILINE)
　　　　　
        fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author),
                     (tc2, 1, wx.EXPAND), (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])
        fgs.AddGrowableRow(2, 3) #第3行,佔3/5
        fgs.AddGrowableCol(1, 3) #第2列,佔3/5
        hbox.Add(fgs, proportion = 2, flag = wx.ALL |wx.EXPAND, border = 15)
        panel.SetSizer(hbox)
app = wx.App()
Example(None, title = 'FlexGridSizer')
app.MainLoop( )

 

 

 

 

grid bag sizer

grid bag sizer是對flex grid sizer進一步的加強。在grid bag sizer中有兩個新的變化：
一、可以將一個窗口部件添加到一個特定的單元格。
二、可以使一個窗口部件跨越幾個單元格（就像HTML表單中的表格所能作的同樣）。

例如：

grid bag sizer是wx.GridBagSizer的實例，wx.GridBagSizer是wx.FlexGridSizer的一個子類。這意味着全部flex grid sizer的屬性，grid bag sizer都適用。
wx.GridBagSizer的構造函數與它的父類有點不一樣：

wx.GridBagSizer(vgap=0, hgap=0)

在一個grid bag sizer中，你沒必要去指定行和列的數量，由於你能夠直接將子項目添加進特定的單元格——sizer將據此計算出網格的尺度。
重點：

在grid bag sizer中add方法也不同：

 Add(window, pos, span=wx.DefaultSpan, flag=0, border=0,
userData=None)
 Add(sizer, pos, span=wx.DefaultSpan, flag=0, border=0,
userData=None)
 Add(size, pos, span=wx.DefaultSpan, flag=0, border=0,
userData=None)
 AddItem(item)

其實重要的是兩個參數，由於grid bag sizer中你沒有指定行和列，因此，每個控件在哪一個位置，佔據多大的空間，都須要手動調整。
pos參數表明sizer中的窗口部件要賦予的單元格。
pos參數其實就是一個二維地址，從0開始計算

span參數表明窗口部件應該佔據的行和列的數量。
span參數是你設置控件佔據的大小，佔多少行，佔多少列

實例

import wx

class Example(wx.Frame):

    def __init__(self, parent, title):
        super(Example, self).__init__(parent, title=title)

        self.InitUI()
        self.Centre()
        self.Show()

    def InitUI(self):
        panel = wx.Panel(self)
        sizer = wx.GridBagSizer(0, 0)

        #pos=(0, 0)：放在1行1列，不設置span，默認span=(1,1)佔一行一列的大小
        text = wx.StaticText(panel, label="Name:")
        sizer.Add(text, pos=(0, 0), flag=wx.ALL, border=5)

        # pos=(0, 1)：放在1行2列，span=(1, 3)，佔一行三列的大小
        tc = wx.TextCtrl(panel)
        sizer.Add(tc, pos=(0, 1), span=(1, 3), flag=wx.EXPAND | wx.ALL, border=5)

        # pos=(0, 4)：放在1行5列，span=(6, 3)，佔六行三列的大小
        #這裏爲何是第5列，由於第一行前面兩個控件span=(1,1)，span=(1, 3)，1+3=4。
        tc4 = wx.TextCtrl(panel, style=wx.TE_MULTILINE)
        sizer.Add(tc4, pos=(0, 4), span=(6, 3), flag=wx.EXPAND | wx.ALL, border=5)

        text1 = wx.StaticText(panel, label="address")
        tc1 = wx.TextCtrl(panel, style=wx.TE_MULTILINE)
        sizer.Add(text1, pos=(1, 0), flag=wx.ALL, border=5)
        sizer.Add(tc1, pos=(1, 1), span=(1, 3), flag=wx.EXPAND | wx.ALL, border=5)


        text2 = wx.StaticText(panel, label="age")
        sizer.Add(text2, pos=(2, 0), flag=wx.ALL, border=5)
        tc2 = wx.TextCtrl(panel)
        sizer.Add(tc2, pos=(2, 1), flag=wx.ALL, border=5)
        text3 = wx.StaticText(panel, label="Mob.No")
        sizer.Add(text3, pos=(2, 2), flag=wx.ALIGN_CENTER | wx.ALL, border=5)
        tc3 = wx.TextCtrl(panel)
        sizer.Add(tc3, pos=(2, 3), flag=wx.EXPAND | wx.ALL, border=5)


        text4 = wx.StaticText(panel, label="Description")
        sizer.Add(text4, pos=(3, 0), flag=wx.ALL, border=5)
        tc4 = wx.TextCtrl(panel, style=wx.TE_MULTILINE)
        sizer.Add(tc4, pos=(3, 1), span=(1, 3), flag=wx.EXPAND | wx.ALL, border=5)
        sizer.AddGrowableRow(3)


        panel.SetSizerAndFit(sizer)


app = wx.App()
Example(None, title='GridBagSizer')
app.MainLoop()