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 )

 

三个写法不一样，功能也不同，但定义值都有，一旦写错很难发现，但会出现奇奇怪怪的问题。

以上。