跳转到内容
Tauri
Guides References Blog Releases

窗口菜单

原生应用程序菜单可附加到窗口或系统托盘。仅适用于桌面平台。

创建一个基础菜单

要创建一个基础的本机窗口菜单，并将其附加到一个窗口。

使用 Menu.new 静态函数创建一个窗口菜单。

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


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


// 如果某个窗口未显式创建菜单，或者未显式设置菜单，那么此菜单将被分配给它。
menu.setAsAppMenu().then((res) => {
  console.log('menu set success', res);
});

监听自定义菜单项上事件

每个自定义菜单项在被点击时都会触发一个事件。使用 on_menu_event API 来处理这些事件。

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


const menu = await Menu.new({
  items: [
    {
      id: 'Open',
      text: 'open',
      action: () => {
        console.log('open pressed');
      },
    },
    {
      id: 'Close',
      text: 'close',
      action: () => {
        console.log('close pressed');
      },
    },
  ],
});


await menu.setAsAppMenu();

创建多级菜单

要创建多级菜单，您可以向菜单项添加一些子菜单。

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


const fileSubmenu = await Submenu.new({
  text: 'File',
  items: [
    await MenuItem.new({
      id: 'new',
      text: 'New',
      action: () => {
        console.log('New clicked');
      },
    }),
    await MenuItem.new({
      id: 'open',
      text: 'Open',
      action: () => {
        console.log('Open clicked');
      },
    }),
    await MenuItem.new({
      id: 'save_as',
      text: 'Save As...',
      action: () => {
        console.log('Save As clicked');
      },
    }),
  ],
});


const editSubmenu = await Submenu.new({
  text: 'Edit',
  items: [
    await MenuItem.new({
      id: 'undo',
      text: 'Undo',
      action: () => {
        console.log('Undo clicked');
      },
    }),
    await MenuItem.new({
      id: 'redo',
      text: 'Redo',
      action: () => {
        console.log('Redo clicked');
      },
    }),
  ],
});


const menu = await Menu.new({
  items: [
    fileSubmenu,
    editSubmenu,
    await MenuItem.new({
      id: 'quit',
      text: 'Quit',
      action: () => {
        console.log('Quit pressed');
      },
    }),
  ],
});


menu.setAsAppMenu();

创建预定义菜单

若要使用由操作系统或 Tauri 预先定义了行为的内置（原生）菜单项。

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


const copy = await PredefinedMenuItem.new({
  text: 'copy-text',
  item: 'Copy',
});


const separator = await PredefinedMenuItem.new({
  text: 'separator-text',
  item: 'Separator',
});


const undo = await PredefinedMenuItem.new({
  text: 'undo-text',
  item: 'Undo',
});


const redo = await PredefinedMenuItem.new({
  text: 'redo-text',
  item: 'Redo',
});


const cut = await PredefinedMenuItem.new({
  text: 'cut-text',
  item: 'Cut',
});


const paste = await PredefinedMenuItem.new({
  text: 'paste-text',
  item: 'Paste',
});


const select_all = await PredefinedMenuItem.new({
  text: 'select_all-text',
  item: 'SelectAll',
});


const menu = await Menu.new({
  items: [copy, separator, undo, redo, cut, paste, select_all],
});


await menu.setAsAppMenu();

更改菜单状态

如果您想要更改菜单的状态，例如文本、图标或选中状态，可以再次使用 set_menu。

import {
  Menu,
  CheckMenuItem,
  IconMenuItem,
  MenuItem,
} from '@tauri-apps/api/menu';
import { Image } from '@tauri-apps/api/image';


let currentLanguage = 'en';


const check_sub_item_en = await CheckMenuItem.new({
  id: 'en',
  text: 'English',
  checked: currentLanguage === 'en',
  action: () => {
    currentLanguage = 'en';
    check_sub_item_en.setChecked(currentLanguage === 'en');
    check_sub_item_zh.setChecked(currentLanguage === 'cn');
    console.log('English pressed');
  },
});


const check_sub_item_zh = await CheckMenuItem.new({
  id: 'zh',
  text: 'Chinese',
  checked: currentLanguage === 'zh',
  action: () => {
    currentLanguage = 'zh';
    check_sub_item_en.setChecked(currentLanguage === 'en');
    check_sub_item_zh.setChecked(currentLanguage === 'zh');
    check_sub_item_zh.setAccelerator('Ctrl+L');
    console.log('Chinese pressed');
  },
});


// 从路径加载图标
const icon = await Image.fromPath('../src/icon.png');
const icon2 = await Image.fromPath('../src/icon-2.png');


const icon_item = await IconMenuItem.new({
  id: 'icon_item',
  text: 'Icon Item',
  icon: icon,
  action: () => {
    icon_item.setIcon(icon2);
    console.log('icon pressed');
  },
});


const text_item = await MenuItem.new({
  id: 'text_item',
  text: 'Text Item',
  action: () => {
    text_item.setText('Text Item Changed');
    console.log('text pressed');
  },
});


const menu = await Menu.new({
  items: [
    {
      id: 'change menu',
      text: 'change_menu',
      items: [text_item, check_sub_item_en, check_sub_item_zh, icon_item],
    },
  ],
});


await menu.setAsAppMenu();

© 2025 Tauri Contributors. CC-BY / MIT