wxPython布局管理

叁歲伎倆 2022-07-13 15:19 162阅读 0赞

**一个典型的应用程序是由不同的部件。这些小部件被放进容器部件。一个程序员必须管理应用程序的布局。这不是一项容易的任务。在wxPython我们有两个选择。**

**\*absolute positioning  
\*sizers**

Absolute Positioning绝对位置

程序员指定位置和大小的每个小部件以像素为单位。当你使用绝对定位,你必须了解一些事情。

*1.如果你改变窗口大小,大小和位置的一个小部件不改变*

*2.在各种平台上的应用程序看起来不同*

*3.更改字体在您的应用程序可能会破坏布局*

*4.如果你决定改变你的布局,你必须完全重做你的布局,这是繁琐又费时*

**可能存在的情况下,我们可能使用绝对定位。例如,我的教程。我不想使示例太难了,所以我经常使用绝对定位来解释一个主题。但是最重要的是,在现实世界的程序,程序员使用sizer。**

在我们的例子中，我们有一个简单的文本编辑器骨架。如果我们调整窗口大小，因为我们希望wx.TextCtrl的大小不会改变。

![1341147832_7114.png][]    ![1341147847_7037.png][]

**\[python\]**  [view plain][]   [copy][view plain]

1.  ''''' 
2.  Created on 2012-7-1 
3.   
4.  @author: Administrator 
5.  '''  
6.  **import** wx  
7.  **class** Example(wx.Frame):  
8.      **def** \_\_init\_\_(self,parent,title):  
9.          super(Example,self).\_\_init\_\_(parent,title=title,size=(260,180))  
10.         self.InitUI()  
11.         self.Centre()  
12.         self.Show()  
13.     **def** InitUI(self):  
14.         panel = wx.Panel(self, -1)  
15.         menuBar = wx.MenuBar()  
16.         filem = wx.Menu()  
17.         editm = wx.Menu()  
18.         helpm = wx.Menu()  
19.           
20.         menuBar.Append(filem,"&File")  
21.         menuBar.Append(editm,"&Edit")  
22.         menuBar.Append(helpm,"&Help")  
23.         self.SetMenuBar(menuBar)  
24.           
25.         wx.TextCtrl(panel,pos=(3,3),size=(250,150))  
26. **if** \_\_name\_\_ == '\_\_main\_\_':  
27.     app = wx.App()  
28.     Example(None,title='Layout1')  
29.     app.MainLoop()

在上面的示例中,我们的位置文本控制在绝对坐标。

**\[python\]**  [view plain][]   [copy][view plain]

1.  wx.TextCtrl(panel, pos=(3, 3), size=(250, 150))

我们构造的wx.TextCtrl的使用绝对定位。在我们的例子中，我们定位在X = 3，Y = 3的wx.TextCtrl。宽度为250像素，高度为150px。

**Using sizers使用sizers**  
  
 Sizers do address all those issues, we mentioned by absolute positioning. We can choose among these sizers:

我们可以选择下列sizers：

***1.wx.BoxSizer***

***2.wx.StaticBoxSizer***

***3.wx.GridSizer***

***4.wx.FlexGridSizer***

***5.wx.GridBagSizer***

**\[python\]**  [view plain][]   [copy][view plain]

1.  **import** wx  
2.  **class** Example(wx.Frame):  
3.      **def** \_\_init\_\_(self,parent,title):  
4.          super(Example,self).\_\_init\_\_(parent,title=title,size=(260,180))  
5.          self.InitUI()  
6.          self.Centre()  
7.          self.Show()  
8.      **def** InitUI(self):  
9.    
10.         menuBar = wx.MenuBar()  
11.         filem = wx.Menu()  
12.         editm = wx.Menu()  
13.         helpm = wx.Menu()  
14.           
15.         menuBar.Append(filem,"&File")  
16.         menuBar.Append(editm,"&Edit")  
17.         menuBar.Append(helpm,"&Help")  
18.         self.SetMenuBar(menuBar)  
19.           
20.         wx.TextCtrl(self)  
21. **if** \_\_name\_\_ == '\_\_main\_\_':  
22.     app = wx.App()  
23.     Example(None,title='Layout1')  
24.     app.MainLoop()

