跳转到内容
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 = {
// here you can add a tray menu, title, tooltip, event handler, etc
};
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');
    },
    },
    ],
    });

监听托盘事件

托盘图标为以下鼠标事件发出事件

  • 点击:当光标接收到单个左键、右键或中键单击时触发,包括鼠标按下是否释放的信息
  • 双击:当光标接收到双击操作时触发
  • 进入:当光标进入托盘图标区域时触发
  • 移动:当光标在托盘图标区域中移动时触发
  • 离开:当光标离开托盘图标区域时触发
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 贡献者。CC-BY / MIT