一个典型的应用程序由各种小组件组成。这些组件被放置在容器里面。程序员必须管理应用程序的布局。在 wxPython 中，可以使用绝对定位或使用 sizer 来布局小组件。
绝对定位
程序员以像素为单位指定每个小组件的位置和大小。绝对定位有几个缺点。如果我们调整窗口的大小，小组件的大小和位置不会改变。
应用程序在不同平台上的外观不同。
改变应用程序中的字体可能会破坏布局。
如果要改变布局，则必须完全重做布局，这是繁琐和耗时的
在有些情况下，我们可能会使用绝对定位。例如，小的测试例子。但大多数情况下，程序员都会使用sizer。
在我们的例子中，我们有一个简单的文本编辑器的骨架。如果我们调整窗口的大小，out wx.TextCtrl的大小并没有像我们期望的那样改变。# absolute.py
#absolute.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title,
size=(350, 300))
self.InitUI()
self.Centre()
def InitUI(self):
self.panel = wx.Panel(self)
self.panel.SetBackgroundColour("white")
self.LoadImages()
self.mincol.SetPosition((20, 20))
self.bardejov.SetPosition((40, 160))
self.rotunda.SetPosition((170, 50))
def LoadImages(self):
self.mincol = wx.StaticBitmap(self.panel, wx.ID_ANY,
wx.Bitmap("icon_1.png", wx.BITMAP_TYPE_ANY))
self.bardejov = wx.StaticBitmap(self.panel, wx.ID_ANY,
wx.Bitmap("icon_2.png", wx.BITMAP_TYPE_ANY))
self.rotunda = wx.StaticBitmap(self.panel, wx.ID_ANY,
wx.Bitmap("icon_3.png", wx.BITMAP_TYPE_ANY))
def main():
app = wx.App()
ex = Example(None, title='Absolute positioning')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
在上面的例子中，我们使用绝对坐标定位三个图像。self.mincol.SetPosition((20, 20))
通过SetPosition()方法，我们将图像放置在x=20，y=20坐标处。
使用sizer
Sizer确实解决了我们提到的所有绝对定位的问题，wxPython有以下sizer。wx.BoxSizer
wx.StaticBoxSizer
wx.GridSizer
wx.FlexGridSizer
wx.GridBagSizer
wx.BoxSizer
wx.BoxSizer 使我们能够将多个小组件放入一行或一列中。我们可以将另一个sizer放入一个现有的sizer中。这样我们就可以创建非常复杂的布局。box = wx.BoxSizer(integer orient)
box.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)
方向可以是wx.VERTICAL或wx.HORIZONTAL。在wx.BoxSizer中添加widget是通过Add()方法完成的。为了理解它，我们需要看看它的参数。
proportion参数定义了widgets在定义的方向上的变化比例。假设我们有三个比例为0、1和2的按钮。它们被添加到一个水平的wx.BoxSizer.Button中。比例为0的按钮完全不会改变。比例2的按钮在水平维度上会比比例1的按钮多变化一倍。
通过flag参数，可以进一步配置wx.BoxSizer中组件的行为。我们可以控制组件之间的边界。我们在组件之间添加一些空间，单位是像素。为了应用border，我们需要定义border。我们可以用 | 操作符来组合它们，例如 wx.LEFT | wx.BOTTOM。我们可以在这些标志中进行选择。wx.LEFT
wx.RIGHT
wx.BOTTOM
wx.TOP
wx.ALL
通过setSizer()方法对面板组件设置sizer。#border.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title)
self.InitUI()
self.Centre()
def InitUI(self):
panel = wx.Panel(self)
panel.SetBackgroundColour('#4f5049')
vbox = wx.BoxSizer(wx.VERTICAL)
midPan = wx.Panel(panel)
midPan.SetBackgroundColour('#ededed')
vbox.Add(midPan, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)
panel.SetSizer(vbox)
def main():
app = wx.App()
ex = Example(None, title='Border')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
在上面的例子中，我们在一个panel周围放置了边框。vbox.Add(midPan, wx.ID_ANY, wx.EXPAND | wx.ALL, 20)
在border.py中，我们已经在midPan面板周围放置了一个20 px的边框，wx.ALL将边框大小应用于所有四边。
如果我们使用wx.EXPAND标志，我们的组件将使用所有分配给它的空间。最后，我们还可以定义组件的对齐方式。通过以下标志来实现。wx.ALIGN_LEFT
wx.ALIGN_RIGHT
wx.ALIGN_TOP
wx.ALIGN_BOTTOM
wx.ALIGN_CENTER_VERTICAL
wx.ALIGN_CENTER_HORIZONTAL。
wx.ALIGN_CENTER
类的例子
介绍一些重要的思想#go_to_class.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title)
self.InitUI()
self.Centre()
def InitUI(self):
panel = wx.Panel(self)
font = wx.SystemSettings.GetFont(wx.SYS_SYSTEM_FONT)
font.SetPointSize(9)
vbox = wx.BoxSizer(wx.VERTICAL)
hbox1 = wx.BoxSizer(wx.HORIZONTAL)
st1 = wx.StaticText(panel, label='Class Name')
st1.SetFont(font)
hbox1.Add(st1, flag=wx.RIGHT, border=8)
tc = wx.TextCtrl(panel)
hbox1.Add(tc, proportion=1)
vbox.Add(hbox1, flag=wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP, border=10)
vbox.Add((-1, 10))
hbox2 = wx.BoxSizer(wx.HORIZONTAL)
st2 = wx.StaticText(panel, label='Matching Classes')
st2.SetFont(font)
hbox2.Add(st2)
vbox.Add(hbox2, flag=wx.LEFT | wx.TOP, border=10)
vbox.Add((-1, 10))
hbox3 = wx.BoxSizer(wx.HORIZONTAL)
tc2 = wx.TextCtrl(panel, style=wx.TE_MULTILINE)
hbox3.Add(tc2, proportion=1, flag=wx.EXPAND)
vbox.Add(hbox3, proportion=1, flag=wx.LEFT|wx.RIGHT|wx.EXPAND,
border=10)
vbox.Add((-1, 25))
hbox4 = wx.BoxSizer(wx.HORIZONTAL)
cb1 = wx.CheckBox(panel, label='Case Sensitive')
cb1.SetFont(font)
hbox4.Add(cb1)
cb2 = wx.CheckBox(panel, label='Nested Classes')
cb2.SetFont(font)
hbox4.Add(cb2, flag=wx.LEFT, border=10)
cb3 = wx.CheckBox(panel, label='Non-Project classes')
cb3.SetFont(font)
hbox4.Add(cb3, flag=wx.LEFT, border=10)
vbox.Add(hbox4, flag=wx.LEFT, border=10)
vbox.Add((-1, 25))
hbox5 = wx.BoxSizer(wx.HORIZONTAL)
btn1 = wx.Button(panel, label='Ok', size=(70, 30))
hbox5.Add(btn1)
btn2 = wx.Button(panel, label='Close', size=(70, 30))
hbox5.Add(btn2, flag=wx.LEFT|wx.BOTTOM, border=5)
vbox.Add(hbox5, flag=wx.ALIGN_RIGHT|wx.RIGHT, border=10)
panel.SetSizer(vbox)
def main():
app = wx.App()
ex = Example(None, title='Go To Class')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
布局很简单。我们创建一个垂直的定标器。然后在其中放入五个水平缩放器。font = wx.SystemSettings.GetFont(wx.SYS_SYSTEM_FONT)
font.SetPointSize(9)
我们将字体大小改为9 px。vbox.Add(hbox3, proportion=1, flag=wx.LEFT|wx.RIGHT|wx.EXPAND, border=10)
vbox.Add((-1, 25))
我们已经知道，我们可以通过结合flag参数和border参数来控制部件之间的距离。但是有一个真正的限制。在Add()方法中，我们只能为所有给定的边指定一个边框。在我们的例子中，我们给右边和左边各10 px。但是我们不能给底部增加25 px的边框，我们可以做的是给右边和左边增加10 px的边框。我们可以做的是给底部10 px，如果省略wx.BOTTOM，则给底部0 px。所以如果我们需要不同的值，我们可以增加一些额外的空间。通过Add()方法，我们也可以插入组件和空间。vbox.Add(hbox5, flag=wx.ALIGN_RIGHT|wx.RIGHT, border=10)
我们将两个按钮放在窗口的右侧。要做到这一点，有三件事情很重要：porportion,align和 wx.EXPAND 标志。porportion必须为零。当我们调整窗口大小时，按钮的大小不应改变。我们不能指定wx.EXPAND标志。按钮只复制分配给它们的区域。最后，我们必须指定wx.ALIGN_RIGHT标志。水平缩放器从窗口的左边扩展到右边。所以如果我们指定wx.ALIGN_RIGHT标志，按钮就会被放置在右边。
wx.GridSizer
wx.GridSizer在二维表格中布置组件。表格中的每个单元格都有相同的大小。wx.GridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)
在构造函数中，我们指定表格中的行数和列数，以及单元格之间的垂直和水平空间。
在我们的例子中，我们创建了一个计算器的骨架。#calculator.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title)
self.InitUI()
self.Centre()
def InitUI(self):
menubar = wx.MenuBar()
fileMenu = wx.Menu()
menubar.Append(fileMenu, '&File')
self.SetMenuBar(menubar)
vbox = wx.BoxSizer(wx.VERTICAL)
self.display = wx.TextCtrl(self, style=wx.TE_RIGHT)
vbox.Add(self.display, flag=wx.EXPAND|wx.TOP|wx.BOTTOM, border=4)
gs = wx.GridSizer(5, 4, 5, 5)
gs.AddMany( [(wx.Button(self, label='Cls'), 0, wx.EXPAND),
(wx.Button(self, label='Bck'), 0, wx.EXPAND),
(wx.StaticText(self), wx.EXPAND),
(wx.Button(self, label='Close'), 0, wx.EXPAND),
(wx.Button(self, label='7'), 0, wx.EXPAND),
(wx.Button(self, label='8'), 0, wx.EXPAND),
(wx.Button(self, label='9'), 0, wx.EXPAND),
(wx.Button(self, label='/'), 0, wx.EXPAND),
(wx.Button(self, label='4'), 0, wx.EXPAND),
(wx.Button(self, label='5'), 0, wx.EXPAND),
(wx.Button(self, label='6'), 0, wx.EXPAND),
(wx.Button(self, label='*'), 0, wx.EXPAND),
(wx.Button(self, label='1'), 0, wx.EXPAND),
(wx.Button(self, label='2'), 0, wx.EXPAND),
(wx.Button(self, label='3'), 0, wx.EXPAND),
(wx.Button(self, label='-'), 0, wx.EXPAND),
(wx.Button(self, label='0'), 0, wx.EXPAND),
(wx.Button(self, label='.'), 0, wx.EXPAND),
(wx.Button(self, label='='), 0, wx.EXPAND),
(wx.Button(self, label='+'), 0, wx.EXPAND) ])
vbox.Add(gs, proportion=1, flag=wx.EXPAND)
self.SetSizer(vbox)
def main():
app = wx.App()
ex = Example(None, title='Calculator')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
请注意，我们是如何在Bck和Close按钮之间放置一个空格的。我们只是在那里放了一个空的wx.StaticText。
在我们的例子中，我们使用了AddMany()方法。它是一个方便的方法，用于一次添加多个组件。gs.AddMany( [(wx.Button(self, label='Cls'), 0, wx.EXPAND),
...
组件按照添加顺序放置在表格内。第一行先填，然后第二行...。
wx.FlexGridSizer
这个缩放器类似于wx.GridSizer。它也是在一个二维的表格中布置它的部件，它增加了一些灵活性。wx.GridSizer的单元格大小相同。wx.FlexGridSizer中的所有单元格在一行中具有相同的高度。在一列中，所有的单元格都有相同的宽度。但所有的行和列不一定是相同的高度或宽度。wx.FlexGridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)
vgap和hgap在两个方向上增加了一些部件之间的空间。
很多时候，开发人员必须开发对话框来输入和修改数据。我发现wx.FlexGridSizer适合这样的任务。开发者可以很容易地用这个sizer设置一个对话框窗口。也可以用wx.GridSizer来完成这个任务，但它看起来并不好看，因为每个单元格必须有相同的大小。#review.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title)
self.InitUI()
self.Centre()
self.Show()
def InitUI(self):
panel = wx.Panel(self)
hbox = wx.BoxSizer(wx.HORIZONTAL)
fgs = wx.FlexGridSizer(3, 2, 9, 25)
title = wx.StaticText(panel, label="Title")
author = wx.StaticText(panel, label="Author")
review = wx.StaticText(panel, label="Review")
tc1 = wx.TextCtrl(panel)
tc2 = wx.TextCtrl(panel)
tc3 = wx.TextCtrl(panel, style=wx.TE_MULTILINE)
fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author),
(tc2, 1, wx.EXPAND), (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])
fgs.AddGrowableRow(2, 1)
fgs.AddGrowableCol(1, 1)
hbox.Add(fgs, proportion=1, flag=wx.ALL|wx.EXPAND, border=15)
panel.SetSizer(hbox)
def main():
app = wx.App()
ex = Example(None, title='Review')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
在上面的代码示例中，我们用FlexGridSizer创建一个Review窗口。hbox = wx.BoxSizer(wx.HORIZONTAL)
...
hbox.Add(fgs, proportion=1, flag=wx.ALL|wx.EXPAND, border=15)
我们创建了一个水平框的大小，以便在组件表格周围放置一些空间（15 px）。fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author),
(tc2, 1, wx.EXPAND), (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])
我们使用AddMany()方法为sizer添加widget。wx.FlexGridSizer和wx.GridSizer都共享这个方法。fgs.AddGrowableRow(2, 1)
fgs.AddGrowableCol(1, 1)
我们让第三行和第二列可以增长。这样我们就可以让文本控件在窗口调整大小时增长。前两个文本控件将在水平方向上增长，第三个控件将在两个方向上增长。我们不要忘记用wx.EXPAND使组件可扩展，这样才能使它工作。
wx.GridBagSizer
wx.GridBagSizer是wxPython中最灵活的sizer。这种sizer并不只是在wxPython中才有，我们在其他工具包中也能找到它。
这种sizer可以实现项目的显式定位。项目也可以选择跨越多行或多列。wx.GridBagSizer有一个简单的构造函数。wx.GridBagSizer(integer vgap, integer hgap)
垂直和水平的间隙定义了所有子项目之间的像素空间。我们使用Add()方法向网格中添加项目。Add(self, item, tuple pos, tuple span=wx.DefaultSpan, integer flag=0,
integer border=0, userData=None)
Item是一个插入到网格中的组件。pos指定了在虚拟网格中的位置，左上角单元格的pos为(0, 0)。span是一个可选的跨度，例如(3, 2)跨度是指跨度为3行2列的部件。flag和border在前面由wx.BoxSizer讨论过。当窗口被调整大小时，网格中的项目可以改变它们的大小或保持默认大小。如果我们想让你的项目增长和缩小，我们可以使用下面两个方法。AddGrowableRow(integer row)
AddGrowableCol(integer col)
重命名窗口示例
在第一个例子中，我们创建一个Rename窗口。它将有一个wx.StaticText、一个wx.TextCtrl和两个wx.Button 组件。#rename.py
import wx
class Example(wx.Frame):
def __init__(self, parent, title):
super(Example, self).__init__(parent, title=title)
self.InitUI()
self.Centre()
def InitUI(self):
panel = wx.Panel(self)
sizer = wx.GridBagSizer(4, 4)
text = wx.StaticText(panel, label="Rename To")
sizer.Add(text, pos=(0, 0), flag=wx.TOP|wx.LEFT|wx.BOTTOM, border=5)
tc = wx.TextCtrl(panel)
sizer.Add(tc, pos=(1, 0), span=(1, 5),
flag=wx.EXPAND|wx.LEFT|wx.RIGHT, border=5)
buttonOk = wx.Button(panel, label="Ok", size=(90, 28))
buttonClose = wx.Button(panel, label="Close", size=(90, 28))
sizer.Add(buttonOk, pos=(3, 3))
sizer.Add(buttonClose, pos=(3, 4), flag=wx.RIGHT|wx.BOTTOM, border=10)
sizer.AddGrowableCol(1)
sizer.AddGrowableRow(2)
panel.SetSizer(sizer)
def main():
app = wx.App()
ex = Example(None, title='Rename')
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
我们把窗口看成一个大的网格表。text = wx.StaticText(panel, label="Rename To")
sizer.Add(text, pos=(0, 0), flag=wx.TOP|wx.LEFT|wx.BOTTOM, border=10)
"Rename To "的文字走到左上角。所以我们指定（0，0）的位置。而且我们在底部、左侧、底部都加了一些空格。tc = wx.TextCtrl(panel)
sizer.Add(tc, pos=(1, 0), span=(1, 5) flag=wx.EXPAND|wx.LEFT|wx.RIGHT, border=5)
wx.TextCtrl转到第二行的开头(1, 0)。记住，我们从零开始计算。它展开了1行5列(1, 5)。而且我们在小组件的左边和右边放了5个像素的空间。sizer.Add(buttonOk, pos=(3, 3))
sizer.Add(buttonClose, pos=(3, 4), flag=wx.RIGHT|wx.BOTTOM, border=10)
我们在第四行中放入两个按钮，第三行留空，以便在wx.TextCtrl和按钮之间留出一些空间。第三行留空，这样我们在wx.TextCtrl和按钮之间就有了一些空间。我们将 "Ok "按钮放入第四行，将 "Close "按钮放入第五行。请注意，一旦我们在一个部件上应用了一些space，它就会应用到整行。sizer.AddGrowableCol(1)
sizer.AddGrowableRow(2)
最后，我们必须做的是使我们的对话框可以调整大小。我们使第二列和第三行可以增长。现在我们可以扩大或缩小我们的窗口。试着注释这两行，看看会发生什么。
增加类的例子
在接下来的例子中，我们创建一个窗口，它可以在JDeveloper中找到。它是一个在Java中创建新类的窗口。#new_class.py
import wx
class Example(wx.Frame):
def __init__(self,parent,title):
super(Example,self).__init__(parent,title=title)
self.InitUI()
self.Centre()
def InitUI(self):
panel=wx.Panel(self)
sizer=wx.GridBagSizer(5,5)
text1=wx.StaticText(panel,label="Java Class")
sizer.Add(text1,pos=(0,0),flag=wx.TOP | wx.LEFT | wx.BOTTOM,
border=15)
icon=wx.StaticBitmap(panel,bitmap=wx.Bitmap('icon_1.png'))
sizer.Add(icon,pos=(0,4),flag=wx.TOP | wx.RIGHT | wx.ALIGN_RIGHT,
border=5)
line=wx.StaticLine(panel)
sizer.Add(line,pos=(1,0),span=(1,5),
flag=wx.EXPAND | wx.BOTTOM,border=10)
text2=wx.StaticText(panel,label="Name")
sizer.Add(text2,pos=(2,0),flag=wx.LEFT,border=10)
tc1=wx.TextCtrl(panel)
sizer.Add(tc1,pos=(2,1),span=(1,3),flag=wx.TOP | wx.EXPAND)
text3=wx.StaticText(panel,label="Package")
sizer.Add(text3,pos=(3,0),flag=wx.LEFT | wx.TOP,border=10)
tc2=wx.TextCtrl(panel)
sizer.Add(tc2,pos=(3,1),span=(1,3),flag=wx.TOP | wx.EXPAND,
border=5)
button1=wx.Button(panel,label="Browse...")
sizer.Add(button1,pos=(3,4),flag=wx.TOP | wx.RIGHT,border=5)
text4=wx.StaticText(panel,label="Extends")
sizer.Add(text4,pos=(4,0),flag=wx.TOP | wx.LEFT,border=10)
combo=wx.ComboBox(panel)
sizer.Add(combo,pos=(4,1),span=(1,3),
flag=wx.TOP | wx.EXPAND,border=5)
button2=wx.Button(panel,label="Browse...")
sizer.Add(button2,pos=(4,4),flag=wx.TOP | wx.RIGHT,border=5)
sb=wx.StaticBox(panel,label="Optional Attributes")
boxsizer=wx.StaticBoxSizer(sb,wx.VERTICAL)
boxsizer.Add(wx.CheckBox(panel,label="Public"),
flag=wx.LEFT | wx.TOP,border=5)
boxsizer.Add(wx.CheckBox(panel,label="Generate Default Constructor"),
flag=wx.LEFT,border=5)
boxsizer.Add(wx.CheckBox(panel,label="Generate Main Method"),
flag=wx.LEFT | wx.BOTTOM,border=5)
sizer.Add(boxsizer,pos=(5,0),span=(1,5),
flag=wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT,border=10)
button3=wx.Button(panel,label='Help')
sizer.Add(button3,pos=(7,0),flag=wx.LEFT,border=10)
button4=wx.Button(panel,label="Ok")
sizer.Add(button4,pos=(7,3))
button5=wx.Button(panel,label="Cancel")
sizer.Add(button5,pos=(7,4),span=(1,1),
flag=wx.BOTTOM | wx.RIGHT,border=10)
sizer.AddGrowableCol(2)
panel.SetSizer(sizer)
sizer.Fit(self)
def main():
app=wx.App()
ex=Example(None,title="Create Java Class")
ex.Show()
app.MainLoop()
if __name__ == '__main__':
main()
这是一个比较复杂的布局。我们同时使用wx.GridBagSizer和wx.StaticBoxsizer。line = wx.StaticLine(panel)
sizer.Add(line, pos=(1, 0), span=(1, 5)。
flag=wx.EXPAND|wx.BOTTOM, border=10)
这一行是用来分隔布局中的控件件组的。icon = wx.StaticBitmap(panel, bitmap=wx.Bitmap('exec.png'))
sizer.Add(icon, pos=(0, 4), flag=wx.TOP|wx.RIGHT|wx.ALIGN_RIGHT,
border=5)
我们将一个wx.StaticBitmap放入网格的第一行。我们将其放置在该行的右侧。sb = wx.StaticBox(panel, label="Optional Attributes")
boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL)
wxStaticBoxSizer和普通的wx.BoxSizer一样，但它在sizer周围添加了一个静态框。我们将复选框放入静态框中。
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
