Python图形用户界面之布局入门。

wxPython布局主要有四种布局方式：

• Box布局
• StaticBox布局
• Grid布局 
• FlexGrid布局

Box布局主要方法：

wx.BoxSizer           --布局器类。

wx.BoxSizer()         --创建对象可以指定布局方向，默认是水平。

• wx.HORIZONTAL   --水平方向布局。
• wx.VERTICAL         --垂直方向布局。

Add()                     --添加子窗口(或控件)到父窗口。

AddMany()            --添加多个子窗口(或控件)的列表。

例如：

# 将静态文本添加到垂直Box布局管理器

vBox.Add(self.staticText, proportion=5, flag=wx.ALIGN_CENTER_VERTICAL | wx.Top | wx.CENTER, border=10)

• proportion            --设置当前子窗口(或控件)在父窗口所占空间比例。
• flag                      --参数标志，控制对齐、边框和调整尺寸。
• border                  --设置边框的宽度。
• userData              --可被用来传递额外的数据。

# Box布局管理器
import wx


class myFrame(wx.Frame):
'自定义窗口类'

def __init__(self):
super().__init__(parent=None, title='Box布局管理器', size=(300, 120))
self.Center()

# 画板
panel = wx.Panel(parent=self)

# 创建垂直方向的Box布局管理器对象
vBox = wx.BoxSizer(wx.VERTICAL)

# 文本
self.staticText = wx.StaticText(parent=panel, label='Click the button to display the text.')
# 将静态文本添加到垂直Box布局管理器
vBox.Add(self.staticText, proportion=5, flag=wx.ALIGN_CENTER_VERTICAL | wx.Top | wx.CENTER, border=10)

# 按钮
b1 = wx.Button(parent=panel, id=10, label='button-1')
b2 = wx.Button(parent=panel, id=11, label='button-2')

# 绑定
self.Bind(wx.EVT_BUTTON, self.on_click, id=10, id2=11)

# 创建水平方向的Box布局管理器对象
hBox = wx.BoxSizer(wx.HORIZONTAL)
# 将按钮添加到水平Box布局管理器
hBox.Add(b1, 0, wx.EXPAND | wx.Bottom, 5)
hBox.Add(b2, 0, wx.EXPAND | wx.Bottom, 5)

# 将水平布局管理器添加到垂直布局管理器

vBox.Add(hBox, proportion=1, flag=wx.CENTER)

panel.SetSizer(vBox)

def on_click(self, evt):
'按钮点击方法'
evtId = evt.GetId()
if evtId == 10:
self.staticText.SetLabelText('Button-1 Click Me.')
elif evtId == 11:
self.staticText.SetLabelText('Button-2 Click Me.')
else:
print('Button Id Error.')


class myApp(wx.App):
'自定义应用程序'

def OnInit(self):
frame = myFrame()

frame.Show()
return True

def OnExit(self):
print('Program Exits.')
return 0


if __name__ == '__main__':
app = myApp()
app.MainLoop()

执行结果：

    

StaticBox布局主要方法(继承与wx.BoxSizer，只是多了一个附加的带静态文本的边框)：

wx.StaticBoxSizer(box,orient=HORIZONTAL)

• box       --wx.StaticBox(静态框)对象。
• orient   --布局方向。

# StaticBox-Horizontal
import wx


class myFrame(wx.Frame):
'自定义窗口类'

def __init__(self):
super().__init__(parent=None, title='StaticBox-Horizontal', size=(300, 120))
self.Center()

# 画板
panel = wx.Panel(parent=self)

# 创建垂直Box布局管理器对象
vBox = wx.BoxSizer(wx.VERTICAL)

# 文本
self.staticText = wx.StaticText(parent=panel, label='Click the button to display the text')
vBox.Add(self.staticText, proportion=2, flag=wx.ALIGN_CENTER_VERTICAL | wx.Top | wx.CENTER, border=10)

# 按钮
b1 = wx.Button(parent=panel, label='Button-1', id=10)
b2 = wx.Button(parent=panel, label='Button-2', id=11)

self.Bind(wx.EVT_BUTTON, self.onClick, id=10, id2=11)

# 创建StaticBox-horizontal布局管理器对象
sb = wx.StaticBox(panel, label='Button Box')
hBox = wx.StaticBoxSizer(sb, orient=wx.HORIZONTAL)

# 将按钮添加到StaticBox-horizontal布局管理器
hBox.Add(b1, proportion=0, flag=wx.EXPAND | wx.BOTTOM, border=5)
hBox.Add(b2, proportion=0, flag=wx.EXPAND | wx.BOTTOM, border=5)

# 将StaticBox-horizontal添加到vBox布局管理器
vBox.Add(hBox, proportion=1, flag=wx.CENTER)

