跳转到内容
Tauri

系统托盘

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

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

src-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 = {
// 你可以在这里添加一个托盘菜单、标题、任务提示、事件处理程序等等
};
const tray = await TrayIcon.new(options);

有关自定义选项的更多信息,请参阅 TrayIconOptions

创建托盘时,您可以使用应用程序图标作为托盘图标:

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

要添加一个单击托盘时显示的菜单,您可以使用 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);

在 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');
    },
    },
    ],
    });

托盘图标可能发出以下鼠标事件:

  • Click: 当光标收到左键、右键或中键单击时触发,包括鼠标是否被释放的信息
  • Double click: 当光标收到双击左键、右键或中键时触发
  • Enter: 当光标进入托盘图标区域时触发
  • Move: 当光标在托盘图标区域移动时触发
  • Leave: 当光标离开托盘图标区域时触发
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


© 2025 Tauri Contributors. CC-BY / MIT