4. 为Tauri应用添加系统托盘功能的完整指南

发表于 分类于

引言

系统托盘图标是桌面应用程序中常见的功能，它允许应用在窗口关闭后继续在后台运行，并通过托盘图标提供快捷操作。本文将详细介绍如何为Tauri应用添加这一实用功能。

准备工作

在开始之前，请确保你已经：

  1. 安装了最新版本的Rust和Tauri
  2. 创建了一个基础的Tauri项目

实现步骤

第一步：启用Tauri的托盘功能特性

首先，我们需要在Cargo.toml文件中启用 tray-icon 和 unstable 特性：

1
2
[dependencies]
tauri = { version = "2", features = ["tray-icon","unstable"] }

这个配置会告诉Tauri我们需要使用系统托盘功能。

第二步：编写系统托盘实现代码

以下是完整的实现代码，我们将其放在main.rs或适当的位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
use tauri::{
menu::{Menu, MenuItem},
tray::TrayIconBuilder,
AppHandle, Manager,
};

fn setup_tray(app: &AppHandle) -> tauri::Result<()> {
    let main_window = app.get_window("main").unwrap();
    let main_window_clone = main_window.clone();

    // 监听窗口关闭事件
    main_window.on_window_event(move |event| {
        if let tauri::WindowEvent::CloseRequested { api, .. } = event {
            api.prevent_close();
            main_window_clone.hide().unwrap(); // 隐藏窗口而不是关闭
        }
    });

    // 创建托盘菜单项
    let show_main = MenuItem::with_id(app, "show_main", "显示主窗口", true, None::<&str>)?;
    let quit = MenuItem::with_id(app, "quit", "退出", true, None::<&str>)?;
    let menu = Menu::with_items(app, &[&show_main, &quit])?;

    let app_handle = app.clone();

    // 构建并配置托盘图标
    TrayIconBuilder::new()
        .icon(app.default_window_icon().unwrap().clone())
        .menu(&menu)
        .show_menu_on_left_click(true) // 左键点击显示菜单
        .on_menu_event(move |app: &AppHandle, event| match event.id.as_ref() {
            "show_main" => {
                app_handle.get_window("main").unwrap().show().unwrap();
            }
            "quit" => {
                app.exit(0);
            }
            _ => {
                println!("未处理的菜单项: {:?}", event.id);
            }
        })
        .build(app)?;

    Ok(())
}

代码解析

  1. 窗口关闭处理：

    • 我们拦截了窗口的关闭事件，改为隐藏窗口
    • 这确保了应用不会真正退出，而是继续在后台运行

  2. 托盘菜单创建：

    • 创建了两个菜单项：”显示主窗口”和”退出”
    • 使用Menu::with_items将它们组合成菜单

  3. 托盘图标配置：

    • 使用应用的默认图标作为托盘图标
    • 设置了左键点击显示菜单
    • 为每个菜单项添加了事件处理逻辑

实际应用

要在你的Tauri应用中使用这个功能，只需在应用初始化时调用我们的setup_tray函数：

1
2
3
4
5
6
7
8
9
fn main() {
     tauri::Builder::default()
        .setup(|app| {
            let _ = setup_tray(app.handle());
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

启动后就可以看到效果了

1
pnpm tauri dev

tray icon

注意事项

  1. 跨平台兼容性：

    • 不同操作系统对托盘图标的支持可能略有不同
    • 在Linux上可能需要额外的依赖

  2. 图标设计：

    • 建议使用清晰简洁的图标
    • 考虑为不同分辨率提供多个尺寸的图标

  3. 用户体验：

    • 提供明显的退出选项
    • 考虑添加状态指示功能（如未读消息数）

进阶学习

想要了解更多高级功能，可以参考官方文档：

总结

通过本文的指导，你已经学会了如何为Tauri应用添加系统托盘功能。这个功能可以显著提升你的桌面应用的用户体验，让应用更加专业和实用。