wxPython界面设计器——wxformbuilde的简单教程

https://blog.51cto.com/yuyongid/1717514

前段时间学习了wxPython基本使用方法，教程都是直接使用手写代码去做生成界面的。后来开始做项目，发现这样的手写代码做出来的界面不止丑陋，而且效率低下。

于是，在网上搜索到这个可以给wxPython生成界面的代码的设计器——wxformbuilde。但，苦于在网上找不到相关详细教程。只能自己一步一步摸索怎么使用了。下面是我的实践经验，欢迎指正。

0、基本环境

我是在Linux Mint下开发的，一个类似Ubuntu的Linxu发行版。系统自带了python 2.7，并且我已经安装了对应的wxPython。所以同学们需要自己去百度怎么处理的操作系统的环境了。下面，将以我在Linux下的操作作为例子。

1、下载wxformbuilde

打开如下网址：http://sourceforge.net/projects/wxformbuilder/files/wxformbuilder/3.1.70/

下载对应你的操作系统的安装包，windows下载exe，Mac下载dmg，Linux下载tar.bz2

我的是linux，所以我下载了wxformbuilder_3.1.70-i386.tar.bz2

wKiom1ZXubGhhj9hAAEBYA4og4I699.png

2、安装/解压wxformbuilder

window和Mac怎么操作，大家都懂的。咱们说Linux的。将下载完的软件包放到一个你的一个目录，因为软件是个绿色的可执行文件，所以直接解压就能使用。

cp wxformbuilder_3.1.70-i386.tar.bz2 ~/
cd ~
tar -jxvf wxformbuilder_3.1.70-i386.tar.bz2
3、运行wxformbuilder

解压完之后，咱们得到了一个wxformbuilder目录，里面就是我们需要的软件了。分布了不少的东西，可执行程序在wxformbuilder/bin/目录下。

cd ~/wxformbuilder/bin/
./wxformbuilder
这样就能成功运行wxformbuilder了，出来下面的界面。window和Mac的用户，去×××，你们都懂得。

wKioL1ZXvA3R3qHjAAKvQfw7G_k066.png

至此，咱们软件基本及安装完毕。可以使用了。下面咱们就来写个简单的界面。

1、准备一个窗体。

点击wxformbuilder上方的标签“forms”，并点击标签下方的第一个类似窗体的图标“Frame”

wKioL1ZXvSrjf-ARAACDwU3sW-0406.png

然后，下面就会出现一个窗体。但是现在还不能直接往窗体上添加各种控件。咱们还需要给窗体添加布局器BoxSizer。

2、添加布局器

点击wxformbuilder上方的标签“Layout，并点击标签下方的第一个图标“wxBoxSizer”。添加一个只有以列控件布局的布局器。这时，窗体上并没有什么变化。但是窗口左边的目录树有变化了，窗体下多了一个布局器。

wKioL1ZXvmfzQlbGAABS6uYV8E4643.png

3、放置控件

保持目录树如上图一样，选中布局器bSizer1。这样，添加进窗体的控件都属于并使用这个布局器的方法，单列布局。就是，所有添加上去的控件都是在一列上。

点击wxformbuilder上方的标签“Common，顺次并点击标签下方的地三个图标“wxStaticText”，第四个图标“wxTextCtrl”，第一个图标“wxButton”。这样，窗体设置上就会多出一个文字标签、一个文本框和按钮。

wKioL1ZXwBbDSbgMAAD82EztBDk669.png

4、修改控件属性

点击设计窗体上的控件，或者左边树形结构的控件名。在wxformbuilder右边的编辑栏都会自动变成对应控件的属性编辑。在此，你可以修改该控件的和窗体的各类属性。

此处，我们将会修改主窗体的name，文本编辑框的name，文字标签的label，和按键的label。

4.1 修改主窗体的name

主窗体的name和控件的name决定了你之后要使用的python代码时，使用的实体对象的变量名。点击树形结构的MyFrame1，并在右边属性编辑栏修改窗体的name值为“BaseMainWind。如下图：

wKiom1ZXwcuzr_VdAABVpCfyCmk757.png

此时，左边树形中对应的主窗体也会跟着改变名字，如下图：

wKiom1ZXwimjhIifAABjf9PKz8o343.png

4.2修改控件的属性

依照同样的方法，在右边的编辑框修改对应控件的属性。

文本编辑框wxTextCtrl的name属性修改为“text_main”，文字标签wxStaticText的label属性修改为“主窗口测试”，和按键wxButton的label属性修改为“清空”，按键wxButton的name属性修改为“button_main”。

剩下name属性的我偷个懒，都懒得改了。直接使用默认的好了。

修改完只有应该如下图所示：

wKiom1ZXxD6xljxFAAIFTzHsXdU817.png5、添加控件的触发事情函数

当按钮被按下时，咱们应该触发一个函数，将文本框里的内容清空。所以，应该给按钮控件添加一个触发按下之后应该使用的处理函数。

点击选中按钮控件button_main，在右边的属性编辑框，点击上面的另外一个标签“Events”。添加一个给“OnButtonClick”的处理函数名：main_button_click。如下图：

wKioL1ZXxbzwkZuvAABZbA3w5Eo274.png

6、测试窗体内容。

窗体设计基本完事了，咱们现在稍微测试一个窗体的样子。按下F5，弹出对话框后点击确定。这样就wxformbuilder简单将咱们设计的窗体编译C++的显示方法，显示出窗体的样子。如下图：

wKiom1ZXxm_DQuEGAAATO0CXud4581.png

由于咱们没有制定主窗口的大小，也没有拖动窗口。所以直接套用默认值就是这样的以适合控件布局为大小的窗口。但是，不妨碍咱们做测试。

7、保存给python用的代码。

点击选中左边树形图的最上面的图标，即选中工程。

wKioL1ZXx8OwY-FWAABV184GnOk482.png

再点击最下面标签的python，即可出现在wxPython的代码了。如下图：

wKiom1ZXx52geji_AAAuVacuo14612.png

此时，全选上面的代码。右键，【Copy】。

新建一个py源文件，并将全部代码粘贴进去，保存名为basewin.py的python代码源文件。

至此，wxPython代码就已经生成完毕了，请不要轻易变动文件里的代码。下面就是咱们调用窗体的主要逻辑代码了。

8、编辑逻辑代码

将逻辑代码保存为main_win.py

#!/usr/bin/env python

-- coding: utf-8 --

import wx
import basewin

首先，咱们从刚刚源文件中将主窗体继承下来.就是修改过name属性的主窗体咯。

class MianWindow(basewin.baseMainWindow):
# 咱们给个初始化函数，将文本框初始填有‘主窗口测试’几个字
# 不能直接覆盖原有__ini__方法，这样会导致窗体启动失败。咱们新建一个，然后再调用
def init_main_window(self):
self.text_main.SetValue(‘主窗口测试’)
# 将点击按钮清空文本框的,功能写成函数
def main_button_click(self, event):
self.text_main.Clear()
if name == ‘main’:
app = wx.App()
# None表示的是此窗口没有上级父窗体。如果有，就直接在父窗体代码调用的时候填入‘self’就好了。
main_win = MianWindow(None)
main_win.init_main_window()
main_win.Show()
app.MainLoop()