跳到內容
Tauri
指南 參考 部落格 發佈

視窗選單

原生應用程式選單可以附加到視窗或系統 Tray。在桌面上可用。

建立基礎層級選單

若要建立基礎層級原生視窗選單，並附加到視窗

使用 Menu.new 靜態函式來建立視窗選單

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


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


// If a window was not created with an explicit menu or had one set explicitly,
// this menu will be assigned to it.
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();

建立多層級選單

若要建立多層級選單，您可以將一些子選單新增到選單項目

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]


use tauri::{image::Image, menu::{CheckMenuItemBuilder, IconMenuItemBuilder, MenuBuilder, SubmenuBuilder}};


fn main() {
    tauri::Builder::default()
        .setup(|app| {
            let text_menu = SubmenuBuilder::new(app, "File")
                .text("open", "Open")
                .text("quit", "Quit")
                .build()?;


            let lang_str = "en";
            let check_sub_item_1 = CheckMenuItemBuilder::new("English")
                .id("en")
                .checked(lang_str == "en")
                .build(app)?;


            let check_sub_item_2 = CheckMenuItemBuilder::new("Chinese")
                .id("en")
                .checked(lang_str == "en")
                .enabled(false)
                .build(app)?;


            let icon_image = Image::from_bytes(include_bytes!("../icons/icon.png")).unwrap();


            let icon_item = IconMenuItemBuilder::new("icon")
                .icon(icon_image)
                .build(app)?;


            let check_menus = SubmenuBuilder::new(app, "language")
                .item(&check_sub_item_1)
                .item(&check_sub_item_2)
                .build()?;




            let menu = MenuBuilder::new(app)
                .items(&[&text_menu, &check_menus, &icon_item])
                .build()?;


            app.set_menu(menu)?;


            print!("Hello from setup");
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

建立預定義選單

若要使用內建（原生）選單項目，這些項目具有作業系統或 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');
  },
});


// Load icon from path
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