wxpython 視窗排版- proportion/flag/border參數說明，wxpythonproportion

wxpython 視窗排版- proportion/flag/border參數說明，wxpythonproportion

新學習wxpython，一直糾結於視窗控制項的排版，經過幾天的查資料、實驗，總結如下。

1、需求執行個體來個執行個體，視窗有3行控制項 

第一行是文本提示（大小不變，文字靠左對齊，控制項居左）。 

第二行依次為文本提示（控制項居左，大小不變，文字橫向靠左對齊，文字縱向置中對齊，），文本輸入框（控制項居左，大小橫向向右縮放，縱向不縮放），按鈕（控制項居右，右邊固定，大小向左縮放），按鈕（控制項居右，大小不變）。

第三行多行文字框（控制項擴充，大小四個方向擴充，直到佔滿剩餘空間）

 

#coding=utf-8

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, id):
        wx.Frame.__init__(self, parent, id, u'測試面板Panel', size = (400, 300))
    
        #建立面板
        panel = wx.Panel(self) 
        #建立open，save按鈕
        self.bt_open = wx.Button(panel,label='open')
        self.bt_save = wx.Button(panel,label='save')
        #建立文本，靠左對齊，自由擴充
        self.st_tips = wx.StaticText(panel ,0,u"請輸入檔案路徑",style=wx.ALIGN_LEFT|wx.EXPAND)
        self.st_tips2 = wx.StaticText(panel ,0,u"檔案路徑:",style=wx.ALIGN_LEFT|wx.EXPAND)
        self.text_filename = wx.TextCtrl(panel,style=wx.ALIGN_LEFT)
        #建立常值內容框，多行，垂直捲軸
        self.text_contents = wx.TextCtrl(panel,style=wx.TE_MULTILINE|wx.HSCROLL)
    
        #添加容器，容器中控制項按橫向並排排列
        bsizer_top = wx.BoxSizer(wx.VERTICAL)
        #添加容器，容器中控制項按縱向並排排列
        bsizer_center = wx.BoxSizer(wx.HORIZONTAL)
        bsizer_bottom = wx.BoxSizer(wx.HORIZONTAL)
        
        #在容器中添加st_tips控制項，proportion=0 代表當容器大小變化時，st_tips控制項的大小不變
        #flag = wx.EXPAND|wx.ALL中，wx.ALL代表在st_tips控制項四周都增加寬度為x的空白，x取border參數的值，本例是border=5
        # wx.EXPAND代表st_tips控制項佔滿可用空間。
        bsizer_top.Add(self.st_tips,proportion=0,flag=wx.EXPAND|wx.ALL, border = 5 )
        #proportion=1 代表當容器大小變化時，st_tips2控制項的大小變化，變化速度為1
        bsizer_center.Add(self.st_tips2,proportion=0,flag=wx.ALL|wx.ALIGN_CENTER_VERTICAL|wx.ALIGN_LEFT,border = 5 )
        #proportion=2 代表當容器大小變化時，text_filename控制項的大小變化，變化速度為2
        bsizer_center.Add(self.text_filename,proportion=2,flag=wx.EXPAND|wx.ALL,border=5)
        bsizer_center.Add(self.bt_open,proportion=1,flag=wx.ALL,border=5)
        bsizer_center.Add(self.bt_save,proportion=0,flag=wx.ALL,border=5)
        
        bsizer_bottom.Add(self.text_contents,proportion=1 ,flag = wx.EXPAND|wx.ALL,border =5 )
        
        #wx.VERTICAL 橫向分割
        bsizer_all = wx.BoxSizer(wx.VERTICAL)
        #添加頂部sizer，proportion=0 代表bsizer_top大小不可變化
        bsizer_all.Add(bsizer_top,proportion=0,flag=wx.EXPAND|wx.ALL,border=5)
        bsizer_all.Add(bsizer_center,proportion=0,flag=wx.EXPAND|wx.ALL,border=5)
        #添加頂部sizer，proportion=1 代表bsizer_bottom大小變化
        bsizer_all.Add(bsizer_bottom,proportion=1,flag=wx.EXPAND|wx.ALL,border=5)
        self.Bind(wx.EVT_BUTTON,self.onOpen,self.bt_open)
        #self.Bind(wx.EVT_BUTTON, self.OnCloseMe, button)
    
        panel.SetSizer(bsizer_all)


    def onOpen(self,event): 
        self.text_contents.AppendText(str(self.GetSizeTuple()))
        self.text_contents.AppendText(str(self.bt_open.GetSizeTuple()))
        self.text_contents.AppendText(str(self.text_filename.GetSizeTuple()))
        self.SetSize((700,600))
        self.text_contents.AppendText(str(self.GetSizeTuple()))
        self.text_contents.AppendText(str(self.bt_open.GetSizeTuple()))
        self.text_contents.AppendText(str(self.text_filename.GetSizeTuple()))        


if __name__ == '__main__':
    app = wx.PySimpleApp()
    frame = MyFrame(parent = None, id = -1)
    frame.Show()
    frame.Center()
    app.MainLoop()
3、總結1、Box = wx.BoxSizer(integer orient)

orientation參數，代表控制項相片順序，wx.VERTICAL 垂直排列   ，wx.HORIZONTAL 水平排列

形象一點就是：前者是三 , 橫向3個1，  後者是111，縱向3個1

 

2、sizer.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)

window 參數：代表要添加的控制項。 

 

roportion參數：所添加控制項在定義的定位方式所代表方向上，佔據的空間比例。

假設有三個按鈕，它們的比例值分別為0、1和2，它們都已添加到一個寬度為30的水平排列wx.BoxSizer，起始寬度都是10。

當sizer的寬度從30變成60時，按鈕1的寬度保持不變，仍然是10，按鈕2的寬度約為（10+（60-30）*1/(1+2))=30 ，按鈕2約為20。

不太嚴謹說按鈕2佔有增量部分1/3，按鈕3佔有增量部分2/3。

 

border參數：控制所添加控制項的邊距，就是在組件之間添加一些像素的空白。

border參數與flag參數結合生效，為了應用邊框參數，需要在flag參數中定義哪一邊使用邊框，譬如flag=wx.RIGHT代表右邊距為border寬。

 

flag參數：

如前文所述，flag參數與border參數結合指定邊距寬度，包括以下選項：

wx.LEFT ，左邊距
此外，flag參數還可以與proportion參數結合，指定控制項本身的對齊（排列）方式，包括以下選項：
flag參數可以使用wx.EXPAND標誌，那麼所添加控制項將佔有sizer定位方向的方向上所有可用的空間。

以上。