系统托盘

Tauri 允许你为你的应用创建和自定义系统托盘。这可以通过提供对常见操作的快速访问来增强用户体验。

¥Tauri allows you to create and customize a system tray for your application. This can enhance the user experience by providing quick access to common actions.

配置

¥Configuration

首先，更新你的 Cargo.toml 以包含系统托盘所需的功能。

¥First of all, update your Cargo.toml to include the necessary feature for the system tray.

tauri = { version = "2.0.0", features = [ "tray-icon" ] }

使用

¥Usage

托盘 API 在 JavaScript 和 Rust 中均可用。

¥The tray API is available in both JavaScript and Rust.

创建托盘图标

¥Create a Tray Icon

JavaScript
Rust

使用 TrayIcon.new 静态函数创建新的托盘图标：

¥Use the TrayIcon.new static function to create a new tray icon:

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。

¥See TrayIconOptions for more information on the customization options.

use tauri::tray::TrayIconBuilder;

tauri::Builder::default()
.setup(|app| {
let tray = TrayIconBuilder::new().build(app)?;
Ok(())
})

有关自定义选项的更多信息，请参阅 TrayIconBuilder。

¥See TrayIconBuilder for more information on customization options.

更改托盘图标

¥Change the Tray Icon

创建托盘时，你可以使用应用图标作为托盘图标：

¥When creating the tray you can use the application icon as the tray icon:

JavaScript
Rust

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)?;

添加菜单

¥Add a Menu

要附加单击托盘时显示的菜单，你可以使用 menu 选项。

¥To attach a menu that is displayed when the tray is clicked, you can use the menu option.

:::note 注意

默认情况下，菜单在左键和右键单击时都会显示。

¥By default the menu is displayed on both left and right clicks.

要防止左键单击时弹出菜单，请调用 menu_on_left_click(false) Rust 函数或将 menuOnLeftClick JavaScript 选项设置为 false。

¥To prevent the menu from popping up on left click, call the menu_on_left_click(false) Rust function or set the menuOnLeftClick JavaScript option to false.

:::

JavaScript
Rust

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)?;

监听菜单事件

¥Listen to Menu Events

JavaScript
Rust

在 JavaScript 上，你可以将菜单单击事件监听器直接附加到菜单项：

¥On JavaScript you can attach a menu click event listener directly to the menu item:

使用共享菜单点击处理程序

¥Using a shared menu click handler

import { Menu } from '@tauri-apps/api/menu';

function onTrayMenuClick(itemId) {
  // itemId === 'quit'
}

const menu = await Menu.new({
  items: [
    {
      id: 'quit',
      text: 'Quit',
      action: onTrayMenuClick,
    },
  ],
});

使用专用菜单点击处理程序

¥Using a dedicated menu click handler

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 the TrayIconBuilder::on_menu_event method to attach a tray menu click event listener:

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);
    }
  })

监听托盘事件

¥Listen to Tray Events

托盘图标会发出以下鼠标事件的事件：

¥The tray icon emits events for the following mouse events:

点击：当光标收到单击左键、右键或中键时触发，包括鼠标按下是否被释放的信息

¥click: triggered when the cursor receives a single left, right or middle click, including information on whether the mouse press was released or not
双击：当光标收到双击左键、右键或中键时触发

¥Double click: triggered when the cursor receives a double left, right or middle click
输入：当光标进入托盘图标区域时触发

¥Enter: triggered when the cursor enters the tray icon area
移动:当光标在托盘图标区域移动时触发

¥Move: triggered when the cursor moves around the tray icon area
离开:当光标离开托盘图标区域时触发

¥Leave: triggered when the cursor leaves the tray icon area

JavaScript
Rust

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。

¥See TrayIconEvent for more information on the event payload.

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。

¥See TrayIconEvent for more information on the event type.