Skip to content

原生功能:菜单、托盘与对话框

原生功能:菜单、托盘和对话框

Section titled “原生功能:菜单、托盘和对话框”

使用 Tauri 而非标准 Web 应用的主要原因之一是它能够与操作系统(Operating System)深度集成。在本章中,我们将实现一些功能,让你的应用拥有“原生体验”(Native Feel):应用程序菜单(Application Menus)、系统托盘(System Trays)和原生文件对话框(Native File Dialogs)。

应用程序菜单在 macOS 上显示在屏幕顶部,在 Windows 和 Linux 上则显示在窗口顶部。它提供了“文件”(File)、“编辑”(Edit)和“视图”(View)等标准操作。

在 Tauri v2 中,你通常在 lib.rs 文件中用 Rust 构建菜单。你可以创建一个默认菜单,或者逐项构建一个自定义菜单。

src-tauri/src/lib.rs
use tauri::menu::{Menu, MenuItem};
pub fn run() {
tauri::Builder::default()
.setup(|app| {
// Create a custom menu
// 创建一个自定义菜单
let file_menu = Menu::new(app)?;
file_menu.append(&MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?)?;
app.set_menu(file_menu)?;
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

系统托盘(或通知区域,Notification Area)允许你的应用在主窗口关闭后仍在后台运行。这对于音乐播放器、聊天应用或实用工具来说非常完美。

要添加一个托盘图标,你可以使用 TrayIconBuilder 在 Rust 中进行配置。你可以为其附加一个菜单,允许用户右键点击图标并选择“显示”(Show)或“退出”(Exit)等选项。

src-tauri/src/lib.rs
use tauri::tray::TrayIconBuilder;
// Inside your builder chain
// 在你的构建器链中
.setup(|app| {
TrayIconBuilder::new()
.icon(app.default_window_icon().unwrap().clone())
.tooltip("My Tauri App")
.on_menu_event(|app, event| {
// Handle click events here
// 在这里处理点击事件
})
.build(app)?;
Ok(())
})

Web 浏览器使用 <input type="file">,它虽然功能上可用但有局限性。Tauri 允许你打开操作系统的原生文件选择器(file pickers)来打开和保存文件。这为用户提供了熟悉的体验,并且可以访问文件路径(file path),而不仅仅是文件缓冲区(file buffer)。

我们为此使用了官方的 dialog 插件。首先,请确保你已安装该插件(@tauri-apps/plugin-dialog)并在 Rust 中注册了它。

import { open, save } from '@tauri-apps/plugin-dialog';
// Open a file selection dialog
// 打开一个文件选择对话框
const selected = await open({
multiple: false,
filters: [{
name: 'Images',
extensions: ['png', 'jpeg']
}]
});
// Save a file dialog
// 保存文件对话框
const filePath = await save({
filters: [{
name: 'Text',
extensions: ['txt']
}]
});

这些原生集成弥合了网页与真正的桌面应用程序(desktop application)之间的鸿沟。