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

 

wxpython的五種佈局方式：

• Grid：一個十分基礎的網格佈局。當你要放置的窗口部件都是一樣的尺寸且整齊地放入一個規則的網格中是使用它。
• Flex grid：對grid sizer稍微作了些改變，當窗口部件有不一樣的尺寸時，能夠有更好的結果。
• Grid bag：grid sizer系列中最靈活的成員。使得網格中的窗口部件能夠更隨意的放置。
• Box：在一條水平或垂直線上的窗口部件的佈局。當尺寸改變時，在控制窗口部件的的行爲上很靈活。一般用於嵌套的樣式。可用於幾乎任何類型的佈局。
• Static box：一個標準的box sizer。帶有標題和環線。

 

下面咱們會介紹Grid、Box、Static box三種佈局方式。

grid Sizer

Grid：一個十分基礎的網格佈局。當你要放置的窗口部件都是一樣的尺寸且整齊地放入一個規則的網格中是使用它。

一個grid sizer是類wx.GridSizer的一個實例。

構造函數顯式地設置四個屬性：

wx.GridSizer(rows, columns, vgap, hgap)

rows:建立多少行

columns：建立多少列

vgap：兩相鄰列間的間隔的象素量

hgap：兩相鄰行間的間隔的象素量

grid sizer中每一個空格的尺寸是相同的，即便每一個窗口部件的尺寸不一樣，grid sizer最適合用於全部子窗口相同尺寸的狀況。

wx.GridSizer 類經常使用方法：

• Add()添加在下一可用網格插槽的控件
• AddMany()在控制列表中添加每一個項目
• SetRows()設置在sizer中的行數
• GetRows()檢索在該sizer的行數
• SetCols()設置在sizer列數
• GetCols()檢索列數的大小
• SetVGap()設置單元之間的垂直間隙(像素)
• GetVGap()返回小區之間vgap的值
• SetHGap()設置單元之間的水平間隙(像素)
• GetHGap()返回指定的小區之間hgap的值

實例

import wx
class Example(wx.Frame):
    def __init__(self, parent, title):
        super(Example, self).__init__(parent, title=title, size=(300, 200))
        self.InitUI()
        self.Centre()
        self.Show()

    def InitUI(self):
        p = wx.Panel(self)
        gs = wx.GridSizer(4, 4, 5, 5)
        for i in range(1, 17):
            btn = "Btn" + str(i)
            gs.Add(wx.Button(p, label=btn), 0, wx.EXPAND)
            p.SetSizer(gs)#把GridSizer與框架關聯起來

app = wx.App()
Example(None, title='Grid Demo - www.yiibai.com')
app.MainLoop()

 

 

Box Sizer

 box:一個box sizer是一個垂直列或水平行，窗口部件在其中從左至右或從上到下佈置在一條線上。

box sizer是類wx.BoxSizer的實例，wx.BoxSizer是wx.Sizer的子類，相對於wx.Sizer，wx.BoxSizer幾乎沒有增長新的方法。

wx.BoxSizer的構造函數有一個參數：

wx.BoxSizer(orient)

參數orient表明該sizer的方向，它的取值能夠是wx.VERTICAL或wx.HORIZONTAL。

建立垂直與水平盒子：

Box1 = wx.BoxSizer(wxHORIZONTAL)
Box2 = wx.BoxSizer(wxVERTICAL)

box sizer是wxPython所提供的sizer中的最簡單和最靈活的sizer。

wx.BoxSizer 類的經常使用方法：

• SetOrientation()設置定向wxHORIZONTAL或wxVERTICAL
• AddSpacer()添加非伸縮性空間
• AddStretchSpacer()增長了伸縮空間，以便調整窗口的大小會影響控件的大小成比例
• Clear()從sizer移除子控件
• Detach()從sizer刪除控件不銷燬
• Insert()在指定位置插入一個子控件
• Remove()從sizer和銷燬刪除子控件

實例

import wx

