wxpython 窗口排版- proportion/flag/border參數說明


新學習wxpython,一直糾結於窗口控件的排版,經過幾天的查資料、試驗,總結如下。

1、需求實例

來個實例,窗口有3行控件  

第一行是文本提示(大小不變,文字左對齊,控件居左)。 

第二行依次為文本提示(控件居左,大小不變,文字橫向左對齊,文字縱向居中對齊,),文本輸入框(控件居左,大小橫向向右縮放,縱向不縮放),按鈕(控件居右,右邊固定,大小向左縮放),按鈕(控件居右,大小不變)。

第三行多行文本框(控件擴展,大小四個方向擴展,直到占滿剩余空間)

 

 

圖1、窗口縮放前效果 

 

圖2、窗口縮放后效果

2、代碼 

# 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 ')
         # 創建文本,左對齊,注意這里style=wx.TE_LEFT,不是wx.ALIGN_LEFT  ,表示控件中的輸入光標是靠左對齊。
        self.st_tips = wx.StaticText(panel ,0,u " 請輸入文件路徑 ",style=wx.TE_LEFT )
        self.st_tips2 = wx.StaticText(panel ,0,u " 文件路徑: ",style=wx.TE_LEFT )
        self.text_filename = wx.TextCtrl(panel,style=wx.TE_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 ,左邊距
wx.RIGHT,右邊距
wx.BOTTOM,底邊距
wx.TOP,上邊距
wx.ALL,上下左右四個邊距

可以通過豎線 “|”操作符(operator),比如wx.LEFT | wx.BOTTOM,來聯合使用這些標志。

 


此外,flag參數還可以與proportion參數結合,指定控件本身的對齊(排列)方式,包括以下選項:
wx.ALIGN_LEFT 左邊固定,右邊擴展(當proportion >0 時,下同)
wx.ALIGN_RIGHT 右邊不動
wx.ALIGN_TOP
wx.ALIGN_BOTTOM
wx.ALIGN_CENTER_VERTICAL
wx.ALIGN_CENTER_HORIZONTAL
wx.ALIGN_CENTER

此外,flag參數可以使用wx.EXPAND標志,那么所添加控件將占有sizer定位方向的方向上所有可用的空間。

最后總結一下,很重要:

1、wx.LEFT是指控件邊框左邊是否留空,該常量的定義在_core.py源文件中,

用法:bsizer_top.Add(self.st_tips,proportion=0,flag=wx.LEFT, border = 5 )

 

2、 wx.ALIGN_LEFT是控件本身居左對齊,該常量定義也在_core.py源文件中。

用法:bsizer_top.Add(self.st_tips,proportion=0,flag=wx.ALIGN_LEFT|wx.LEFT, border = 5 )

 

3、wx.TE_LEFT是控件光標居左對齊,該常量定義在_controls.py源文件中。

用法:self.text_ctrl_1 = wx.TextCtrl(self, wx.ID_ANY, "", style=  wx.TE_LEFT )

 

三個寫法不一樣,功能也不同,但定義值都有,一旦寫錯很難發現,但會出現奇奇怪怪的問題。

 

以上。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM