wxPython布局管理（绝对布局与Sizer）

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

wxPython布局管理（绝对布局与Sizer）
转载
⼀个典型的应⽤程序是由不同的部件。

这些⼩部件被放进容器部件。

⼀个程序员必须管理应⽤程序的布局。

这不是⼀项容易的任务。

在wxPython我们有两个选择。

*absolute positioning
*sizers
Absolute Positioning绝对位置
程序员指定位置和⼤⼩的每个⼩部件以像素为单位。

当你使⽤绝对定位,你必须了解⼀些事情。

1.如果你改变窗⼝⼤⼩,⼤⼩和位置的⼀个⼩部件不改变
2.在各种平台上的应⽤程序看起来不同
3.更改字体在您的应⽤程序可能会破坏布局
4.如果你决定改变你的布局,你必须完全重做你的布局,这是繁琐⼜费时
可能存在的情况下,我们可能使⽤绝对定位。

例如,我的教程。

我不想使⽰例太难了,所以我经常使⽤绝对定位来解释⼀个主题。

但是最重要的是,在现实世界的程序,程序员使⽤sizer。

在我们的例⼦中，我们有⼀个简单的⽂本编辑器⾻架。

如果我们调整窗⼝⼤⼩，因为我们希望wx.TextCtrl的⼤⼩不会改变。

[python]
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]
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]
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]
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
[python]
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=(260,180))
10. self.InitUI()
11. self.Centre()
12. self.Show()
13. def InitUI(self):
14. panel = wx.Panel(self)
15. panel.SetBackgroundColour('#4f5049')
16.
17. vbox = wx.BoxSizer(wx.VERTICAL)
18.
19. midPan = wx.Panel(panel)
20. midPan.SetBackgroundColour('#ededed')
21.
22. vbox.Add(midPan,2,wx.EXPAND|wx.ALL,40)
23. panel.SetSizer(vbox)
24.
25. if __name__ == '__main__':
26. app = wx.App()
27. Example(None,title="Border")
28. app.MainLoop()
[python]
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
To Class
In the following example we introduce several important ideas.
在接下来的例⼦中,我们介绍了⼏种重要的⽅法。

[python]
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]
1. font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
2. font.SetPointSize(9)
字体设置为9 px。

[python]
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]
1. vbox.Add(hbox5, flag=wx.ALIGN_RIGHT|wx.RIGHT, border=10)
我们放置在窗⼝右侧的两个按钮。

怎么对齐呢？proportion必须为0，按钮尺⼨也不能改变，我们不能指定wx.EXPAND参数。

那么我们指定wx.ALIGN_RIGHT与wx.RIGHT。

wx.GridSizer是⼀个⼆维表格，每个表格⼤⼩相同。

[python]
1. wx.GridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)
在构造函数中,我们指定数量的⾏和列的表。

和垂直和⽔平表格之间的空间。

下边是⼀个不完美的计算器⽰例：
[python]
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=(300,250))
10. self.InitUI()
11. self.Centre()
12. self.Show()
13. def InitUI(self):
14. menubar = wx.MenuBar()
15. fileMenu = wx.Menu()
16. menubar.Append(fileMenu,"&File")
17. self.SetMenuBar(menubar)
18.
19. vbox = wx.BoxSizer(wx.VERTICAL)
20. self.display = wx.TextCtrl(self,style=wx.TE_RIGHT)
21. vbox.Add(self.display,flag=wx.EXPAND|wx.TOP|wx.BOTTOM,border=5)
22. gs = wx.GridSizer(4,4,5,5)
23.
24. gs.AddMany( [(wx.Button(self, label='Cls'), 0, wx.EXPAND),
25. (wx.Button(self, label='Bck'), 0, wx.EXPAND),
26. (wx.StaticText(self), wx.EXPAND),
27. (wx.Button(self, label='Close'), 0, wx.EXPAND),
28. (wx.Button(self, label='7'), 0, wx.EXPAND),
29. (wx.Button(self, label='8'), 0, wx.EXPAND),
30. (wx.Button(self, label='9'), 0, wx.EXPAND),
31. (wx.Button(self, label='/'), 0, wx.EXPAND),
32. (wx.Button(self, label='4'), 0, wx.EXPAND),
33. (wx.Button(self, label='5'), 0, wx.EXPAND),
34. (wx.Button(self, label='6'), 0, wx.EXPAND),
35. (wx.Button(self, label='*'), 0, wx.EXPAND),
36. (wx.Button(self, label='1'), 0, wx.EXPAND),
37. (wx.Button(self, label='2'), 0, wx.EXPAND),
38. (wx.Button(self, label='3'), 0, wx.EXPAND),
39. (wx.Button(self, label='-'), 0, wx.EXPAND),
40. (wx.Button(self, label='0'), 0, wx.EXPAND),
41. (wx.Button(self, label='.'), 0, wx.EXPAND),
42. (wx.Button(self, label='='), 0, wx.EXPAND),
43. (wx.Button(self, label='+'), 0, wx.EXPAND) ])
44.
45. vbox.Add(gs,proportion=1,flag=wx.EXPAND)
46. self.SetSizer(vbox)
47.
49. if __name__ == '__main__':
50. app = wx.App()
51. Example(None,title="caculator")
52. app.MainLoop()
我们⽤wx.StaticText控件在 Bck 与 Close之间做了个空⽩。

