一次搞懂Python BoxSizer @ 史坦利Stanley程式Maker的部落格

一次搞懂BoxSizer

没有這些額外的參數設定，則所有的元件會依原本的大小放置在box的左上角內，而所有元件的大小不會依視窗大小的變化不會伸展或縮減。
如下圖所示，有些元件高度有高有低不會變大小。所以我們必須適當的設定proportions, flags, and borders 參數

box = wx.BoxSizer(integer orient)
box.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)

下面是一個基本的簡單例子

class BoxSizerPanel(wx.Panel):
def __init__(self, parent, *args, **kwargs):
super(BoxSizerPanel, self).__init__(*args, **kwargs)

        # Attributes
        self._field1 = wx.TextCtrl(self)
        self._field2 = wx.TextCtrl(self)

# Layout
self._DoLayout()

def _DoLayout(self):
    vsizer = wx.BoxSizer(wx.VERTICAL)
    field1_sz = wx.BoxSizer(wx.HORIZONTAL)
    field2_sz = wx.BoxSizer(wx.HORIZONTAL)
    # 增加兩個 labels
    field1_lbl = wx.StaticText(self, label="Field 1:")
    field2_lbl = wx.StaticText(self, label="Field 2:")

    # label and field 加至第一個水平box
   field1_sz.AddSpacer(50) #增加50 px 空白
    field1_sz.Add(field1_lbl) #加入label 1
    field1_sz.AddSpacer(5) #增加 5px 空白
    field1_sz.Add(self._field1) #加入field 1
    field1_sz.AddSpacer(50)
   # label and field 加至第二個水平box
    field2_sz.AddSpacer(50)
    field2_sz.Add(field2_lbl)
    field2_sz.AddSpacer(5)
    field2_sz.Add(self._field2)
    field2_sz.AddSpacer(50)
    # 增加二個水平box 至一個較大的直box
    vsizer.AddSpacer(50)
    vsizer.Add(field1_sz)
    vsizer.AddSpacer(15)
    vsizer.Add(field2_sz)
    vsizer.AddSpacer(50)
    # 指定主要外層box 至panel
    self.SetSizer(vsizer)

sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(wx.Button(self, -1, 'An extremely long button text'), 0, 0, 0)
sizer.Add(wx.Button(self, -1, 'Small button'), 0, 0, 0)
self.SetSizer(sizer)

_images/boxsizer1.png

 sizer = wx.BoxSizer(wx.VERTICAL)
 sizer.Add(wx.Button(self, -1, 'An extremely long button text'), 0, 0, 0)
 sizer.Add(wx.Button(self, -1, 'Small button'), 0, 0, 0)
 sizer.SetSizeHints(self)
 self.SetSizer(sizer)

_images/boxsizer2.png

The proportion parameter

sizer = wx.BoxSizer(wx.VERTICAL)
# Second button is three times as tall as first button
sizer.Add(wx.Button(self, -1, 'An extremely long button text'), 1, 0, 0)
sizer.Add(wx.Button(self, -1, 'Small button'), 3, 0, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer3.png

sizer = wx.BoxSizer(wx.VERTICAL)
# First button is 3/2 the height of the second button
sizer.Add(wx.Button(self, -1, 'An extremely long button text'), 3, 0, 0)
sizer.Add(wx.Button(self, -1, 'Small button'), 2, 0, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer32.png

If one of the proportion parameters is 0, that wx.Window will be the minimum size, and the others will resize proportionally:

sizer = wx.BoxSizer(wx.VERTICAL)
# Third button is twice the size of the second button
sizer.Add(wx.Button(self, -1, 'An extremely long button text'), 0, 0, 0)
sizer.Add(wx.Button(self, -1, 'Small button'), 1, 0, 0)
sizer.Add(wx.Button(self, -1, 'Another button'), 2, 0, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer33.png

The flags and border parameters¶

Sizer Flag	Description
`wx.TOP` `wx.BOTTOM` `wx.LEFT` `wx.RIGHT` `wx.ALL`	These flags are used to specify which side(s) of the sizer item the border width will apply to.
`wx.EXPAND`	The item will be expanded to fill the space assigned to the item.
`wx.SHAPED`	The item will be expanded as much as possible while also maintaining its aspect ratio
`wx.FIXED_MINSIZE`	Normally wx.Sizers will use `wx.Window.GetEffectiveMinSize` to determine what the minimal size of window items should be, and will use that size to calculate the layout. This allows layouts to adjust when an item changes and its best size becomes different. If you would rather have a window item stay the size it started with then use `wx.FIXED_MINSIZE`.
`wx.RESERVE_SPACE_EVEN_IF_HIDDEN`	Normally wx.Sizers don’t allocate space for hidden windows or other items. This flag overrides this behavior so that sufficient space is allocated for the window even if it isn’t visible. This makes it possible to dynamically show and hide controls without resizing parent dialog, for example.
`wx.ALIGN_CENTER` or `wx.ALIGN_CENTRE` `wx.ALIGN_LEFT` `wx.ALIGN_RIGHT` `wx.ALIGN_RIGHT` `wx.ALIGN_TOP` `wx.ALIGN_BOTTOM` `wx.ALIGN_CENTER_VERTICAL` or `wx.ALIGN_CENTRE_VERTICAL` `wx.ALIGN_CENTER_HORIZONTAL` or `wx.ALIGN_CENTRE_HORIZONTAL`	The `wx.ALIGN*` flags allow you to specify the alignment of the item within the space allotted to it by the sizer, adjusted for the border if any.

sizer = wx.BoxSizer(wx.VERTICAL)
# Second button is right aligned
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.ALIGN_RIGHT, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer4.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Second button is center-aligned
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.ALIGN_CENTER, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer41.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Second button expands to the whole parent's width
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.EXPAND, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer5.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Second button will scale proportionally
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 1, wx.SHAPED, 0)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer51.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Border size effects
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.EXPAND | wx.LEFT, 20)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer53.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Border size effects
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.EXPAND | wx.LEFT | wx.RIGHT, 20)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer54.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Border size effects
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.EXPAND | wx.LEFT | wx.RIGHT | wx.TOP, 20)
sizer.SetSizeHints(self)
self.SetSizer(sizer)

_images/boxsizer55.png

sizer = wx.BoxSizer(wx.VERTICAL)
# Border size effects
sizer.Add(wx.Button(self, -1, "An extremely long button text"), 0, 0, 0)
sizer.Add(wx.Button(self, -1, "Small Button"), 0, wx.EXPAND | wx.ALL, 20)
sizer.SetSizeHints(self)
self.SetSizer(sizer)