wxPython 布局管理器（Sizer）|极客笔记

wxPython 布局管理器（Sizer）

1. 介绍

wxPython 是一个用于构建跨平台图形用户界面(GUI)的Python工具包。它基于 wxWidgets C++库，提供了一组丰富的GUI控件和布局管理器。其中，wxPython的布局管理器被广泛应用于创建界面，使得控件的排列和尺寸调整变得简单易用。

在 wxPython 中，布局管理器（Sizer）是一种自动调整控件大小和位置的机制。它们将控件放置在一个容器窗口（如顶层框架、对话框、面板等）内部，并根据用户定义的规则自动调整控件的大小和位置，以适应不同的窗口尺寸。通过使用布局管理器，我们可以很容易地设计出适用于不同平台和窗口尺寸的界面。

本文将详细介绍 wxPython 中的几种常用布局管理器，包括 BoxSizer、GridSizer、FlexGridSizer、GridBagSizer 和 StaticBoxSizer。我们将了解每种布局管理器的特点、用法和注意事项，并通过示例代码演示他们的工作原理。

2. BoxSizer

BoxSizer 是 wxPython 中最常用的布局管理器之一。它按照垂直或水平方向排列控件，并根据控件的最小尺寸和容器窗口的可用空间进行自动调整。BoxSizer的使用非常简单，只需要创建一个 BoxSizer 对象，并将要放置的控件添加到 BoxSizer 中即可。

2.1 垂直布局

我们首先来看一个简单的垂直布局的示例。我们创建一个顶层框架，并在其中添加两个按钮，它们会按照垂直方向排列。

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, title=title)

        # 创建一个垂直方向的 BoxSizer
        vbox = wx.BoxSizer(wx.VERTICAL)

        # 创建两个按钮
        button1 = wx.Button(self, label='Button 1')
        button2 = wx.Button(self, label='Button 2')

        # 添加按钮到 BoxSizer 中
        vbox.Add(button1, 0, wx.EXPAND|wx.ALL, 5)
        vbox.Add(button2, 0, wx.EXPAND|wx.ALL, 5)

        # 设置顶层框架的布局
        self.SetSizerAndFit(vbox)

app = wx.App()
frame = MyFrame(None, 'Vertical BoxSizer Example')
frame.Show()
app.MainLoop()

代码解释：

首先，我们创建了一个顶层框架 MyFrame，并传入了一个参数 title，用于设置顶层框架的标题。
然后，我们在 MyFrame 的构造函数中创建了一个垂直方向的 BoxSizer 对象，并赋值给变量 vbox。
接下来，我们创建了两个按钮 button1 和 button2。
然后，我们使用 vbox.Add() 方法将按钮添加到 vbox 中。第一个参数是要添加的控件，第二个参数是控制控件在 vbox 中的尺寸和位置的标志，第三个参数是控制控件的外边距。
最后，我们使用 self.SetSizerAndFit() 方法将 vbox 设置为顶层框架的布局管理器。这使得按钮能够自动调整大小和位置以适应顶层框架的大小。

2.2 水平布局

和垂直布局类似，我们也可以使用 BoxSizer 来实现水平布局。只需要在创建 BoxSizer 对象时，将 wx.VERTICAL 改为 wx.HORIZONTAL 即可。

下面是一个简单的水平布局示例，我们创建一个顶层框架，并在其中添加两个按钮，它们会按照水平方向排列。

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, title=title)

        # 创建一个水平方向的 BoxSizer
        hbox = wx.BoxSizer(wx.HORIZONTAL)

        # 创建两个按钮
        button1 = wx.Button(self, label='Button 1')
        button2 = wx.Button(self, label='Button 2')

        # 添加按钮到 BoxSizer 中
        hbox.Add(button1, 0, wx.EXPAND|wx.ALL, 5)
        hbox.Add(button2, 0, wx.EXPAND|wx.ALL, 5)

        # 设置顶层框架的布局
        self.SetSizerAndFit(hbox)

app = wx.App()
frame = MyFrame(None, 'Horizontal BoxSizer Example')
frame.Show()
app.MainLoop()

3. GridSizer

GridSizer 是 wxPython 中另一个常用的布局管理器。它以网格状方式排列控件，并可以控制每个控件在网格中的行号和列号。GridSizer的使用相对复杂一些，但提供了更高的灵活性。