然后⽤AddMany()⽅法
[python]
1. gs.AddMany( [(wx.Button(self, label='Cls'), 0, wx.EXPAND),
2. ...
控件按顺序依次放⼊表格，第⼀⾏填满后，继续第⼆⾏。

wx.FlexGridSizer
这SIZER类似wx.GridSizer。

它也有⼆维表的部件。

但它增加了⼀些灵活性。

wx.GridSizer表格是相同的⼤⼩。

在wx.FlexGridSizer 所有的⾏和列的不⼀定是相同的⾼度或宽度。

[python]
1. wx.FlexGridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)
rows和cols指定⾏和列的数⽬。

VAP和HAP添加⼀些在两个⽅向上的⼩部件之间的空间。

很多时候，开发商要开发⽤于数据输⼊和修改的对话框。

我觉得这样⼀个任务wx.FlexGridSizer合适。

开发⼈员可以很容易地建⽴⼀个对话窗⼝，因为约束，每个单元必须具有相同的⼤⼩。

[python]
1. fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author),
2. (tc2, 1, wx.EXPAND), (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])
然后⽤ AddMany() 这个⽅法。

[python]
1. fgs.AddGrowableRow(2, 1)
2. fgs.AddGrowableCol(1, 1)
我们创建⼀个可⾃动伸缩的三⾏两列，前两个⽂本控件将在⽔平⽅向上伸缩，第三个将在两个⽅向伸缩。

不要忘记，使⽤部件的扩展（wx.EXPAND），以使其真正发挥作⽤。

wx.GridBagSizer
在wxPython中最复杂Sizer要属它了。

许多程序员发现很难使⽤。

这样sizer是不是只对wxPython的典型，其它语⾔也有它。

即使它是⽐较复杂，也不难攻克。

wx.GridBagSizer有⼀个简单的构造：
[python]
1. wx.GridBagSizer(integer vgap, integer hgap)
⼦控件之间⽤垂直与⽔平定义，然后⽤Add()⽅法添加：
[python]
1. Add(self, item, tuple pos, tuple span=wx.DefaultSpan, integer flag=0,
2. integer border=0, userData=None)
插⼊表格中的控件，有pos指定位置，（0，0）表标左上⽅的表格。

span(跨度)为可选。

下⾯两种⽅法可以伸缩：
[python]
1. AddGrowableRow(integer row)
2. AddGrowableCol(integer col)
[python]
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=(320,130))
10. self.InitUI()
11. self.Centre()
12. self.Show()
13. def InitUI(self):
14. panel = wx.Panel(self)
15. sizer = wx.GridBagSizer(4,4)
16.
17. text = wx.StaticText(panel,label='Rename to')
18. sizer.Add(text,pos=(0,0),flag=wx.TOP|wx.LEFT|wx.BOTTOM,border=5)
19.
20. tc = wx.TextCtrl(panel)
21. sizer.Add(tc,pos=(0,1),span=(1,5),flag=wx.EXPAND|wx.LEFT|wx.RIGHT,border=5)
22.
23. buttonOK = wx.Button(panel,label='OK',size=(90,28))
24. buttonClose = wx.Button(panel,label='Close',size=(90,28))
25. sizer.Add(buttonOK,pos=(3,3))
26. sizer.Add(buttonClose,pos=(3,4),flag=wx.RIGHT|wx.BOTTOM,border=5)
27.
28. sizer.AddGrowableRow(2)
29. sizer.AddGrowableCol(1)
30. panel.SetSizerAndFit(sizer)
31. if __name__ == '__main__':
32. app = wx.App()
33. Example(None,title="FlexGridSizer.py")
34. app.MainLoop()
我们必须把它看作是⼀个⼤的⽹格状的表
[python]
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]
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]
1. sizer.Add(buttonOk, pos=(3, 3))
2. sizer.Add(buttonClose, pos=(3, 4), flag=wx.RIGHT|wx.BOTTOM, border=5)
第四⾏放置两个按钮，第三⾏为空。

注意：我们并没有在两个按钮之间设置空隙。

wx.GridBagSizer创建之处，各个控件之间已经有空隙了。

[python]
1. sizer.AddGrowableCol(1)
2. sizer.AddGrowableRow(2)
最后,我们必须要做的事情,是让我们的对话框⼤⼩。

我们把第⼆列第三⾏可增长。

现在我们可以扩⼤或缩⼩我们的窗⼝。

尝试看看些两⾏,看看会发⽣什么。

下⾯我们来做⼀个java程序员新建类的窗⼝：
[python]
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 = boBox(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]
1. line = wx.StaticLine(panel)
2. sizer.Add(line, pos=(1, 0), span=(1, 5),
3. flag=wx.EXPAND|wx.BOTTOM, border=10)
这是⼀条线,⽤于单独的组内的⼩部件的布局。

[python]
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]
1. sb = wx.StaticBox(panel, label="Optional Attributes")
2. boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL) wxStaticBoxSizer 像⼀个普通的wx.BoxSizer，但它会添加⼀个静态框。