使用水平和垂直盒子调整器

Question

我在zetcode.com学习wxPython，但这个网站上代码多于解释。所以我想知道什么时候使用HORIZONTAL和什么时候使用VERTICAL的BoxSizers。我之所以问这个，是因为下面的代码没有按照我预期的那样运行：

vbox.Add(sbs, flag=wx.EXPAND | wx.ALL, border=5) # vbox/sbs is a vertical boxsizer/staticboxsizer

我原以为它不会扩展，因为我没有给任何proportion。但实际上它是横向扩展的，而不是纵向扩展。当我添加了proportion=1这个命令后，它才开始纵向扩展。虽然它是一个纵向的boxsizer，但为什么在没有给proportion的情况下，它会横向扩展呢？这些sizers让我感到困惑。

Answer 1

这其实是一个重复的问题，之前有人问过类似的内容，链接在这里：wxPython: BoxSizer中的项目只在垂直方向扩展，不在水平方向扩展

不管出于什么原因，wxWidgets的开发者决定让BoxSizers的扩展方向和它们的设置方向正好相反。换句话说，如果你把BoxSizer的方向设置为wx.HORIZONTAL，它实际上会在垂直方向扩展；而如果设置为wx.VERTICAL，它则会在水平方向扩展。如果你想让它在两个方向上都扩展，可以把比例设置为1或更大，并加上wx.EXPAND这个标志。

Answer 2

什么时候使用水平和垂直的 BoxSizer？

当你想让元素一个接一个地垂直排列时，就使用垂直 BoxSizer。

当你想让元素一个接一个地水平排列时，就使用水平 BoxSizer。

看看下面这张图，理解起来很简单：

示例代码：

我在 myPanelA 中创建了一个垂直 BoxSizer，在 myPanelB 中创建了一个水平 BoxSizer。你可以在上面的图片中看到它们的排列方式有什么不同。

import wx

class test(wx.Frame):

    def __init__(self, parent, id, title):

        wx.Frame.__init__(self,None, id, title, style=wx.DEFAULT_FRAME_STYLE)
        self.myPanelA = wx.Panel(self, -1, size=(200,200), pos=(0,0))
        self.myPanelB = wx.Panel(self, -1, size=(200,200), pos=(0,205))
        self.mytextA = wx.StaticText(self.myPanelA, -1, 'My-PanelA', size=(80,20))
        self.myPanelA.SetBackgroundColour('#F57373')
        self.mytextB = wx.StaticText(self.myPanelB, -1, 'My-PanelB', size=(80,20))
        self.myPanelB.SetBackgroundColour('#73F573')
        self.mySizerA = wx.BoxSizer(wx.VERTICAL)
        self.mySizerB = wx.BoxSizer(wx.HORIZONTAL)
        self.button1 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button2 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button3 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button4 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.button5 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.button6 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.mySizerA.Add(self.mytextA, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button1, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button2, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button3, 0, wx.ALL, 5)
        self.myPanelA.SetSizer(self.mySizerA)
        self.myPanelA.Layout()
        self.mySizerB.Add(self.mytextB, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button4, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button5, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button6, 0, wx.ALL, 5)
        self.myPanelB.SetSizer(self.mySizerB)
        self.myPanelB.Layout()

if __name__ == "__main__":
    app = wx.App()
    frame = test(parent=None, id=-1, title="Sizer demo")
    frame.Show()
    app.MainLoop()

如果你把这一行 self.mySizerA.Add(self.button1, 0, wx.ALL, 5) 改成

self.mySizerA.Add(self.button1, 1, wx.ALL, 5)，你会发现 button1 比其他按钮大，正如下面的图片所示。

这就是比例。

代码中的 5 表示你希望所有组件之间有 5 个点的间距。试着把它改成 10，看看会发生什么？

希望这些解释清楚明了。我建议你多试试这段代码。