class Mywin(wx.Frame):
    def __init__(self, parent, title):
        super(Mywin, self).__init__(parent, title=title,size=(600, 400))
        panel1 = wx.Panel(self)
        #垂直盒子
        vbox = wx.BoxSizer(wx.VERTICAL)
        #水平盒子
        nmbox = wx.BoxSizer(wx.HORIZONTAL)
        #建立兩個靜態文本
        fn = wx.StaticText(panel1, -1, label="電影名稱：")
        ln = wx.StaticText(panel1, -1,label="選擇片源：")
        #建立兩個輸入框
        self.nm1 = wx.TextCtrl(panel1, -1,size = (200,20),style=wx.ALIGN_LEFT)
        #在水平盒子裏添加上面三個
        nmbox.Add(fn, 0, wx.ALL| wx.EXPAND, 5)
        nmbox.Add(self.nm1, 0, wx.ALL|wx.EXPAND, 5)
        nmbox.Add(ln, 0,  wx.ALL|wx.EXPAND, 5)
        #建立下拉框
        self.languages = ['電影天堂', '80S電影網', '1905電影網', 'BT天堂', '龍部落','電影港','人人字幕組']
        self.choice =self.languages[0]
        self.combo = wx.ComboBox(panel1, choices=self.languages,value=self.languages[0])
        #在水平盒子添加下拉框
        nmbox.Add(self.combo, 1, wx.EXPAND | wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 5)


        #建立按鈕
        self.find_Button = wx.Button(panel1, label="查詢")
        self.Bind(wx.EVT_BUTTON, self.Onclick, self.find_Button)
        #在水平盒子裏添加查詢按鈕
        nmbox.AddSpacer(20)
        nmbox.Add(self.find_Button, 0, wx.ALIGN_CENTER_HORIZONTAL)
        #在垂直盒子裏添加水平盒子
        vbox.Add(nmbox, 0, wx.ALL | wx.CENTER, 5)

        multiLabel = wx.StaticText(panel1, -1, "查詢結果：")
        vbox.Add(multiLabel, 0, wx.ALL | wx.EXPAND, 5)

        # 建立文本域
        self.multiText = wx.TextCtrl(panel1, -1,size=(200, 200), style=wx.TE_MULTILINE)  # 建立一個文本控件
        self.multiText.SetInsertionPoint(0)  # 設置插入點
        #  在垂直盒子裏添加文本域
        vbox.Add(self.multiText, 1, wx.ALL | wx.EXPAND , 5)

        panel1.SetSizer(vbox)
        self.Show()

    def Onclick(self,event):
       print(self.choice)
       self.multiText.write(self.choice+"\n")
app = wx.App()
Mywin(None, '快搜')
app.MainLoop()

重點介紹的是box的add方法：

Add() 方法(從wxSizer繼承)它附加到sizer的下一行/列。

Box.Add(size, proportion, flag, border) 

size:須要添加的窗口。

border：參數是整數，設置控件之間間隔像素空間。

proportion：參數控制的控件響應於所述容器的尺寸改變其大小。

flag：參數的組合決定控件在sizer的外觀。

對齊標誌
wx.ALIGN_TOP
wx.ALIGN_BOTTO
Mwx.ALIGN_LEFT
wx.ALIGN_RIGHT
wx.ALIGN_CENTER_VERTICAL
wx.ALIGN_CENTER_HORIZONTAL

邊界標誌
wx.TOP
wx.BOTTOM
wx.LEFT
wx.RIGHT
wx.ALL

行爲標誌　　　　　　　　　　
wx.EXPAND     項目將擴大，以填補提供給它的空間(wx.GROW是同樣的)
wx.SHAPED     與EXPAND類似，但保持了項目的高寬比
wx.FIXED_MINSIZE 不容許該項目變得比其最初的最小尺寸更小
wx.RESERVE_SPACE_EVEN_IF_ HIDDEN 不容許測量器(sizer)回收項目空間，當它被隱藏時

flag參數

