BoxSizer布局是什么？

作者:课课家教育更新于： 2018-11-29 16:42:18

      1、什么是BoxSizer

　　BoxSizer是wxPython所提供的sizer中最简单和最灵活的。一个BoxSizer Django项目是一个垂 直列或水平行，窗口部件在其中从左至右或从上到下布置在一条线 上。虽然这听起来好像用处不大，但是来自相互之间嵌套sizer的能力使用户能够在每行或每列很容易放置不同数量的项目。由于每个sizer都是一个独立的实体，因此用户的布局就有了更多的灵活性。对于大多数的应用程序，一个嵌套有水平sizer 的垂直sier 是水将使用户能够创建自已所需要的布局。

　　2、使用BoxSizer布局python全栈开发分析：

　　尺寸器会管理组件的尺寸。 只要将部件添加到尺寸器上，再加上一些布局参数， 然后让尺寸器自己去管理父组件的尺寸。下面使用BoxSizer实现简单的布局。代码如下:

#-*-coding:utf-8-*-
import wx
class MyFrame(wx.Frame):
    def_ init_(self, parent, id):
    wx.Frame._init_(self, parent, id, '用户登录',size = (400, 300)) 
    #创建面板
    panel = wx.Panel(self)
    self.title = wx.StaticText(panel ,label="请输入用户名和密码”)
    #添加容器，容器中控件按纵向排列
    vsizer = wx.BoxSizer(Wx.VERTICAL)
    vsizer.Add(self.title,proportion=0,flag=wx.BOTTOM|wx.TOP|wx.ALIGN_CENTER,
border=15)
    panel.SetSizer(vsizer)
if_name_ =='_main_':
    app = wx.App()                         #初始化
    frame = MyFrame(parent=None,id=-1)     #实例MyFrame类，并传递参数
    frame. Show()                          #显示窗口
    app.MainLoop()                         #调用主循环方法

　　上述代码中，设置了增加背景控件(wx.Panel) ，并创建了一个面向对象wx.BoxSizer, 它带有一个决定它是水平还是垂直的参数(wx.HORIZONTAL或者wx.VERTICAL)，默认为水平。然后使用Add()方法将控件加入sizer,最后使用面板的SetSizer()方法设定它的尺寸器。

　　Add()方法的语法格式如下:

 Box.Add(control, proportion, flag, border)

　　参数说明如下:

　　control:：要添加的控件。

　　proportion：所添加控件在定义的定位方式所代表方向上占据的空间比例。如果有3个按钮，它们的比例值分别为0、1和2， 它们都已添加到一个宽度为30的水平排列wx. BoxSizer，起始宽度都是10。当sizer的宽度从30变成60时，按钮I的宽度保持不变，仍然是10,按钮2的宽度约为(10+(60- 30)x1/(1+2)=30,按钮2约为20。

　　flag: flag 参数与border参数结合使用可以指定边距宽度，包括以下选项:

　　wx.LEFT: 左边距。

　　wx.RIGHT:右边距。

　　wx.BOTTOM底边距。

　　wx.TOP:上:边距。

　　wx.ALL:上、 下，左、右4个边距。

　　可以通过竖线“|”操作符(operator) 来联合使用这些标志，比如运维堡垒机wx.LEFT| wx.BOTTOM.此外，flag参数还可以与proportion参数结合，指定控件本身的对齐(排列)方式，包括以下选项:

　　wx.ALIGN_ LEFT:左边对齐。

　　wx.ALIGN_ RIGHT: 右边对齐。

　　wx.ALIGN _TOP:顶部对齐。

　　wx.ALIGN _BOTTOM:底边对齐。

　　wx.ALIGN _CENTER _VERTICAL: 垂直对齐。

　　wx.ALIGN_ CENTER _HORIZONTAL:水平对齐。

　　wx.ALIGN _CENTER: 居中对齐，

　　wx.EXPAND: 所添加控件将占有sizer定位方向上所有可用的空间。

　　boder: 控制所添加控件的边距，就是在部件之间添加些像素的空白。

　　例、使用BoxSizer设置登录界面布局。具体代码如下：

#_*_coding:utf-8-*-
import wx

class MyFrame(wx.Frame):
   def_ init_(self, parent, id):
      wx.Frame._init_(self,parent,id,'用户登录', size=(400 300))
      #创建面板
      panel=wx.Panel(self))

      #创建“确定”和“取消”按钮，并绑定事件
      self.bt_confirm=wx.Button(panel, label='确定')
      self.bt_cancel=wx.Button(panel, label='取消')
      #创建文本，左对齐
      self.title=wx.SaticTex(panel, abel="请输入用户名和密码")
      self.label_user=wx.StaticText(panel, label="用户名:”)
      self.text_user=wx.TextCtrl(panel,style=wx.TE_LEFT)
      self.label_pwd=wx.StaticText(panel,label='密  码：')
      self.text_password=wx.TextCtrl(panel,style=wx.TE_PASSWORD)
      #添加容器， 容器中控件横向排列
      hsizer_user=wx.BoxSizer(wx.HORIZONTAL)
      hsizer_user.Add(self.label_user,proportion=0,flag=wx.ALL,border=5)
      hsizer_user.Add(self.text_user, proportion=1,flag=wx.ALL,border=5)
      hsizer_ pwd = wx.BoxSizer(wx.HORIZONTAL)
      hsizer_pwd.Add(self.label_pwd, proportion=0,flag=wx.ALL,border=5)
      hsizer_pwd.Add(self.text_password, proportion=1,flag=wx.ALL,border=5)
      hsizer_button=wx.BoxSizer(wx.HORIZONTAL)
      hsizer_button.Add(self.bt_confirm,proportion=0,flag=wx.ALIGN_CENTER, border=5)
      hsizer_button.Add(self.bt_cancel,proportion=0,flag=wx.ALIGN_CENTER, border=5)
      #添加容器，容器中控件以向排列
      vsizer_all= wx.BoxSizer(wx.VERTICAL)
      vsizer_all.Add(self.title,proportion=0,flag=wx.BOTTOM|wx.TOP|
wx.ALIGN_CENTER,border=15)
      vsizer_all.Add(hsizer_user, proportion=0,flag=wx.EXPAND|wx.LEFT|wx.RIGHT, border=45)
      vsizer_all.Add(hsizer_pwd, proportion=0,flag=wx.EXPAND|Wx.LEFT|wx.RIGHT, border=45)
      vsizer_all.Add(hsizer_button, proportion=0, fag=wx.ALIGN_CENTER|wx.TOP border=15)
      panel.SetSizer(vsizer_all)

if_ name_ =='_main_ : 
    app = wx.App0                                       #初始化
    frame = MyFrame(parent=None.id=-1)   #实例化MyFrame类,并传递参数
    frame. Show()                                         #显示窗口
    app.MainLoop()                                       #调用主循环方法

　　在上述代码中，首先创建按钮和文本控件，然后将其添加到容器中，并且设置横向排列。接着，置纵向排列。在布局的过程中，通过设置每个控件的 flag 和border 参数，实现控件位置间的布局。至此，使用BoxSizer将绝对位置布局更改为相对位置布局，运行结果如下图所示。