一个典型的应用程序由各种小组件组成。这些组件被搁置在容器外面。程序员必须管理应用程序的布局。在 wxPython 中，能够应用相对定位或应用 sizer 来布局小组件。
相对定位
程序员以像素为单位指定每个小组件的地位和大小。相对定位有几个毛病。
- 如果咱们调整窗口的大小，小组件的大小和地位不会扭转。
- 应用程序在不同平台上的外观不同。
- 扭转应用程序中的字体可能会毁坏布局。
- 如果要扭转布局，则必须齐全重做布局，这是繁琐和耗时的
在有些状况下，咱们可能会应用相对定位。例如，小的测试例子。但大多数状况下，程序员都会应用sizer。
在咱们的例子中，咱们有一个简略的文本编辑器的骨架。如果咱们调整窗口的大小，out wx.TextCtrl的大小并没有像咱们冀望的那样扭转。
# absolute.py#absolute.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025210905141.png" alt="image-20201025210905141" style="zoom:50%;" />
在下面的例子中，咱们应用相对坐标定位三个图像。
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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025211837735.png" alt="image-20201025211837735" style="zoom:50%;" />
在下面的例子中，咱们在一个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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025212651055.png" alt="image-20201025212651055" style="zoom:50%;" />
布局很简略。咱们创立一个垂直的定标器。而后在其中放入五个程度缩放器。
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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025213442744.png" alt="image-20201025213442744" style="zoom:50%;" />
请留神，咱们是如何在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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025221053840.png" alt="image-20201025221053840" style="zoom:50%;" />
在下面的代码示例中，咱们用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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025214859779.png" alt="image-20201025214859779" style="zoom:50%;" />
咱们把窗口看成一个大的网格表。
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.pyimport wxclass 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()<img src="https://mymarkdowm.oss-cn-beijing.aliyuncs.com/markdownimg/image-20201025221223603.png" alt="image-20201025221223603" style="zoom:50%;" />
这是一个比较复杂的布局。咱们同时应用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四周增加了一个动态框。咱们将复选框放入动态框中。