原生功能:菜单、托盘与对话框
原生功能:菜单、托盘和对话框
Section titled “原生功能:菜单、托盘和对话框”使用 Tauri 而非标准 Web 应用的主要原因之一是它能够与操作系统(Operating System)深度集成。在本章中,我们将实现一些功能,让你的应用拥有“原生体验”(Native Feel):应用程序菜单(Application Menus)、系统托盘(System Trays)和原生文件对话框(Native File Dialogs)。
应用程序菜单
Section titled “应用程序菜单”应用程序菜单在 macOS 上显示在屏幕顶部,在 Windows 和 Linux 上则显示在窗口顶部。它提供了“文件”(File)、“编辑”(Edit)和“视图”(View)等标准操作。
在 Tauri v2 中,你通常在 lib.rs 文件中用 Rust 构建菜单。你可以创建一个默认菜单,或者逐项构建一个自定义菜单。
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)等选项。
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(())})原生文件对话框
Section titled “原生文件对话框”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)之间的鸿沟。