在这个例子中，没有用到sizer。我们wx.Frame的部件放在一个wx.TextCtrl。 wx.Frame的部件有一个特殊的内置SIZER。我们可以把wx.Frame的容器内，只有一个窗口。子部件占据所有的空间.

**wx.BoxSizer**

**This sizer enables us to put several widgets into a row or a column. We can put another sizer into an existing sizer. This way we can create very complex layouts.**

**sizer可以放置很多部件到行或者行。也可以放置其它sizer。这样我们可以创建非常复杂的界面。**

**\[python\]**  [view plain][]   [copy][view plain]

1.  box = wx.BoxSizer(integer orient)  
2.  box.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)

方向可以wx.VERTICAL或wx.HORIZONTAL的。添加到wx.BoxSizer部件是通过Add（）方法。为了了解它，我们需要来看看它的参数。

**比例参数定义的部件,将如何定义的方向改变的比例。假设我们有三个按钮的比例0，1和2。它们被添加成水平wx.BoxSizer。按钮0比例不会改变。按钮比例2比1的水平尺寸比例更将改变两次。**

**与标志参数可以进一步配置在wx.BoxSizer的小部件的行为。我们可以控制的部件之间的边界。我们添加了一些像素部件之间的空间。为了适用边界，我们需要定义的两侧，将用于边境。我们可以结合| e.g wx.LEFT| wx.BOTTOM。我们可以选择这些标志：**

**1.wx.LEFT**

**2.wx.RIGHT**

**3.wx.BOTTOM**

**4.wx.TOP**

**5.wx.ALL**

**![1341207633_7811.png][]**

**\[python\]**  [view plain][]   [copy][view plain]

1.  vbox.Add(midPan, 1, wx.EXPAND | wx.ALL, 20)

我们放在围绕midPan面板20 PX边界。 wx.ALL适用于所有四边边框大小。

**如果我们使用wx.EXPAND标志，我们的部件将使用所有已分配给它的空间。最后，我们还可以定义我们的部件对齐。我们做了以下标志：**

**1.wx.ALIGN\_LEFT  
2.wx.ALIGN\_RIGHT  
3.wx.ALIGN\_TOP  
4.wx.ALIGN\_BOTTOM  
5.wx.ALIGN\_CENTER\_VERTICAL  
6.wx.ALIGN\_CENTER\_HORIZONTAL  
7.wx.ALIGN\_CENTER**

Go To Class  
  
 In the following example we introduce several important ideas.

在接下来的例子中,我们介绍了几种重要的方法。

**\[python\]**  [view plain][]   [copy][view plain]

