wxFormBuilder + wxPython 工具开发第一章-拖出日记本图形界面
已于 2022-11-25 09:15:15 修改
阅读量4.3k
收藏
53
点赞数
5
目录
一、图形设计
1、主框设置
2、添加菜单
3、添加控件（核心：布局）
二、图形界面生成的代码注释
前言
使用wxFormBuilder实现个日记本
日记本大体功能：
树目录：根节点，二级节点，三级节点
根节点：唯一且不可删除
二级节点：日期，一天仅可增加一个二级目录
三级节点：日记&文章标题，与编辑框联动
编辑框：日记内容，编写，保存，阅读
本章节先讲述wxFormBuilder对页面的设计与生成的Python代码正确运行
wxFormBuilder最终生成代码运行效果如下
文中 wxFormBuilder 均简化为 wxF 代替
一、图形设计
1、主框设置
步骤1：打开wxF后，将Project的名称改成NoteBook。生代码改成Python。
按F8可以生成py代码文件，
步骤2：先选中NoteBook:Project, 在Forms Tab下找到Farme点击，添加主框体， 属性设置:
名称name: MainFrame
id：wxID_NBMF
框休size:800;600
Ps：按照图中数字序号一步一步操作，图中有序号的均为此道理。
按F18生成代码，查看生成的Python代码
代码里，def __init__()里构造框体，
步骤3：运行程序，检查结果
打开了pycharm，建一个目录，将生成的代码文件复制过去
注意，这里会将self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )改成self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )。防止运行时抛出以下异常
在目录下面添加一个runMain.py的运行文件，在里面编写代码
import wx
from noname import MainFrame
class NewWindow(MainFrame):
pass
if __name__=='__main__':
app = wx.App()
nwid = NewWindow(None)
nwid.Show()
app.MainLoop()
运行runMain.py打开程序框体
2、添加菜单
回到wxF，将Edidtor切换回Designer，继续编辑框体，来添加菜单
步骤1：先选中 MainFrame:Frame，找到Meunu/Toolbar 里wxMenuBar点击添加菜单栏
属性设置：
名称name:top_Menu
id: wxID_TOPMENU
步骤2：添加菜单：保存，打开，复制，粘贴，剪切，撤销，恢复。
上面菜单应该是两组，
文件：保存，打开
编辑：复制，粘贴，剪切，撤销，恢复。
1）在菜单栏里添加‘文件’、‘编辑’菜单
选中top_Menu:wxMenuBar，找到Menu/Toolbar里的wxMenu添加菜单
属性设置：
名称name: m_file
显示label: 文 件
按照上面步骤，再添加‘编辑’菜单
2)在‘文件’、‘编辑’菜单下添加菜单项
先选择m_file:wxMenu，找到Menu/Toolbar里的wxMenuItem添加菜单项
属性设置:
名称name: m_save
展示label: 保存(S)
id: wxID_SAVE
响应设置：
选择响应OnMenuSelection：OnSave
重复上述步骤继续添加‘打开’‘复制’‘粘贴’‘剪切’‘撤销’‘恢复’
当然 ‘复制’‘粘贴’‘剪切’‘撤销’‘恢复’是编辑菜单下的菜单项。
添加完成效果如下
完成后，F8生成新的代码
步骤3：运行程序
将新生成的py文件复制到运行代码目录下，覆盖之前的代码
将代码里的SetSizeHints设置好，
还要将菜单的AppendItem方法改为Append，防止运行时抛出以下异常
在runMain的NewWindow类将父类的菜单响应函数全部覆盖，代码如下
import wx
from noname import MainFrame
'''
继承MainFrame
'''
class NewWindow(MainFrame):
# Virtual event handlers, overide them in your derived class
def OnSave(self, event):
print("保存")
def OnOpen(self, event):
print("打开")
def OnUndo(self, event):
print("撤销")
def OnRedo(self, event):
print("恢复")
def OnCopy(self, event):
print("复制")
def OnClip(self, event):
print("剪贴")
def OnPaste(self, event):
print("粘贴")
if __name__=='__main__':
app = wx.App()
nwid = NewWindow(None)
nwid.Show()
app.MainLoop()运行程序，在框中点击各菜单
3、添加控件（核心：布局）
日记本设计为左边一个树，右边是一个编辑框。
功能：按照日期展示树节点，日期下面可以添加文章，只能添加当前日期。右边输入文字录入，点击日期的文章标题，编辑框展示对应文章，可修改，但也只能修改今天日期的。
但目前只做页面，下期实现功能。
回到wxF，开始做页面
步骤1、添加布局，先选择MainFrame:Frame目录，找到Layout里wxBoxSizer点击添加到菜单下面
属性设置
名称name:mainSizer
orient: wxHORIZONTAL (这个是有两个值，一个是wxVERTICAL，竖向排列，wxHORIZONTAL，横向排列)
上图解释一下orient的方向属性，下图是添加布局的操作序号图
步骤2、添加树控件 与 编辑框
1）树控件添加，先选择mainSizer:wxBoxSizer，在Data里找到wxTreeCtrl控件点击添加
属性设置
名称name: m_nodetree
Id: wxID_NOTETREE
大小size:200;600
布局比率proportion: 1 (WxTreeCtrl里其他控件的比率，这里占比1)
展示属于flag：wxBOTTOM, wxEXPAND, wxLEFT, wxRIGHT, wxTOP （这四个一选，吸边）
2）添加编辑框，先选择mainSizer:wxBoxSizer，在Common里找到wxTextCtrl点击添加编辑框
属性设置：
名称name:m_textEdit
风格style: wxTE_MULTILINE (多行编辑)， wxTE_RICH（自动展示滚动条）
id:wxID_TEXTEDIT
布局比率proportion:3 (树控件那边是1，这边是3，刚好将800px分为200px：600px)
样式flag：wxBOTTOM, wxEXPAND, wxLEFT, wxRIGHT, wxTOP （吸边）
3）F8生成新的py代码
步骤3、运行程序
将生成的py文件copy到运行代码目录下，覆盖之前的代码。
记得修改SetSizeHintsSz， AppendItem
在RunMain添加一个函数生成树节点与设置编辑框文字，RunMain文件新代码如下
import wx
from noname import MainFrame
'''
继承MainFrame
'''
class NewWindow(MainFrame):
# Virtual event handlers, overide them in your derived class
def OnSave(self, event):
print("保存")
def OnOpen(self, event):
print("打开")
def OnUndo(self, event):
print("撤销")
def OnRedo(self, event):
print("恢复")
def OnCopy(self, event):
print("复制")
def OnClip(self, event):
print("剪贴")
def OnPaste(self, event):
print("粘贴")
def set_TreeNode_and_editText(self):
root = self.m_nodetree.AddRoot("日记本目录")
r_fistday = self.m_nodetree.AppendItem(root, '2022-8-27')
self.m_nodetree.AppendItem(r_fistday, '读书回忆')
self.m_nodetree.ExpandAll()
value = '小时候我喜爱读书，现在对书更是爱不释手。倒不是因为我五岁时读妈妈给我买的《安徒生童话》，而是因为喜欢读《稻草人》。'
self.m_textEdit.SetValue(value)
if __name__=='__main__':
app = wx.App()
nwid = NewWindow(None)
nwid.set_TreeNode_and_editText()
nwid.Show()
app.MainLoop()运行程序效果如下。
二、图形界面生成的代码注释
想了解图形界面生成的代码内容，可以细瞧代注释
# -*- coding: utf-8 -*-
###########################################################################
## Python code generated with wxFormBuilder (version Jun 17 2015)
## http://www.wxformbuilder.org/
##
## PLEASE DO "NOT" EDIT THIS FILE!
###########################################################################
'''
# 导入wxPython
'''
import wx
'''
# 导入 wxPython xrc 重要的东西，xml转译，中含有i18n国际文字标准
'''
import wx.xrc
'''
# 将id枚举，后期批量处理控件时可以使用这些id来操作
'''
wx.ID_NBMF = 1000
wx.ID_TOPMENU = 1001
wx.ID_CLIP = 1002
wx.ID_NOTETREE = 1003
wx.ID_TEXTEDIT = 1004
wx.ID_NODE_ADD = 1005
wx.ID_CHANGE = 1006
wx.ID_NODE_DEL = 1007
###########################################################################
## Class MainFrame
###########################################################################
class MainFrame ( wx.Frame ):
def __init__( self, parent ):
'''
初始化构造程序主框体
:param parent: 父框体，可为None
'''
wx.Frame.__init__ ( self, parent, id = wx.ID_NBMF, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 800,600 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
'''
设置windowsSize值，也就是框体的大小
ps:SetSizeHints是由SetSizeHintsSz改的，较为老版本的wxPython用的SetSizeHintsSz
'''
self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )
'''
新增菜单栏top_Menu
新增‘文件‘菜单m_file
新增‘保存’菜单项m_save
将’保存‘菜单项添加到‘文件’菜单
ps：Append是由AppendItem改的，较为老版本的wxPython用的AppendItem
'''
self.top_Menu = wx.MenuBar( 0 )
self.m_file = wx.Menu()
self.m_save = wx.MenuItem( self.m_file, wx.ID_SAVE, u"保存(S)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_file.AppendItem( self.m_save )
'''
新增‘打开’菜单项m_open
将‘打开’菜单项添加到‘文件’菜单m_file中
将‘文件’菜单添加到菜单栏中top_Menu中
'''
self.m_open = wx.MenuItem( self.m_file, wx.ID_OPEN, u"打开(O)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_file.AppendItem( self.m_open )
self.top_Menu.Append( self.m_file, u"文 件" )
'''
新增’编辑‘菜单m_edit
新增’撤销‘菜单项m_undo加入m_edit
'''
self.m_edit = wx.Menu()
self.m_undo = wx.MenuItem( self.m_edit, wx.ID_UNDO, u"撤销(U)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_edit.AppendItem( self.m_undo )
'''
新增’恢复‘菜单项m_redo加入m_edit
'''
self.m_redo = wx.MenuItem( self.m_edit, wx.ID_REDO, u"恢复(R)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_edit.AppendItem( self.m_redo )
'''
新增’复制‘菜单项m_copy加入m_edit
'''
self.m_copy = wx.MenuItem( self.m_edit, wx.ID_COPY, u"复制(C)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_edit.AppendItem( self.m_copy )
'''
新增’剪贴‘菜单项m_Clip加入m_edit
'''
self.m_Clip = wx.MenuItem( self.m_edit, wx.ID_CLIP, u"剪贴(T)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_edit.AppendItem( self.m_Clip )
'''
新增’剪贴‘菜单项m_paste加入m_edit
'''
self.m_paste = wx.MenuItem( self.m_edit, wx.ID_PASTE, u"粘贴(V)", wx.EmptyString, wx.ITEM_NORMAL )
self.m_edit.AppendItem( self.m_paste )
'''
将’编辑‘菜单m_edit加入到菜单栏top_Menu里
'''
self.top_Menu.Append( self.m_edit, u"编 辑" )
'''
将菜单栏添设置成主框的MenuBar
'''
self.SetMenuBar( self.top_Menu )
'''
布局
添加BoxSizer 布局框mainSizer wx.HORIZONTAL 横向排列
'''
mainSizer = wx.BoxSizer( wx.HORIZONTAL )
'''
新增树m_nodetree加入mainSizer
'''
self.m_nodetree = wx.TreeCtrl( self, wx.ID_NOTETREE, wx.DefaultPosition, wx.Size( 200,600 ), 0 )
mainSizer.Add( self.m_nodetree, 1, wx.BOTTOM|wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP, 3 )
'''
新增树m_textEdit加入mainSizer
'''
self.m_textEdit = wx.TextCtrl( self, wx.ID_TEXTEDIT, wx.EmptyString, wx.DefaultPosition, wx.Size( -1,-1 ), wx.TE_MULTILINE|wx.TE_RICH )
mainSizer.Add( self.m_textEdit, 3, wx.BOTTOM|wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP, 3 )
'''
将布局mainSizer 加入到主框体中
Layout调整布局
'''
self.SetSizer( mainSizer )
self.Layout()
self.right_click_menu = wx.Menu()
'''
将主程序框体设置在屏幕居中
'''
self.Centre( wx.BOTH )
'''
菜单的响应事件绑定函数
'''
# Connect Events
self.Bind( wx.EVT_MENU, self.OnSave, id = self.m_save.GetId() )
self.Bind( wx.EVT_MENU, self.OnOpen, id = self.m_open.GetId() )
self.Bind( wx.EVT_MENU, self.OnUndo, id = self.m_undo.GetId() )
self.Bind( wx.EVT_MENU, self.OnRedo, id = self.m_redo.GetId() )
self.Bind( wx.EVT_MENU, self.OnCopy, id = self.m_copy.GetId() )
self.Bind( wx.EVT_MENU, self.OnClip, id = self.m_Clip.GetId() )
self.Bind( wx.EVT_MENU, self.OnPaste, id = self.m_paste.GetId() )
self.m_nodetree.Bind( wx.EVT_RIGHT_DOWN, self.on_pop_reght_menu )
#析造函数
def __del__( self ):
pass
'''
菜单的响应函数
下面注释说在派生类中覆盖它们
'''
# Virtual event handlers, overide them in your derived class
def OnSave( self, event ):
event.Skip()
def OnOpen( self, event ):
event.Skip()
def OnUndo( self, event ):
event.Skip()
def OnRedo( self, event ):
event.Skip()
def OnCopy( self, event ):
event.Skip()
def OnClip( self, event ):
event.Skip()
def OnPaste( self, event ):
event.Skip()
def on_pop_reght_menu( self, event ):
event.Skip()
def MainFrameOnContextMenu( self, event ):
self.PopupMenu( self.right_click_menu, event.GetPosition() )
本章节讲解图形界面设计的内容 ，下一章节讲数据库设计，前后台交互数据展示等
本章代码下载地址：
wxFormBuilder+wxPyton日记本小工具图形界面代码（后端逻辑缺失）-Python文档类资源-CSDN下载
下一章内容地址：
wxFormBuilder + Python 工具开发第二章-日记本工具数据连接与展示_魂尾ac的博客-CSDN博客
扫一扫
472
企业员工
到【灌水乐园】发言
hxsln11: 新手友好级
魂尾ac: 用csdn的私聊我吧，这个回复我很少看，也不能截图，我需要你代码运行的截图
魂尾ac: weixin_40331132 魂尾ac 作者 1 秒前 回复 点赞 用csdn的私聊我吧，这个回复我很少看，也不能截图，我需要你代码运行的截图
晨丶.: 这个怎么解决啊，大佬
晨丶.: 大佬，你这个框架在测试的时候，如果成功跟你展示的结果是相同的，但是失败的话，testCase.py会报错' code = str(response.status_code) str' object has no attribute 'status_code'