3.1 创建 GridSizer

我们首先来看一个创建 GridSizer 的示例。我们创建一个顶层框架，并在其中添加多个按钮，它们会按照网格布局排列。

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, title=title)

        # 创建一个 2x2 的 GridSizer
        grid = wx.GridSizer(2, 2, 10, 10)  # 参数分别为行数、列数、垂直间距、水平间距

        # 创建多个按钮
        button1 = wx.Button(self, label='Button 1')
        button2 = wx.Button(self, label='Button 2')
        button3 = wx.Button(self, label='Button 3')
        button4 = wx.Button(self, label='Button 4')

        # 添加按钮到 GridSizer 中
        grid.Add(button1, 0, wx.EXPAND|wx.ALL, 5)
        grid.Add(button2, 0, wx.EXPAND|wx.ALL, 5)
        grid.Add(button3, 0, wx.EXPAND|wx.ALL, 5)
        grid.Add(button4, 0, wx.EXPAND|wx.ALL, 5)

        # 设置顶层框架的布局
        self.SetSizerAndFit(grid)

app = wx.App()
frame = MyFrame(None, 'GridSizer Example')
frame.Show()
app.MainLoop()

代码解释：

首先，我们创建了一个顶层框架 MyFrame。
然后，我们在 MyFrame 的构造函数中创建了一个 2×2 的 GridSizer 对象，并将相应的行数、列数、垂直间距和水平间距作为参数传递给 wx.GridSizer()。
接下来，我们创建了四个按钮 button1、button2、button3 和 button4。
然后，我们使用 grid.Add() 方法将按钮添加到 grid 中。第一个参数是要添加的控件，第二个参数是控制控件在 grid 中的位置的行号和列号，第三个参数是控制控件的尺寸和位置的标志，第四个参数是控制控件的外边距。
最后，我们使用 self.SetSizerAndFit() 方法将 grid 设置为顶层框架的布局管理器。这使得按钮能够自动调整大小和位置以适应顶层框架的大小。

3.2 控制行和列的尺寸

除了指定行和列的数量，我们还可以控制每行或每列的尺寸。在 wx.GridSizer() 创建 GridSizer 对象时，可以使用可选参数 vgap 和 hgap 来指定行和列的间距。此外，我们还可以使用 AddGrowableRow() 和 AddGrowableCol() 方法来控制行和列的尺寸。这使得我们可以设置某些行或列的尺寸为可伸缩的，以适应窗口的尺寸变化。

下面是一个示例代码，我们创建一个顶层框架，并在其中添加多个按钮，通过控制行和列的尺寸来实现不同的布局效果。

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, title=title)

        # 创建一个 3x3 的 GridSizer
        grid = wx.GridSizer(3, 3, 10, 10)

        # 创建多个按钮
        button1 = wx.Button(self, label='Button 1')
        button2 = wx.Button(self, label='Button 2')
        button3 = wx.Button(self, label='Button 3')
        button4 = wx.Button(self, label='Button 4')
        button5 = wx.Button(self, label='Button 5')
        button6 = wx.Button(self, label='Button 6')

        # 添加按钮到 GridSizer 中
        grid.Add(button1, 0, wx.EXPAND)
        grid.Add(button2, 0, wx.EXPAND)
        grid.Add(button3, 0, wx.EXPAND)
        grid.Add(button4, 0, wx.EXPAND|wx.ALIGN_CENTER_VERTICAL)
        grid.Add(button5, 0, wx.EXPAND)
        grid.Add(button6, 0, wx.EXPAND)

        # 设置行和列的尺寸
        grid.AddGrowableRow(1)
        grid.AddGrowableCol(1)
        grid.AddGrowableCol(2)

        # 设置顶层框架的布局
        self.SetSizerAndFit(grid)

app = wx.App()
frame = MyFrame(None, 'GridSizer Example')
frame.Show()
app.MainLoop()

代码解释：