1.  ''''' 
2.  Created on 2012-7-2 
3.   
4.  @author: Administrator 
5.  '''  
6.  **import** wx  
7.  **class** Example(wx.Frame):  
8.      **def** \_\_init\_\_(self,parent,title):  
9.          super(Example,self).\_\_init\_\_(parent,title=title,size=(500,300))  
10.         self.InitUI()  
11.         self.Centre()  
12.         self.Show()  
13.     **def** InitUI(self):  
14.         panel = wx.Panel(self)  
15.           
16.         font = wx.SystemSettings\_GetFont(wx.SYS\_SYSTEM\_FONT)  
17.         font.SetPointSize(9)  
18.           
19.         vbox = wx.BoxSizer(wx.VERTICAL)  
20.           
21.         hbox1 = wx.BoxSizer(wx.HORIZONTAL)  
22.         st1 = wx.StaticText(panel,label='Class Name')  
23.         st1.SetFont(font)  
24.           
25.         hbox1.Add(st1,flag=wx.RIGHT,border=8)  
26.         tc = wx.TextCtrl(panel)  
27.         hbox1.Add(tc,proportion=1)  
28.         vbox.Add(hbox1,flag=wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP,border=10)  
29.           
30.         vbox.Add((-1,10))  
31.           
32.         hbox3 = wx.BoxSizer(wx.HORIZONTAL)  
33.         tc2 = wx.TextCtrl(panel, style=wx.TE\_MULTILINE)  
34.         hbox3.Add(tc2, proportion=1, flag=wx.EXPAND)  
35.         vbox.Add(hbox3, proportion=1, flag=wx.LEFT|wx.RIGHT|wx.EXPAND,   
36.             border=10)  
37.   
38.         vbox.Add((-1, 25))  
39.   
40.         hbox4 = wx.BoxSizer(wx.HORIZONTAL)  
41.         cb1 = wx.CheckBox(panel, label='Case Sensitive')  
42.         cb1.SetFont(font)  
43.         hbox4.Add(cb1)  
44.         cb2 = wx.CheckBox(panel, label='Nested Classes')  
45.         cb2.SetFont(font)  
46.         hbox4.Add(cb2, flag=wx.LEFT, border=10)  
47.         cb3 = wx.CheckBox(panel, label='Non-Project classes')  
48.         cb3.SetFont(font)  
49.         hbox4.Add(cb3, flag=wx.LEFT, border=10)  
50.         vbox.Add(hbox4, flag=wx.LEFT, border=10)  
51.   
52.         vbox.Add((-1, 25))  
53.   
54.         hbox5 = wx.BoxSizer(wx.HORIZONTAL)  
55.         btn1 = wx.Button(panel, label='Ok', size=(70, 30))  
56.         hbox5.Add(btn1)  
57.         btn2 = wx.Button(panel, label='Close', size=(70, 30))  
58.         hbox5.Add(btn2, flag=wx.LEFT|wx.BOTTOM, border=5)  
59.         vbox.Add(hbox5, flag=wx.ALIGN\_RIGHT|wx.RIGHT, border=10)  
60.           
61.         panel.SetSizer(vbox)  
62.           
63. **if** \_\_name\_\_ == '\_\_main\_\_':  
64.     app = wx.App()  
65.     Example(None,title="gotoclass")  
66.     app.MainLoop()

布局很简单。我们创建一个垂直sizer。然后放置五个横的sizers。

**\[python\]**  [view plain][]   [copy][view plain]

1.  font = wx.SystemSettings\_GetFont(wx.SYS\_SYSTEM\_FONT)  
2.  font.SetPointSize(9)

字体设置为9 px。

**\[python\]**  [view plain][]   [copy][view plain]

1.  vbox.Add(hbox3, proportion=1, flag=wx.LEFT|wx.RIGHT|wx.EXPAND,   
2.      border=10)  
3.    
4.  vbox.Add((-1, 25))

我们已经知道，我们可以控制部件之间的距离相结合的与边境参数标志参数。但有一个约束条件。在Add（）方法，我们可以指定只为一个边界的所有各方。在我们的例子中，我们给10px的右侧和左侧。但是， 如果省略wx.BOTTOM， 我们不能给25 PX至底部。我们能做的是给10px底部，或0px。因此，如果我们需要不同的值，我们可以添加一些额外的空间。 Add（）方法，我们可以插入25px的空白空间。

**\[python\]**  [view plain][]   [copy][view plain]

1.  vbox.Add(hbox5, flag=wx.ALIGN\_RIGHT|wx.RIGHT, border=10)

我们放置在窗口右侧的两个按钮。怎么对齐呢？proportion必须为0，按钮尺寸也不能改变，我们不能指定wx.EXPAND参数。那么我们指定wx.ALIGN\_RIGHT与wx.RIGHT。

![1341208764_1378.png][]

wx.GridSizer

wx.GridSizer是一个二维表格，每个表格大小相同。

