系统托盘
Tauri 允许您创建和自定义系统托盘,这可以通过提供快速访问常用操作来增强用户体验。
配置
首先,更新您的 Cargo.toml
来包含系统托盘所必需的功能。
tauri = { version = "2.0.0", features = [ "tray-icon" ] }
使用方法
托盘 API 在 JavaScript 和 Rust 中都可用。
创建托盘图标
使用 TrayIcon.new
静态函数来创建一个新的托盘图标
import { TrayIcon } from '@tauri-apps/api/tray';
const options = { // here you can add a tray menu, title, tooltip, event handler, etc};
const tray = await TrayIcon.new(options);
关于自定义选项的更多信息,请查看 TrayIconOptions
。
use tauri::tray::TrayIconBuilder;
tauri::Builder::default().setup(|app| {let tray = TrayIconBuilder::new().build(app)?;Ok(())})
关于自定义选项的更多信息,请查看 TrayIconBuilder
。
更改托盘图标
在创建托盘时,可以使用应用程序图标作为托盘图标
import { TrayIcon } from '@tauri-apps/api/tray';import { defaultWindowIcon } from '@tauri-apps/api/app';
const options = { icon: await defaultWindowIcon(),};
const tray = await TrayIcon.new(options);
let tray = TrayIconBuilder::new() .icon(app.default_window_icon().unwrap().clone()) .build(app)?;
添加菜单
要附加一个在托盘被点击时显示的菜单,可以使用 menu
选项。
import { TrayIcon } from '@tauri-apps/api/tray';import { Menu } from '@tauri-apps/api/menu';
const menu = await Menu.new({ items: [ { id: 'quit', text: 'Quit', }, ],});
const options = { menu, menuOnLeftClick: true,};
const tray = await TrayIcon.new(options);
use tauri::{ menu::{Menu, MenuItem}, tray::TrayIconBuilder,};
let quit_i = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;let menu = Menu::with_items(app, &[&quit_i])?;
let tray = TrayIconBuilder::new() .menu(&menu) .menu_on_left_click(true) .build(app)?;
监听菜单事件
在 JavaScript 中,您可以直接将菜单点击事件监听器附加到菜单项
-
使用共享的菜单点击处理器
import { Menu } from '@tauri-apps/api/menu';function onTrayMenuClick(itemId) {// itemId === 'quit'}const menu = await Menu.new({items: [{id: 'quit',text: 'Quit',action: onTrayMenuClick,},],}); -
使用专用菜单点击处理器
import { Menu } from '@tauri-apps/api/menu';const menu = await Menu.new({items: [{id: 'quit',text: 'Quit',action: () => {console.log('quit pressed');},},],});
使用 TrayIconBuilder::on_menu_event
方法来附加托盘菜单点击事件监听器
use tauri::tray::TrayIconBuilder;
TrayIconBuilder::new() .on_menu_event(|app, event| match event.id.as_ref() { "quit" => { println!("quit menu item was clicked"); app.exit(0); } _ => { println!("menu item {:?} not handled", event.id); } })
监听托盘事件
托盘图标为以下鼠标事件发出事件
- 点击:当光标接收到单个左键、右键或中键单击时触发,包括鼠标按下是否释放的信息
- 双击:当光标接收到双击操作时触发
- 进入:当光标进入托盘图标区域时触发
- 移动:当光标在托盘图标区域中移动时触发
- 离开:当光标离开托盘图标区域时触发
import { TrayIcon } from '@tauri-apps/api/tray';
const options = { action: (event) => { switch (event.type) { case 'Click': console.log( `mouse ${event.button} button pressed, state: ${event.buttonState}` ); break; case 'DoubleClick': console.log(`mouse ${event.button} button pressed`); break; case 'Enter': console.log( `mouse hovered tray at ${event.rect.position.x}, ${event.rect.position.y}` ); break; case 'Move': console.log( `mouse moved on tray at ${event.rect.position.x}, ${event.rect.position.y}` ); break; case 'Leave': console.log( `mouse left tray at ${event.rect.position.x}, ${event.rect.position.y}` ); break; } },};
const tray = await TrayIcon.new(options);
有关事件有效载荷的更多信息,请查看 TrayIconEvent
。
use tauri::{ Manager, tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent}};
TrayIconBuilder::new() .on_tray_icon_event(|tray, event| match event { TrayIconEvent::Click { button: MouseButton::Left, button_state: MouseButtonState::Up, .. } => { println!("left click pressed and released"); // in this example, let's show and focus the main window when the tray is clicked let app = tray.app_handle(); if let Some(window) = app.get_webview_window("main") { let _ = window.show(); let _ = window.set_focus(); } } _ => { println!("unhandled event {event:?}"); } })
有关事件类型的更多信息,请查看 TrayIconEvent
。
© 2025 Tauri 贡献者。CC-BY / MIT