如果你以前使用过visual studio开发过winForm，想必对它的拖拽设计界面的功能印象深刻。使用wxPython开发GUI应用，也有相应的可视化设计工具，常见的wxGlade和wxFormBuilder，这两种工具我都用过，后者比较好用一些，接下来就来介绍一下wxFormBuilder的使用方法。
首先去GitHub上面下载对应的安装包，链接是github.com/wxFormBuild…
安装好了以后，打开wxFormBuilder，如图所示。为了便于说明，我把界面标注了序号，划分成5个区域。
- 区域1是Object Tree，即对象面板，当前界面所有的组件以树形结构显示在这个区域里
- 区域2是Object Properties，即对象属性面板，可以设置组件的属性和事件绑定
- 区域3是Editor，即编辑器面板，每个tab分别代表了对应的编辑器内容
- 区域4是Component Palatte，即常用组件面板，点击即可添加对应的组件
- 区域5是工具栏
接下来我们借助这个工具来设计一个简单的日记本程序，界面如图所示。
添加Frame
点击组件面板上面的Forms标签，在显示的组件上方，鼠标悬停会出现组件名称，点击Frame组件。可以看到：
- 对象面板上面已经添加了MyFrame1这个节点
- 编辑器面板也出现了一个窗体，点击Python标签页会看到自动生成的代码
- 属性面板的内容也发生变化，在title那一行输入“日记本”，然后鼠标点击空白区域，即可看到窗体标题为“日记本”。修改name为MainFrame，即可将当前窗体命名为MainFrame，其他属性的修改方法同理。
添加Sizer
在组件面板的Layout标签下，点击wxBoxSizer，在属性面板上可以看到默认的布局方向是竖直方向。
添加标题栏
在左侧的对象面板上点击wxBoxSizer节点，然后点击组件面板的Common标签，选择wxTextCtrl组件。
因为标题栏是占满一行的，所以需要设置wx.EXPAND标志，在属性面板的sizeitembase中勾选wxEXPAND 即可，也可以点击工具栏的Expand按钮来实现wx.EXPAND标志。此时文本框已经沾满一行。
在属性面板中的value这一行中填写“请输入笔记标题”，这样文本框就有了默认文字，并修改name为tc_title。
添加详情文本框
点击组件面板的Common标签，选择wxTextCtrl组件，为其设置wx.EXPAND标志，另外，详情文本框还需要占据剩余的垂直空间，我们还需要设置其伸缩比例为1，在属性面板的sizeritem部分中，设置proportion 的值为1，或者直接点击工具栏的Stretch按钮，此时详情文本框占据了剩余空间。修改value为“请输入笔记详情”，并修改name属性为tc_detail。
添加按钮
我们可以将确定和取消按钮单独放在一个BoxSizer里面，点击组件面板的Layout标签页，选择wxBoxSizer组件。然后再点击Common标签页的wxButton按钮，可以发现此时底部区域很大，这是因为新添加的BoxSizer 默认就拉伸了，选中BoxSizer，点击工具栏上的Expand和Stretch按钮，取消水平和垂直拉伸，并设置orient属性为wxHORIZONTAL，表示水平排列，此时底部区域正常了。
在属性面板中，将按钮的Label值设置为“确定”，并修改name属性为btn_save。再添加一个按钮，将Label 值设置为“取消”，并设置name属性为btn_clear。
按钮居中对齐
此时两个按钮是垂直靠右对齐的，选择按钮的上级BoxSizer，勾选sizeitembase 区域中的wxALIGN_CENTER_HORIZONTAL标志，此时按钮已经水平居中了。
添加事件绑定
我们希望点击确定按钮时，会将日记内容保存到文件里面，点击取消时，则清空文本框的内容。
选中确定按钮，在属性面板中点击Events标签，在OnButtonClick那一行输入“save_content”，点击编辑器面板的Python 标签，可以看到生成的代码，定义了一个save_content方法。
接着选中取消按钮，将按钮点击事件绑定为“clear_content”方法。
保存工程
基本界面和事件绑定已经完成了，点击View菜单栏，选中XRC Window菜单，即可预览当前窗体。
点击File菜单选择Save，指定一个文件夹来保存当前工程。
在编辑器里面可以查看到已经生成的Python 代码，我们可以直接复制这部分代码，也可以将代码保存到工程目录下面，具体的做法如下。
- 在对象面板中选择Project节点，然后在对应的属性面板中，找到code_generation，勾选Python选项。
- 将file 项的值设置为“simple_diary”，同时勾选relative_path。
- 最后在File菜单栏中点击Generate Code菜单，wxFormBuilder就会将Python代码保存到工程目录下的simple_diary.py文件中。
生成的simple_diary.py文件里面的内容如下。
# -*- coding: utf-8 -*-
###########################################################################
## Python code generated with wxFormBuilder (version Oct 26 2018)
## http://www.wxformbuilder.org/
##
## PLEASE DO *NOT* EDIT THIS FILE!
###########################################################################
import wx
import wx.xrc
###########################################################################
## Class MainFrame
###########################################################################
class MainFrame ( wx.Frame ):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"日记本", pos = wx.DefaultPosition, size = wx.Size( 500,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )
bSizer1 = wx.BoxSizer( wx.VERTICAL )
self.tc_title = wx.TextCtrl( self, wx.ID_ANY, u"请输入笔记标题", wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer1.Add( self.tc_title, 0, wx.ALL|wx.EXPAND, 5 )
self.tc_detail = wx.TextCtrl( self, wx.ID_ANY, u"请输入笔记详情", wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer1.Add( self.tc_detail, 1, wx.ALL|wx.EXPAND, 5 )
bSizer2 = wx.BoxSizer( wx.HORIZONTAL )
self.btn_save = wx.Button( self, wx.ID_ANY, u"确定", wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer2.Add( self.btn_save, 0, wx.ALL, 5 )
self.btn_clear = wx.Button( self, wx.ID_ANY, u"取消", wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer2.Add( self.btn_clear, 0, wx.ALL, 5 )
bSizer1.Add( bSizer2, 0, wx.ALIGN_CENTER_HORIZONTAL, 5 )
self.SetSizer( bSizer1 )
self.Layout()
self.Centre( wx.BOTH )
# Connect Events
self.btn_save.Bind( wx.EVT_BUTTON, self.save_content )
self.btn_clear.Bind( wx.EVT_BUTTON, self.clear_content )
def __del__( self ):
pass
# Virtual event handlers, overide them in your derived class
def save_content( self, event ):
event.Skip()
def clear_content( self, event ):
event.Skip()实现事件处理方法
因为上面自动生成的文件内容会随着界面变化而变化，所以我们不要直接修改这个文件。我们在工程目录下新建一个main.py文件，输入以下代码。
import wx
from simple_diary import MainFrame
class DiaryFrame(MainFrame):
def save_content(self, e):
with open('diary.txt', 'w+') as f:
f.write(f"{self.tc_title.Value}\n{self.tc_detail.Value}")
def clear_content(self, e):
self.tc_title.Clear()
self.tc_detail.Clear()
app = wx.App()
DiaryFrame(None).Show()
app.MainLoop()以上就是使用wxFormBuilder设计界面的基本操作，从下一篇开始，我们将进行印象笔记的开发工作。