panel.SetSizer(vBox)

def onClick(self, evt):
'按钮点击方法'
evtID = evt.GetId()
if evtID == 10:
self.staticText.SetLabelText('Button-1 Click Me.')
elif evtID == 11:
self.staticText.SetLabelText('Button-2 Click Me.')
else:
print('Button ID Error.')


class myApp(wx.App):
'自定义应用程序类'

def OnInit(self):
frame = myFrame()
frame.Show()
return True

def OnExit(self):
print('Program Exits.')
return 0


if __name__ == '__main__':
app = myApp()
app.MainLoop()

执行结果：

    

Grid布局：网格大小是固定的。主要方法：

wx.GridSizer(rows,cols,vgap,hgap)       --指定行数和列数。

wx.GridSizer(rows,clos,hgap)

wx.GridSizer(clos,vgap,hgap)

wx.GridSizer(cols,gap=wx.Size(0,0))

• hgap          --水平间隙。
• vgap          --垂直间隙。
• gap            --垂直间隙和水平间隙。

# Grid布局
import wx


class myFrame(wx.Frame):
'自定义窗口类'

def __init__(self):
super().__init__(parent=None, title='Grid布局',size=(300,300))
self.Center()

panel = wx.Panel(parent=self)

# 按钮
b1 = wx.Button(parent=panel, id=1, label='1')
b2 = wx.Button(parent=panel, id=2, label='2')
b3 = wx.Button(parent=panel, id=3, label='3')
b4 = wx.Button(parent=panel, id=4, label='4')
b5 = wx.Button(parent=panel, id=5, label='5')
b6 = wx.Button(parent=panel, id=6, label='6')
b7 = wx.Button(parent=panel, id=7, label='7')
b8 = wx.Button(parent=panel, id=8, label='8')
b9 = wx.Button(parent=panel, id=9, label='9')

# 创建Grid布局管理器对象
gridB = wx.GridSizer(rows=3, cols=3, vgap=0, hgap=0)

# 将按钮添加到Grid布局管理器
gridB.AddMany(
[(b1, 0, wx.EXPAND), (b2, 0, wx.EXPAND), (b3, 0, wx.EXPAND), (b4, 0, wx.EXPAND), (b5, 0, wx.EXPAND),
(b6, 0, wx.EXPAND), (b7, 0, wx.EXPAND), (b8, 0, wx.EXPAND), (b9, 0, wx.EXPAND)])

panel.SetSizer(gridB)


class myApp(wx.App):
'自定义应用程序类'

def OnInit(self):
frame = myFrame()
frame.Show()
return True

def OnExit(self):
print('Program Exits.')
return 0


if __name__ == '__main__':
app = myApp()
app.MainLoop()

执行结果：

FlexGrid布局：网格大小不同。主要方法：

wx.FlexGridSizer()      --FlexGrid布局管理器对象。

AddGrowableRow()   --指定行是可扩展的。

AddGrowableCol()     --指定列是可扩展的。

• idx --行/列索引，从0开始。

# FlexGrid布局
import wx


class myFrame(wx.Frame):
'自定义窗口类'

def __init__(self):
super().__init__(parent=None, title='FlexGrid布局')
self.Center()
panel = wx.Panel(parent=self)

# 创建FlexGrid布局管理器对象
flexB = wx.FlexGridSizer(3, 2, 10, 10)

# 文本
title = wx.StaticText(panel, label='标题')
anthor = wx.StaticText(panel, label='作者')
review = wx.StaticText(panel, label='内容')

# 输入框
title_tc = wx.TextCtrl(panel)
anthor_tc = wx.TextCtrl(panel, style=wx.TE_PASSWORD)
review_tc = wx.TextCtrl(panel, style=wx.TE_MULTILINE)

# 将文本和输入框添加到FlexGrid布局管理器
flexB.AddMany(
[title, (title_tc, 1, wx.EXPAND), anthor, (anthor_tc, 1, wx.EXPAND), review, (review_tc, 1, wx.EXPAND)])

# 设置比例大小
flexB.AddGrowableRow(0, 1)
flexB.AddGrowableRow(1, 1)
flexB.AddGrowableRow(2, 3)
flexB.AddGrowableCol(0, 1)
flexB.AddGrowableCol(1, 2)

hBox = wx.BoxSizer(wx.HORIZONTAL)
hBox.Add(flexB, proportion=1, flag=wx.ALL | wx.EXPAND, border=10)

panel.SetSizer(hBox) # panel.SetSizer(flexB)


class myApp(wx.App):
'自定义应用程序对象'

def OnInit(self):
frame = myFrame()
frame.Show()
return True

def OnExit(self):
print('Program Exits.')
return 0


if __name__ == '__main__':
app = myApp()
app.MainLoop()