新學習wxpython,一直糾結於窗口控件的排版,經過幾天的查資料、試驗,總結如下。
1、需求實例
來個實例,窗口有3行控件第一行是文本提示(大小不變,文字左對齊,控件居左)。
第二行依次為文本提示(控件居左,大小不變,文字橫向左對齊,文字縱向居中對齊,),文本輸入框(控件居左,大小橫向向右縮放,縱向不縮放),按鈕(控件居右,右邊固定,大小向左縮放),按鈕(控件居右,大小不變)。
第三行多行文本框(控件擴展,大小四個方向擴展,直到占滿剩余空間)
圖1、窗口縮放前效果
圖2、窗口縮放后效果
2、代碼
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 )
三個寫法不一樣,功能也不同,但定義值都有,一旦寫錯很難發現,但會出現奇奇怪怪的問題。
以上。
