382
大家好，我是痞子衡，是正经搞技术的痞子。今天痞子衡给大家介绍的是 wxPython GUI 构建工具 wxFormBuilder。
一、手工代码布局 GUI 界面的烦恼
如果你曾经设计过上位机软件 GUI 界面，初始阶段一定是纯手工代码布局 GUI 界面上的各个控件，相信你肯定遇到过如下烦恼：
控件类型较难找：UI 界面里有很多控件类型，纯手工写代码需要翻看文档一个个去查找这些控件的名字与用法。
尺寸位置难调整：如果界面上已经布了多个控件，想要整体去调整这些控件的尺寸与位置是一件头疼的事。
效果查看不实时：每新添加一个控件都需要运行才能查看整体效果，如果代码添加不完善，可能无法运行看不到效果。
二、wxFormBuilder 工具背景
在讲本文主角 wxFormBuilder 之前有必要提一下这个软件的来历，首先要追述到大名鼎鼎的跨平台 GUI 库 wxWidgets，这个库主要是用 C++语言实现的；鉴于 wxWidgets 的流行，Robin Dunn 用 Python 语言对 wxWidgets 做了一层封装，封装后便成了 Python 版 GUI 库 wxPython；下面是这两个 GUI 库的官方主页：
wxWidgets 项目官方主页: https://www.wxwidgets.org/
wxPython 项目官方主页: https://www.wxpython.org/
wxWidgets 的各种 UI 控件功能均是通过 class 来实现的，这个链接 http://docs.wxwidgets.org/3.0/page_class_cat.html 列出了 wxWidgets 里的所有 class，wxPython 并没有实现 wxWidgets 里全部 class，但基本实现了大部分常用 class，这个链接 https://docs.wxpython.org/wx.1moduleindex.html 列出了 wxPython 里所有的 class。
知道了 wxPython 的 class 便可以开始设计 GUI 界面，但手工写代码设计界面太繁琐，因此 wxFormBuilder 应运而生，这是一款能够可视化设计界面的工具（并不是唯一工具，还有 wxGlade、Boa Constructor 等），通过该工具设计 GUI 界面后可自动生成 wxPython 代码，下面是 wxFormBuilder 的官方主页：
wxFormBuilder 项目 Github: https://github.com/wxFormBuilder/wxFormBuilder
三、wxFormBuilder 快速上手
使用 wxFormBuilder 去设计 GUI 界面可以不用掌握 wxPython 里的各个控件 class 的具体用法，你只需要在 wxFormBuilder 软件里添加这些控件即可，下面痞子衡将简介 wxFormBuilder 的用法：
3.1 软件界面
安装好 wxFormBuilder 软件之后打开这个软件，可见到如下界面，界面主要分为四大区：项目区、控件区、编辑区、属性区。软件使用起来非常简单，就是在【控件区】里点击添加需要的控件，这些控件的效果会在【编辑区】里实时显示，并在【属性区】这些控件的属性，【项目区】用于显示控件间的层级关系。
3.2 基础布局
让我们开始创建一个 GUI 的基础框架，基础框架包括：Frame（外围轮廓）、Sizer（内部控件区）、menubar（顶部菜单栏）、statusBar（底部状态栏）。
第一步是添加一个 Frame，这是 GUI 的轮廓基础，其 size（default 为 500；300）决定了 GUI 整体界面的大小。
第二步是在 Frame 下添加一个 Sizer，后续所有控件均是放在 Sizer 里的。关于 Sizer 部分需要特别说明一下，wxPython 提供的 Sizer 类型有如下七种：wxBoxSizer、wxWrapSizer、wxStaticBoxSizer、wxGridSizer、wxFlexGridSizer、wxGridBagSizer、wxStdDialogButtonSizer，Sizer 的样式决定了后续控件的整体相对位置关系，选定了 Sizer 即选定了 GUI 界面样式。关于这七种 Sizer 的具体样式请见 https://docs.wxpython.org/sizers_overview.html#sizers-overview。如果你觉得单个 Sizer 里的控件布局太单调，你可以嵌套使用 Sizer，这是实现 GUI 界面控件布局多样化的关键。
第三步是在 Frame 顶部添加一个 menubar：
第四步是在 Frame 底部添加一个 statusBar：
3.3 多种控件
基础布局搞定之后，接下来便是在 Sizer 里添加控件，wxPython 支持的控件非常丰富，其中比较常用的是如下几个：button（按钮）、staticText（静态显示文本框）、textCtrl（输入输出文本框）、Choice（复选框）、checkBox（选中框）、slider（滑动条）。前面痞子衡选择的 Sizer 是 wxBoxSizer，即自上而下布局，因此这些控件在 Sizer 是自上而下排列的，各个控件的位置后续在属性里还可以微调，但改变不了自上而下的格局。
3.4 控件属性
添加了所有控件之后，下一步便是分别设置控件的属性，进一步调整控件。痞子衡以 Button 属性为例，痞子衡勾选了如下 4 项比较重要的属性设置，分别是 name（button 在后续 python 代码的对象名，一般需要按其功能修改，修改后使得代码阅读 / 修改起来更直观）、label（button 在 GUI 里显示的标签名，此处是 MyButton，也需要按其功能修改，方便用户使用软件）、size（设置 button 的尺寸，这个尺寸最大不应超过 Sizer 尺寸）、flag（调整对齐方式从而调整 Button 在 Sizer 里的位置）。另外有一个属性不得不说，即控件位置 pos，在 wxFormBuilder 里设置这个属性并不生效，痞子衡猜想可能跟 Sizer 样式有关，因为 Sizer 决定了控件间相对位置关系，因此控件的 pos 不能随意设置。
3.5 触发事件
有些控件是需要有响应的，比如 Button，在 GUI 软件实际使用中，用户如果按下了 Button，应该需要触发某个任务，任务需要有响应函数，这个响应函数需要在【Events】里设置，Button 的响应函数在 OnButtonClick 里设置，痞子衡在这里指定了响应函数名为 showMessage。在 wxFormBuilder 里我们只需要指定控件响应函数名即可，响应函数的具体功能实现，不属于 wxFormBuilder 设计范畴。
3.6 生成代码
当 GUI 界面布局全部完成之后，需选择 File->Generate Code 或 F8 生成 python 代码，需要复制所有的 python 代码并保存在单独的文件里，痞子衡保存在了 my_win.py 文件里。
可以简单看一下这个 my_win.py 里的内容，代码里首先 import 了 wx 库（即 wxPython 库），并定义了名为 MyFrame1 的 class，这个 class 主要包含两个函数 __init__()和 showMessage()：__init__()里初始化了各个控件成员 self.m_xx，这与我们在 wxFormBuilder 里添加控件是对应的；showMessage()是 Button 控件的响应函数，但这个响应函数并没有任何实质代码，当然我们可以在这个函数里面实现 Button 响应功能，但一般不建议直接在 wxFormBuilder 生成的代码里添加代码，因为你可能随时调整 GUI 页面布局，那么 main_win.py 里的代码会重新生成，这样会覆盖我们自己添加的代码，导致维护起来比较麻烦。
# -*- coding: utf-8 -*-
###########################################################################
## Python code generated with wxFormBuilder (version Jul 11 2018)
## http://www.wxformbuilder.org/
##
## PLEASE DO *NOT* EDIT THIS FILE!
###########################################################################
import wx
import wx.xrc
###########################################################################
## Class MyFrame1
###########################################################################
class MyFrame1 ( wx.Frame ):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, 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.m_button1 = wx.Button( self, wx.ID_ANY, u"MyButton", wx.Point( -1,-1 ), wx.DefaultSize, 0 )
bSizer1.Add( self.m_button1, 0, wx.ALL, 5 )
self.m_staticText1 = wx.StaticText( self, wx.ID_ANY, u"MyLabel", wx.DefaultPosition, wx.DefaultSize, 0 )
self.m_staticText1.Wrap( -1 )
bSizer1.Add( self.m_staticText1, 0, wx.ALL, 5 )
self.m_textCtrl1 = wx.TextCtrl( self, wx.ID_ANY, wx.EmptyString, wx.Point( -1,-1 ), wx.DefaultSize, 0 )
bSizer1.Add( self.m_textCtrl1, 0, wx.ALL, 5 )
m_choice1Choices = []
self.m_choice1 = wx.Choice( self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, m_choice1Choices, 0 )
self.m_choice1.SetSelection( 0 )
bSizer1.Add( self.m_choice1, 0, wx.ALL, 5 )
self.m_checkBox1 = wx.CheckBox( self, wx.ID_ANY, u"Check Me!", wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer1.Add( self.m_checkBox1, 0, wx.ALL, 5 )
self.m_slider1 = wx.Slider( self, wx.ID_ANY, 50, 0, 100, wx.DefaultPosition, wx.DefaultSize, wx.SL_HORIZONTAL )
bSizer1.Add( self.m_slider1, 0, wx.ALL, 5 )
self.SetSizer( bSizer1 )
self.Layout()
self.m_menubar1 = wx.MenuBar( 0 )
self.m_menu1 = wx.Menu()
self.m_menuItem1 = wx.MenuItem( self.m_menu1, wx.ID_ANY, u"MyMenuItem", wx.EmptyString, wx.ITEM_NORMAL )
self.m_menu1.Append( self.m_menuItem1 )
self.m_menubar1.Append( self.m_menu1, u"MyMenu" )
self.SetMenuBar( self.m_menubar1 )
self.m_statusBar1 = self.CreateStatusBar( 1, wx.STB_SIZEGRIP, wx.ID_ANY )
self.Centre( wx.BOTH )
# Connect Events
self.m_button1.Bind( wx.EVT_BUTTON, self.showMessage )
def __del__( self ):
pass
# Virtual event handlers, overide them in your derived class
def showMessage( self, event ):
event.Skip()
四、使用 wxFormBuilder 生成的代码
前面已经使用 wxFormBuilder 生成 GUI 界面类 MyFrame1 并保存在 my_win.py 文件中，此时需要创建一个主函数文件去调用 MyFrame1，下面是痞子衡创建的 main_win.py 中的代码：
import wx
# 导入 my_win.py 中内容
import my_win
# 创建 mainWin 类并传入 my_win.MyFrame1
class mainWin(my_win.MyFrame1):
# 实现 Button 控件的响应函数 showMessage
def showMessage(self, event):
self.m_textCtrl1.Clear()
self.m_textCtrl1.SetValue('hello world')
if __name__ == '__main__':
# 下面是使用 wxPython 的固定用法
app = wx.App()
main_win = mainWin(None)
main_win.Show()
app.MainLoop()
最后让我们测试一下这个 GUI 软件，在命令行下运行 main_win.py
PS D:my_git_repo> python .main_win.py
至此，wxPython GUI 构建工具 wxFormBuilder 痞子衡便介绍完毕了，掌声在哪里~~~
