wxpython 窗口排版- proportion/flag/border参数说明
新学习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 )
三个写法不一样,功能也不同,但定义值都有,一旦写错很难发现,但会出现奇奇怪怪的问题。
以上。