**\[python\]**  [view plain][]   [copy][view plain]

1.  wx.GridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)

在构造函数中,我们指定数量的行和列的表。和垂直和水平表格之间的空间。

下边是一个不完美的计算器示例：

**\[python\]**  [view plain][]   [copy][view plain]

我们用wx.StaticText控件在 Bck 与 Close之间做了个空白。然后用AddMany()方法

**\[python\]**  [view plain][]   [copy][view plain]

1.  gs.AddMany( \[(wx.Button(self, label='Cls'), 0, wx.EXPAND),  
2.  ...

控件按顺序依次放入表格，第一行填满后，继续第二行。

![1341210152_4746.png][]

**wx.FlexGridSizer**

这SIZER类似wx.GridSizer。它也有二维表的部件。但它增加了一些灵活性。 wx.GridSizer表格是相同的大小。在wx.FlexGridSizer 所有的行和列的不一定是相同的高度或宽度。

**\[python\]**  [view plain][]   [copy][view plain]

1.  wx.FlexGridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)

rows和cols指定行和列的数目。 VAP和HAP添加一些在两个方向上的小部件之间的空间。

很多时候，开发商要开发用于数据输入和修改的对话框。我觉得这样一个任务wx.FlexGridSizer合适。开发人员可以很容易地建立一个对话窗口，因为约束，每个单元必须具有相同的大小。

**\[python\]**  [view plain][]   [copy][view plain]

1.  hbox = wx.BoxSizer(wx.HORIZONTAL)  
2.   ...  
3.   hbox.Add(fgs, proportion=1, flag=wx.ALL|wx.EXPAND, border=15)

我们建立了一个横向的hbox，周围放置15px的空白。

**\[python\]**  [view plain][]   [copy][view plain]

1.  fgs.AddMany(\[(title), (tc1, 1, wx.EXPAND), (author),   
2.      (tc2, 1, wx.EXPAND), (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)\])

然后用 AddMany() 这个方法。

**\[python\]**  [view plain][]   [copy][view plain]

1.  fgs.AddGrowableRow(2, 1)  
2.  fgs.AddGrowableCol(1, 1)

我们创建一个 可自动伸缩的 三行两列，前两个文本控件将在水平方向上伸缩，第三个将在两个方向伸缩。不要忘记，使用部件的扩展（wx.EXPAND），以使其真正发挥作用。

![1341216705_3458.png][]

**wx.GridBagSizer**

在wxPython中最复杂Sizer要属它了。许多程序员发现很难使用。这样sizer是不是只对wxPython的典型，其它语言也有它。即使它是比较复杂，也不难攻克。

wx.GridBagSizer有一个简单的构造：

**\[python\]**  [view plain][]   [copy][view plain]

1.  wx.GridBagSizer(integer vgap, integer hgap)

子控件之间用垂直与水平定义，然后用Add()方法添加：

**\[python\]**  [view plain][]   [copy][view plain]

1.  Add(self, item, tuple pos, tuple span=wx.DefaultSpan, integer flag=0,   
2.       integer border=0, userData=None)

插入表格中的控件，有pos指定位置，（0，0）表标左上方的表格。span(跨度)为可选。下面两种方法可以伸缩：

**\[python\]**  [view plain][]   [copy][view plain]

1.  AddGrowableRow(integer row)  
2.  AddGrowableCol(integer col)

**\[python\]**  [view plain][]   [copy][view plain]

我们必须把它看作是一个大的网格状的表

**\[python\]**  [view plain][]   [copy][view plain]

1.  text = wx.StaticText(panel, label="Rename To")  
2.  sizer.Add(text, pos=(0, 0), flag=wx.TOP|wx.LEFT|wx.BOTTOM, border=5)

“Rename To”这个标签设置在左上角(0,0)位置，然后在它上、左、下旋转5pix 的空白。

**\[python\]**  [view plain][]   [copy][view plain]

1.  tc = wx.TextCtrl(panel)  
2.  sizer.Add(tc, pos=(1, 0), span=(1, 5),   
3.      flag=wx.EXPAND|wx.LEFT|wx.RIGHT, border=5)

wx.TextCtrl放置在(1,0)这个位置，然后有个(1,5)的跨度，在它左、右放置5pix的空白，并且wx.EXPAND可伸展。

**\[python\]**  [view plain][]   [copy][view plain]

1.  sizer.Add(buttonOk, pos=(3, 3))  
2.  sizer.Add(buttonClose, pos=(3, 4), flag=wx.RIGHT|wx.BOTTOM, border=5)

第四行放置两个按钮，第三行为空。注意：我们并没有在两个按钮之间设置空隙。wx.GridBagSizer创建之处，各个控件之间已经有空隙了。

**\[python\]**  [view plain][]   [copy][view plain]

1.  sizer.AddGrowableCol(1)  
2.  sizer.AddGrowableRow(2)

最后,我们必须要做的事情,是让我们的对话框大小。我们把第二列第三行可增长。现在我们可以扩大或缩小我们的窗口。尝试看看些两行,看看会发生什么。

![1341218375_5670.png][]

**下面我们来做一个java程序员新建类的窗口：**

**\[python\]**  [view plain][]   [copy][view plain]

1.  ''''' 
2.  Created on 2012-7-2 
3.   
4.  @author: Administrator 
5.  '''  
6.  **import** wx  
7.  **class** Example(wx.Frame):  
8.      **def** \_\_init\_\_(self,parent,title):  
9.          super(Example,self).\_\_init\_\_(parent,title=title,size=(450,350))  
10.         self.InitUI()  
11.         self.Centre()  
12.         self.Show()  
13.     **def** InitUI(self):  
14.         panel = wx.Panel(self)  
15.         sizer = wx.GridBagSizer(5,5)  
16.           
17.         text1 = wx.StaticText(panel,label="Java Class")  
18.         sizer.Add(text1, pos=(0,0),flag=wx.TOP|wx.LEFT|wx.BOTTOM,border=15)  
19.           
20.         icon = wx.StaticBitmap(panel,bitmap=wx.Bitmap("exit.png"))  
21.         sizer.Add(icon,pos=(0,4),flag=wx.TOP|wx.RIGHT|wx.ALIGN\_RIGHT,border=5)  
22.           
23.         line = wx.StaticLine(panel)  
24.         sizer.Add(line,pos=(1,0),span=(1,5),flag=wx.EXPAND|wx.BOTTOM,border=10)  
25.           
26.         text2 = wx.StaticText(panel,label="Name")  
27.         sizer.Add(text2,pos=(2,0),flag=wx.LEFT,border=10)  
28.           
29.         tc1 = wx.TextCtrl(panel)  
30.         sizer.Add(tc1,pos=(2,1),span=(1,3),flag=wx.TOP|wx.EXPAND)  
31.           
32.         text3 = wx.StaticText(panel, label="Package")  
33.         sizer.Add(text3, pos=(3, 0), flag=wx.LEFT|wx.TOP, border=10)  
34.   
35.         tc2 = wx.TextCtrl(panel)  
36.         sizer.Add(tc2, pos=(3, 1), span=(1, 3), flag=wx.TOP|wx.EXPAND,   
37.             border=5)  
38.           
39.         button1 = wx.Button(panel, label="Browse...")  
40.         sizer.Add(button1, pos=(3, 4), flag=wx.TOP|wx.RIGHT, border=5)  
41.           
42.         text4 = wx.StaticText(panel, label="Extends")  
43.         sizer.Add(text4, pos=(4, 0), flag=wx.TOP|wx.LEFT, border=10)  
44.   
45.         combo = wx.ComboBox(panel)  
46.         sizer.Add(combo, pos=(4, 1), span=(1, 3),   
47.             flag=wx.TOP|wx.EXPAND, border=5)  
48.   
49.         button2 = wx.Button(panel, label="Browse...")  
50.         sizer.Add(button2, pos=(4, 4), flag=wx.TOP|wx.RIGHT, border=5)  
51.   
52.         sb = wx.StaticBox(panel, label="Optional Attributes")  
53.           
54.         boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL)  
55.         boxsizer.Add(wx.CheckBox(panel, label="Public"),   
56.             flag=wx.LEFT|wx.TOP, border=5)  
57.         boxsizer.Add(wx.CheckBox(panel, label="Generate Default Constructor"),  
58.             flag=wx.LEFT, border=5)  
59.         boxsizer.Add(wx.CheckBox(panel, label="Generate Main Method"),   
60.             flag=wx.LEFT|wx.BOTTOM, border=5)  
61.         sizer.Add(boxsizer, pos=(5, 0), span=(1, 5),   
62.             flag=wx.EXPAND|wx.TOP|wx.LEFT|wx.RIGHT , border=10)  
63.   
64.         button3 = wx.Button(panel, label='Help')  
65.         sizer.Add(button3, pos=(7, 0), flag=wx.LEFT, border=10)  
66.   
67.         button4 = wx.Button(panel, label="Ok")  
68.         sizer.Add(button4, pos=(7, 3))  
69.   
70.         button5 = wx.Button(panel, label="Cancel")  
71.         sizer.Add(button5, pos=(7, 4), span=(1, 1),    
72.             flag=wx.BOTTOM|wx.RIGHT, border=5)  
73.           
74.         sizer.AddGrowableCol(2)  
75.           
76.         panel.SetSizer(sizer)  
77.           
78. **if** \_\_name\_\_ == '\_\_main\_\_':  
79.     app = wx.App()  
80.     Example(None,title="Newclass.py")  
81.     app.MainLoop()