首先，我们创建了一个顶层框架 MyFrame。
然后，我们在 MyFrame 的构造函数中创建了一个 3×3 的 GridSizer 对象，并将相应的行数、列数、垂直间距和水平间距作为参数传递给 wx.GridSizer()。
接下来，我们创建了六个按钮 button1、button2、button3、button4、button5 和 button6。
然后，我们使用 grid.Add() 方法将按钮添加到 grid 中。
接着，我们分别使用 grid.AddGrowableRow() 和 grid.AddGrowableCol() 方法将第二行和第二列设置为可伸缩的。
最后，我们使用 self.SetSizerAndFit() 方法将 grid 设置为顶层框架的布局管理器。

4. FlexGridSizer

FlexGridSizer 是 GridSizer 的一个变种，它提供了更大的灵活性和自由度。与 GridSizer 不同的是，FlexGridSizer 的行或列可以具有不同的大小，并且可以跨越多个行或列。

4.1 创建 FlexGridSizer

我们首先来看一个创建 FlexGridSizer 的示例。我们创建一个顶层框架，并在其中添加多个按钮，通过设置行和列的尺寸和跨度来实现不同的布局效果。

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, title=title)

        # 创建一个 FlexGridSizer
        flex_grid = wx.FlexGridSizer(3, 3, 10, 10)  # 参数分别为行数、列数、垂直间距、水平间距

        # 创建多个按钮
        button1 = wx.Button(self, label='Button 1')
        button2 = wx.Button(self, label='Button 2')
        button3 = wx.Button(self, label='Button 3')
        button4 = wx.Button(self, label='Button 4')
        button5 = wx.Button(self, label='Button 5')
        button6 = wx.Button(self, label='Button 6')

        # 添加按钮到 FlexGridSizer 中
        flex_grid.Add(button1, 0, wx.EXPAND)
        flex_grid.Add(button2, 0, wx.EXPAND)
        flex_grid.Add(button3, 1, wx.EXPAND)
        flex_grid.Add(button4, 0, wx.EXPAND)
        flex_grid.Add(button5, 0, wx.EXPAND|wx.ALIGN_CENTER_VERTICAL)
        flex_grid.Add(button6, 0, wx.EXPAND)

        # 设置行和列的尺寸和跨度
        flex_grid.AddGrowableRow(0)
        flex_grid.AddGrowableCol(1, 1)
        flex_grid.AddGrowableCol(2, 3)
        flex_grid.SetColStretchable(0, 2)

        # 设置顶层框架的布局
        self.SetSizerAndFit(flex_grid)

app = wx.App()
frame = MyFrame(None, 'FlexGridSizer Example')
frame.Show()
app.MainLoop()

代码解释：

首先，我们创建了一个顶层框架 MyFrame。
然后，我们在 MyFrame 的构造函数中创建了一个 FlexGridSizer 对象，并将相应的行数、列数、垂直间距和水平间距作为参数传递给 wx.FlexGridSizer()。
接下来，我们创建了六个按钮 button1、button2、button3、button4、button5 和 button6。
然后，我们使用 flex_grid.Add() 方法将按钮添加到 flex_grid 中。
接着，我们分别使用 flex_grid.AddGrowableRow() 和 flex_grid.AddGrowableCol() 方法将第一行、第二列和第三列设置为可伸缩的。
此外，我们使用 flex_grid.SetColStretchable() 方法将第一列设置为可伸缩的，并指定拉伸系数为2。

4.2 控制行和列的尺寸和跨度

FlexGridSizer 提供了一些方法来控制行和列的尺寸和跨度：

AddGrowableRow(row, proportion=0)：将指定的行设置为可伸缩的，可选参数 proportion 指定拉伸系数，默认为0。
AddGrowableCol(col, proportion=0)：将指定的列设置为可伸缩的，可选参数 proportion 指定拉伸系数，默认为0。
SetRowFlexSpecification(row, specification)：设置指定行的尺寸和跨度。参数 specification 是一个三元组 (min_size, size_type, proportion)，分别表示最小尺寸、尺寸类型和拉伸系数。尺寸类型可以是 wx.EXPAND、wx.SHAPED 或 wx.FIXED，默认为 wx.FIXED。拉伸系数默认为0。
SetColFlexSpecification(col, specification)：设置指定列的尺寸和跨度，参数和用法与 SetRowFlexSpecification() 方法相同。
SetFlexGridSizerMinSize(min_size)：设置 FlexGridSizer 的最小尺寸。