在我们开发系统的时候,往往需要一个很容易理解功能的工具栏,工具栏是一个系统的快速入口,美观易用的工具栏是可以给系统程序增色不少的,本篇随笔介绍在使用wxpython开发跨平台桌面应用,工具栏的动态展现效果,以及多级工具栏显示等的创建处理过程。
1、wxpython工具栏介绍
在 wxPython 中,工具栏(Toolbar) 是一种常用的 GUI 组件,用于显示一系列图标按钮,提供用户快速访问常用功能。
wxPython 中的工具栏可以使用 wx.ToolBar
类来创建和管理。wxPython 还提供了 wx.adv.ToolBar
组件,支持更丰富的界面元素和布局功能。根据用户需求可以选择使用。
另外在 wxPython 中,wx.aui.AuiToolBar
是 高级用户界面库(Advanced User Interface,AUI) 中的工具栏组件,提供了更灵活和可自定义的工具栏功能。相较于传统的 wx.ToolBar
,AuiToolBar
支持拖放、浮动、隐藏等高级特性,适合开发更复杂的 GUI 应用。
(MacOS系统表现界面)
本篇随笔主要介绍基于wx.aui.AuiToolBar
来及进行工具栏界面的创建处理,以上图形就是基于wx.aui.AuiToolBar
来进行创建的。
1). 主要特性
- 拖放支持:可以通过拖动工具栏,将其停靠到不同的位置。
- 可自定义样式:支持文本、图标、分隔符、下拉菜单等多种样式。
- 可隐藏与显示:用户可以根据需要显示或隐藏工具栏。
- 可浮动:工具栏可以作为独立窗口浮动。
2). 基础示例
以下是一个使用 wx.aui.AuiToolBar
的基本示例:
import wx import wx.aui class MyFrame(wx.Frame): def __init__(self, *args, **kw): super().__init__(*args, **kw) # 创建 AUI 管理器 self.mgr = wx.aui.AuiManager(self) # 创建 AuiToolBar toolbar = wx.aui.AuiToolBar(self, style=wx.aui.AUI_TB_DEFAULT_STYLE | wx.aui.AUI_TB_OVERFLOW) # 添加工具按钮 open_bmp = wx.ArtProvider.GetBitmap(wx.ART_FILE_OPEN, wx.ART_TOOLBAR) save_bmp = wx.ArtProvider.GetBitmap(wx.ART_FILE_SAVE, wx.ART_TOOLBAR) exit_bmp = wx.ArtProvider.GetBitmap(wx.ART_QUIT, wx.ART_TOOLBAR) toolbar.AddTool(wx.ID_OPEN, "Open", open_bmp, short_help="Open File") toolbar.AddTool(wx.ID_SAVE, "Save", save_bmp, short_help="Save File") toolbar.AddSeparator() # 添加分隔符 toolbar.AddTool(wx.ID_EXIT, "Exit", exit_bmp, short_help="Exit Application") # 完成工具栏布局 toolbar.Realize() # 将工具栏添加到 AUI 管理器 self.mgr.AddPane(toolbar, wx.aui.AuiPaneInfo().Name("Toolbar").Top().Dockable(True)) # 绑定事件 self.Bind(wx.EVT_TOOL, self.on_open, id=wx.ID_OPEN) self.Bind(wx.EVT_TOOL, self.on_save, id=wx.ID_SAVE) self.Bind(wx.EVT_TOOL, self.on_exit, id=wx.ID_EXIT) # 设置窗口 self.SetSize((600, 400)) self.Centre() self.mgr.Update() # 更新 AUI 管理器 def on_open(self, event): wx.MessageBox("Open clicked", "Info", wx.OK | wx.ICON_INFORMATION) def on_save(self, event): wx.MessageBox("Save clicked", "Info", wx.OK | wx.ICON_INFORMATION) def on_exit(self, event): self.Close() def OnClose(self, event): self.mgr.UnInit() # 清理 AUI 管理器 self.Destroy() class MyApp(wx.App): def OnInit(self): frame = MyFrame(None, title="wxPython AuiToolBar Example") frame.Show() return True if __name__ == "__main__": app = MyApp() app.MainLoop()
3). 主要方法与属性
AddTool(id, label, bitmap, short_help="", long_help="")
:向工具栏添加工具按钮。AddSeparator()
:添加分隔符。AddControl(control)
:向工具栏添加一个控件,如文本框、下拉框等。Realize()
:确认并显示工具栏布局。SetToolDropDown(id, enable=True)
:为工具按钮启用下拉菜单功能。
4). 常用样式
wx.aui.AuiToolBar
提供了一些样式选项,可以灵活控制工具栏的外观和行为:
AUI_TB_TEXT
:显示按钮文本。AUI_TB_NO_TOOLTIPS
:不显示工具提示。AUI_TB_HORZ_LAYOUT
:水平布局,文本在图标右侧。AUI_TB_PLAIN_BACKGROUND
:使用简单背景,不使用默认渐变效果。AUI_TB_OVERFLOW
:启用溢出按钮,用于显示更多按钮。
wx.aui.AuiToolBar
支持添加自定义控件,例如下拉框、文本框等,可以为工具按钮添加下拉菜单功能。
AUI 的工具栏可以动态更新,比如禁用、启用、添加、移除工具按钮:
5)、AUI 管理器与工具栏
AuiManager
负责管理所有 AUI 组件,工具栏也是其中之一。可以通过 AuiPaneInfo
配置工具栏的停靠位置、浮动、隐藏等特性:
pane_info = wx.aui.AuiPaneInfo().Name("Toolbar").Top().Caption("Main Toolbar").Floatable(True) self.mgr.AddPane(toolbar, pane_info)
wx.aui.AuiToolBar
提供了比标准 wx.ToolBar
更强大和灵活的功能,尤其适合需要动态布局和自定义界面的应用程序。通过 AuiManager
管理工具栏,可以轻松实现拖放、浮动、隐藏等高级界面特性,使应用程序更具可操作性和用户体验。
2、工具栏的折叠和二级菜单的处理
对于工具栏,我们一般需要创建一些常用的按钮,如果界面折叠,工具栏可以进行折叠到一处,方便查看,如下界面所示(MacOS系统表现界面)。
折叠效果对于不同平台的表现效果是一致的,如下是Windows下的展现效果。
而对于工具栏有二级或者更多功能点的处理,也需要考虑,我们可以把它们放在左侧树列表中,进行展开更多的功能。
如下所示是我在一级【权限管理系统】中存在二级菜单,因此让它打开的时候,在左侧树列表中更加直观的体现出来,如下效果所示(Windows 系统表现界面)。
3、系统程序的动态工具的创建处理
上面的最终效果,我们会通过后端的数据库进行存储,动态在界面上进行展示,可以根据角色用户的权限进行分配显示即可。
为了实现这个目标,我们先定义菜单/工具栏的存储对象信息,如下所示。
@dataclass class MenuInfo: id: str # 菜单ID pid: str # 父菜单ID label: str # 菜单名称 icon: str = None # 菜单图标 path: str = None # 菜单路径,用来定位视图 tips: str = None # 菜单提示 children: list["MenuInfo"] = None
对于单个工具栏信息,如下所示。
MenuInfo( id="01", label="用户管理", icon="user", path="views.testaui_panel.DocumentPanel", ),
其中icon, 我们根据内置的ART_图标或者自己定义的集合图标来处理即可。而Path是用来在模块中获得窗体界面的路径,我们动态根据路径来构建界面类。
而对于主工具栏上展示的多级菜单,我们也是通过上面的类来定义嵌套的集合即可,如下所示。
MenuInfo( id="11", label="权限管理系统", icon="computer_key", children=[ MenuInfo( id="11-1", label="用户管理", icon="user", path="views.testaui_panel.DocumentPanel", ), MenuInfo( id="11-2", label="组织机构管理", icon="organ", path="views.my_banner.BannerDialog2", ), ... ] }
在系统开发的初期,我们可以先试用模拟方式获得数据集合,如通过一个工具来来获得数据,如下所示。
以上的菜单集合,我们对接后端FastAPI+SqlAlchemy接口后,即可动态获取,有关 【后端FastAPI+SqlAlchemy接口开发】,大家可以参考随笔介绍。
基于SqlAlchemy+Pydantic+FastApi的Python开发框架的路由处理
基于SqlAlchemy+Pydantic+FastApi的Python开发框架
使用FastAPI来开发项目,项目的目录结构如何规划的一些参考和基类封装的一些处理
在使用FastAPI处理数据输入的时候,对模型数据和路径参数的一些转换处理
前面介绍了一下关于wx.aui.AuiToolBar的一些内容,我们按照上面的创建工具栏,如下代码所示。
def create_toolbars(self): """创建工具栏""" self.tb1 = self._create_toolbar() # 工具栏 self.mgr.AddPane( self.tb1, aui.AuiPaneInfo() .Name("ToolBar1") .Caption("工具条") .ToolbarPane() .Top() .Row(0) .Position(0) .Floatable(False), )
其中mgr是我们的Aui界面管理类,如下定义。
# 初始化AuiManager,用来管理工具栏以及AuiNotebook等 self.mgr = aui.AuiManager(self)
其中_create_toolbar的处理就是获得工具栏集合并动态处理的,如下代码所示。
toolbars = ToolbarUtil.create_tools() #遍历工具栏进行处理 for item in toolbars: tool_id = wx.NewIdRef() help_string = item.tips if item.tips else item.label bitmap = get_bitmap(item.icon) tb.AddSimpleTool( tool_id=tool_id, label=item.label, bitmap=bitmap, short_help_string=help_string, ) # 绑定事件 self.Bind( wx.EVT_TOOL, partial(self.on_tool_event, item), # 这里传递菜单信息 id=tool_id, )
同时我们添加一些常见的折叠、关于、关闭窗口的常用工具栏,并绑定事件处理,如下代码所示。
self.Bind( wx.EVT_TOOL, lambda event: EventPub.toggle_left_panel(),id=self.id_show_hide_left) self.Bind( wx.EVT_TOOL, lambda event: EventPub.show_about_dialog(), id=self.id_about) self.Bind( wx.EVT_TOOL, lambda event: EventPub.close_all_page(), id=self.id_close_all) tb.Realize() return tb
其中对于一些全局的事件处理,我们通过pypubsub 组件进行事件的推动和接收处理。
如下代码,我们定义一个EventPub类来处理,如下代码所示。
from pubsub import pub from entity.common import MenuInfo # 定义事件处理类,统一处理事件发布接口 class EventPub: """事件发布者""" @staticmethod def send_event(event_name: str, data=None): """发送事件""" pub.sendMessage(event_name, data=data) @staticmethod def show_window(data: MenuInfo, hide_toolbox=True): """打开窗口""" pub.sendMessage("show_window", info=data, hide_toolbox=hide_toolbox) ......................
在主窗体初始化的时候,我们会跟踪通过EventPub推送的事件进行处理,如下是对于窗体或者对话框的统一处理,通过动态构建视图对象,我们就可以让它显示在主界面的notbook控件里面了。
对于下面的界面,我们就是通过动态的路径进行统一的构建显示在主面板中的,效果如下所示。
当然MacOS里面的效果也是差不多的,换个窗体界面如下所示。