**这是一个复杂的布局.我们同时用了wx.GridBagSizer 和 wx.StaticBoxsizer.**

**\[python\]**  [view plain][]   [copy][view plain]

1.  line = wx.StaticLine(panel)  
2.  sizer.Add(line, pos=(1, 0), span=(1, 5),   
3.      flag=wx.EXPAND|wx.BOTTOM, border=10)

这是一条线,用于单独的组内的小部件的布局。

**\[python\]**  [view plain][]   [copy][view plain]

1.  icon = wx.StaticBitmap(panel, bitmap=wx.Bitmap('exec.png'))  
2.  sizer.Add(icon, pos=(0, 4), flag=wx.TOP|wx.RIGHT|wx.ALIGN\_RIGHT,   
3.      border=5)

我们把wx.StaticBitmap图标控件放在右边的行。

**\[python\]**  [view plain][]   [copy][view plain]

1.  sb = wx.StaticBox(panel, label="Optional Attributes")  
2.  boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL)

wxStaticBoxSizer 像一个普通的wx.BoxSizer，但它会添加一个静态框。

![1341219917_9280.jpg][]

[1341147832_7114.png]: https://img-my.csdn.net/uploads/201207/01/1341147832_7114.png
[1341147847_7037.png]: https://img-my.csdn.net/uploads/201207/01/1341147847_7037.png
[view plain]: http://blog.csdn.net/youyigong/article/details/7707116#
[1341207633_7811.png]: https://img-my.csdn.net/uploads/201207/02/1341207633_7811.png
[1341208764_1378.png]: https://img-my.csdn.net/uploads/201207/02/1341208764_1378.png
[1341210152_4746.png]: https://img-my.csdn.net/uploads/201207/02/1341210152_4746.png
[1341216705_3458.png]: https://img-my.csdn.net/uploads/201207/02/1341216705_3458.png
[1341218375_5670.png]: https://img-my.csdn.net/uploads/201207/02/1341218375_5670.png
[1341219917_9280.jpg]: https://img-my.csdn.net/uploads/201207/02/1341219917_9280.jpg