第一章 - wxFormBuilder + Python实现日记本工具图形界面

前言

一、图形设计

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博客

相关阅读:
mac pro M1(ARM)安装：ftp远程文件互传工具
TRC天然拟胆碱生物碱丨艾美捷TRC盐酸乙环胺
DS线性表之栈和队列
【算法】湖心岛上的数学梦--用c#实现一元多次方程的展开式
Vue前端框架的使用
关于springboot的优雅停机和健康检查配置（用于k8s服务重启）
《嵌入式 – GD32开发实战指南》第13章 DAC
Redis缓存异常及处理方案总结
java计算机毕业设计ssm实验室设备管理系统5k648（附源码、数据库）
String的字符串拼接

原文地址：https://blog.csdn.net/weixin_40331132/article/details/126843388

第一章 - wxFormBuilder + Python实现日记本工具图形界面

前言

一、图形设计

1、主框设置

2、添加菜单

​​​​​​​3、添加控件（核心：布局）

二、图形界面生成的代码注释

3、添加控件（核心：布局）