wxpython手册

如果你以前使用过visual studio开发过winForm，想必对它的拖拽设计界面的功能印象深刻。使用wxPython开发GUI应用，也有相应的可视化设计工具，常见的wxGlade和wxFormBuilder，这两种工具我都用过，后者比较好用一些，接下来就来介绍一下wxFormBuilder的使用方法。

安装好了以后，打开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设计界面的基本操作，从下一篇开始，我们将进行印象笔记的开发工作。