box sizer的佈局算法對待該sizer的主方向（當構建的時候已被它的方向參數所定義）和次要方向是不一樣的。特別地，proportion參數只適用於當sizer沿主
方向伸縮時，而wx.EXPAND標記僅適用於當sizer的尺寸在次方向上變化時。換句話說，當一個垂直的box sizer被垂直地繪製時，傳遞給每一個Add()方法調用的
參數proportion決定了每一個項目將如何垂直地伸縮。除了影響sizer和它的項目的水平增加外，參數proportion以一樣的方式影響水平的box sizer。在另外一方面，
次方向的增加是由對項目所使用的wx.EXPAND標記來控制的，因此，在一個垂直的box sizer中的項目將只在水平方向增加，若是它們設置了wx.EXPAND標記的話，
不然這些項目保持它們的最小或最合適的尺寸。

 

Static box Sizer

Static box ：一個static box合併了box sizer和靜態框（static box），靜態框在sizer的周圍提供了一個漂亮的邊框和文本標籤。

static box sizer是類wx.StaticBoxSizer的實例，wx.StaticBoxSizer是wx.BoxSizer的子類。

它的構造函數要求的參數是靜態框和方向：

wx.StaticBoxSizer(box, orient)

orient：意義與原wx.BoxSizer相同。

box：是一個wx.StaticBox。

wx.StaticBox類有一個用於wxPython控件的標準的構造函數，可是其中許多參數都有默認值，能夠忽略。

wx.StaticBox(parent, id, label, pos=wx.DefaultPosition, size=wx.DefaultSize, style=0, name=」staticBox」)

使用一個static box sizer，你不須要去設置pos, size, style, 或name參數，由於位置和尺寸將由sizer管理，而且沒用單獨用於wx.StaticBox的樣式。這使得構
造更簡單：

box = wx.StaticBox(self.panel, -1, boxlabel)

 

實例

步驟：

• 建立一個wx.StaticBox對象。
• 建立一個wx.StaticBoxSizer，將wx.StaticBox對象做爲其參數。

import wx


class Mywin(wx.Frame):
    def __init__(self, parent, title):
        super(Mywin, self).__init__(parent, title=title)
        #建立白板
        panel = wx.Panel(self)
        #建立垂直與水平box盒子
        vbox = wx.BoxSizer(wx.VERTICAL)
        nmbox = wx.BoxSizer(wx.HORIZONTAL)

        # 建立一個wx.StaticBox對象。
        # 聲明一個wx.StaticBoxSizer與建立的wx.StaticBox對象做爲其參數。
        nm = wx.StaticBox(panel, -1, 'Name:')
        nmSizer = wx.StaticBoxSizer(nm, wx.VERTICAL)

        #構建靜態文本框與輸入框
        fn = wx.StaticText(panel, -1, "First Name")
        nm1 = wx.TextCtrl(panel, -1, style=wx.ALIGN_LEFT)
        ln = wx.StaticText(panel, -1, "Last Name")
        nm2 = wx.TextCtrl(panel, -1, style=wx.ALIGN_LEFT)
        #在水平盒子裏添加進上面四個
        nmbox.Add(fn, 0, wx.ALL | wx.CENTER, 5)
        nmbox.Add(nm1, 0, wx.ALL | wx.CENTER, 5)
        nmbox.Add(ln, 0, wx.ALL | wx.CENTER, 5)
        nmbox.Add(nm2, 0, wx.ALL | wx.CENTER, 5)
        #在StaticBoxSizer添加進水平盒子
        nmSizer.Add(nmbox, 0, wx.ALL | wx.CENTER, 10)
        
        #在垂直盒子裏添加StaticBoxSizer盒子
        vbox.Add(nmSizer, 0, wx.ALL | wx.CENTER, 5)
        panel.SetSizer(vbox)
        self.Centre()
        panel.Fit()
        self.Show()
        # 關係：
        # 垂直box盒子添加StaticBoxSizer盒子
        # StaticBoxSizer盒子添加水平盒子  
app = wx.App()
Mywin(None, 'StaticBoxSizer')
app.MainLoop()

從結果來看：一個static box閉box盒子多了一層邊框，和文本。