可视化wxPython GUI构建工具wxFormBuilder介绍

1、采用python tkinter手工代码布局GUI界面的烦恼

tkinter是python自带的GUI工具包接口模块。但是在linux系统下面安装开发环境相当麻烦。而且每个控件都需要手工布局，相当麻烦，你需要对每个控件的属性与方法精确掌握，才可以构建出GUI界面，而且构建出的GUI界面比较丑陋。已知有这些缺点，对于构建稍微复杂一点的GUI界面，使用tkinter开发起来会比较费劲。基于此原因，重新开始学习wxPython，并基于wxFormBuilder IDE工具开发GUI界面，后者在完成GUI界面布局之后可以自动生成python代码。你只要在生成的python代码基础上，做进一步重构代码，界面实现部分即可轻松完成，剩下的就是实现逻辑功能代码了。

2、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

3、wxFormBuilder快速上手

使用wxFormBuilder去设计GUI界面可以不用掌握wxPython里的各个控件class的具体用法，你只需要在wxFormBuilder软件里添加这些控件即可，下面简介wxFormBuilder的用法：

3.1 软件界面

image.png

3.2 基础布局

首先创建一个GUI基础框架，基础框架包括:Frame（外围轮廓），Sizer（内部控件区）menubar（顶部菜单栏），statusBar（底部状态栏）。

Step 1：添加一个Frame，此为GUI的轮廓基础，其大小size（default为500；300）决定了GUI整体界面的大小。

image.png

Step 2：添加一个Sizer。

image.png

关于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界面控件布局多样化的关键。

Step 3：在Frame顶部添加一个menuBar：

image.png

Step 4：在Frame底部添加一个statusBar：

image.png

3.3 其他控件（略）

3.4 控件属性

添加了所有控件之后，下一步便是分别设置控件的属性，进一步调整控件。

Frame控件的默认属性：

image.png

wxBoxSizer控件的默认属性：

3.5 触发事件

3.6 生成代码

保存项目，选择python语言，然后按F8按键自动生成python代码。

image.png

在项目目录下面，会自动生成noname.py文件。

image.png

拷贝noname.py文件为mywin.py文件。因为后面如果继续修改界面，再自动生成python代码，生成的代码会覆盖noname.py,假如你已经对noname.py代码做过重构，自动生成代码后，重构代码将被覆盖，前面付出的心血将白费！！！

3.7 调试显示wxFormBuilder生成的python代码

新建一个mainWin.py文件，添加下面的代码：

import wx

#导入mywin.py中内容
import mywin

# 创建mainWin类并传入mywin.MyFrame1
class mainWin(mywin.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()

3.8 windows 10下面调试此GUI代码，查看显示效果：

调出powershell

image.png

PS C:\wxpython_gui\test0813> ls

目录: C:\wxpython_gui\test0813

Mode LastWriteTime Length Name

---

-a---- 2019/8/13 21:22 9927 1.fbp
-a---- 2019/8/13 21:32 467 mainWin.py
-a---- 2019/8/13 21:32 1155 mywin.py
-a---- 2019/8/13 21:22 1155 noname.py

PS C:\wxpython_gui\test0813> python .\mainWin.py
C:\wxpython_gui\test0813\mywin.py:22: wxPyDeprecationWarning: Call to deprecated item. Use SetSizeHints instead.
self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
Traceback (most recent call last):
File ".\mainWin.py", line 17, in
main_win = mainWin(None)
File "C:\wxpython_gui\test0813\mywin.py", line 32, in init
self.m_statusBar2 = self.CreateStatusBar( 1, wx.ST_SIZEGRIP, wx.ID_ANY )
AttributeError: module 'wx' has no attribute 'ST_SIZEGRIP'
PS C:\wxpython_gui\test0813>

修改mywin.py 22行：
self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
改为
self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )

修改32行：
self.m_statusBar2 = self.CreateStatusBar( 1, wx.ST_SIZEGRIP, wx.ID_ANY )
改为
self.m_statusBar2 = self.CreateStatusBar( 1, 0, wx.ID_ANY )

继续调试：
PS C:\wxpython_gui\test0813> python .\mainWin.py

image.png

OK，一个简单的GUI界面构建完成了，是不是很简单？