在我们开发系统的时候,往往需要一个很容易理解功能的工具栏,工具栏是一个系统的快速入口,美观易用的工具栏是可以给系统程序增色不少的,本篇随笔介绍在使用wxpython开发跨平台桌面应用,工具栏的动态展现效果,以及多级工具栏显示等的创建处理过程。

1、wxpython工具栏介绍

在 wxPython 中,工具栏(Toolbar) 是一种常用的 GUI 组件,用于显示一系列图标按钮,提供用户快速访问常用功能。

wxPython 中的工具栏可以使用 wx.ToolBar 类来创建和管理。wxPython 还提供了 wx.adv.ToolBar 组件,支持更丰富的界面元素和布局功能。根据用户需求可以选择使用。

另外在 wxPython 中,wx.aui.AuiToolBar高级用户界面库(Advanced User Interface,AUI) 中的工具栏组件,提供了更灵活和可自定义的工具栏功能。相较于传统的 wx.ToolBarAuiToolBar 支持拖放、浮动、隐藏等高级特性,适合开发更复杂的 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里面的效果也是差不多的,换个窗体界面如下所示。

使用wxpython开发跨平台桌面应用,动态工具的创建处理的更多相关文章

  1. Electron+Vue开发跨平台桌面应用

    Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某 ...

  2. 使用XUL开发跨平台桌面应用

    先上图: 现在使用html,css,js开发桌面的优势越来越明显了,硬件性能的不断提升,人力成本越发昂贵,用户对界面要求越来越高,全球化下企业间的竞争越发激烈. 桌面软件50%+的工作量都在界面开发这 ...

  3. Electron开发跨平台桌面程序入门教程

    最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord ...

  4. 快速了解Electron:新一代基于Web的跨平台桌面技术

    本文引用了作者“ ConardLi”的<用JS开发跨平台桌面应用,从原理到实践>一文部分内容,原文链接:segmentfault.com/a/1190000019426512,感谢原作者的 ...

  5. nodegui 使用react开发跨平台应用试用

    nodegui官方团队提供了基于react 应用开发方式,同时我们集成官方的packer 进行快速的应用打包 项目说明 项目使用了官方的计算机应用,我使用官方的react starter,同时添加了p ...

  6. 使用JavaScript开发跨平台的桌面应用

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any appli ...

  7. 用HTML5+JS开发跨平台的桌面应用

    通过Node.js和WebKit技术的融合,开发者可以用HTML5技术编写UI,同时又能利用Node.js平台上众多library访问本地OS的能力,最终达到用Web技术就可以编写桌面应用的目的. 选 ...

  8. 使用nodegui 开发高性能的跨平台桌面端应用

    nodegui 是基于qt + nodejs 的跨平台桌面开发方案,官方同时也提供了很不错的文档 简单使用 使用官方的starter clone 代码 git clone https://github ...

  9. Sublime插件库新成员基于APICloud快速开发跨平台App

    互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?“不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验”,APICloud给出了这样的答案! 重磅发布“多开发工具支持策略” ...

  10. 使用c++开发跨平台的程序

    使用c++开发跨平台的程序 背景 在开发过程中,使用c++作为开发语言,通常被认为是痛苦的,啰嗦的,超长开发时间的.最近几年有各种各样的语言被广泛使用,相对比来说c++不是那么出彩.c++虽然年龄大, ...

随机推荐

  1. 配置mysql数据库主从复制

    数据库安装 Step1 先删除data文件 Step2 再根据ini配置文件初始化 mysqld --initialize-insecure --user=mysql Step3 安装mysql服务 ...

  2. 移动端100vh的问题与解决方案

    之所以100vh在移动端出现问题,原因大致如上图,真搞不懂,为什么总是有反人类的设计出现. 经过多方参考,实测有效的方案如下: <style> :root { --vh: 1vh; } & ...

  3. 网站接入qq登录

    网站接入qq登录可以省去注册账号,增加网站的体验度.那么要实现我自己搭建的站点天天博客的qq单点登录需要以下几个步骤:1,申请appid和appkey 首先要去https://connect.qq.c ...

  4. 树上启发式合并——dsu on tree

    参考文章: 树上启发式合并 [dsu on tree]树上启发式合并总结 树上启发式合并の详解 启发式合并 启发式算法是什么呢? 启发式算法是基于人类的经验和直观感觉,对一些算法的优化. 举个例子,最 ...

  5. 【Python + Appium】之元素定位总结(更新)

    一.ID定位 uiautomatorviewer里面的:resource-id driver.find_element(By.ID,"com.csks.businesses:id/tv_nu ...

  6. Kubernetes-11:ConfigMap介绍及演示

    ConfigMap存在的意义 ConfigMap 功能在 Kubernetes1.2版本引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息,ConfigMap API 给我们提供了向容 ...

  7. iptables 命令使用帮助总结

    本文为博主原创,转载请注明出处: 1.iptables 命令帮助参数 root@controller1:~# iptables --help iptables v1.6.1 Usage: iptabl ...

  8. 《花100块做个摸鱼小网站! 》第五篇—通过xxl-job定时获取热搜数据

    ️基础链接导航️ 服务器 → ️ 阿里云活动地址 看样例 → 摸鱼小网站地址 学代码 → 源码库地址 一.前言 我们已经成功实现了一个完整的热搜组件,从后端到前端,构建了这个小网站的核心功能.接下来, ...

  9. 用python编写web 界面可以用哪些库

    背景: 很多人熟悉python, 但不熟悉前端语言js, 为了项目快速落地,也不太想去专门学习 React/Angular/Vue这些框架,那么就会问一个问题,能不能用Python直接写出一个简单we ...

  10. spark 自定义 accumulator

    默认的accumulator 只是最简单的 int/float 有时候我需要一个map来作为accumulator 这样,就可以处理 <string, int>类型的计数了. 此外我还需要 ...