当前位置：首页 > news >正文

【Tauri2】011——菜单menu(2)

news 来源：原创 2025/5/24 10:29:57

前言

前面简单地创建了菜单，接下来就来试试菜单中的action

Rust中菜单项注册action

AppHandle in tauri - Rusthttps://docs.rs/tauri/2.4.0/tauri/struct.AppHandle.html#method.on_menu_event这就需要用到App或者AppHandle中的方法on_menu_event

#[must_use]
#[cfg(desktop)]
pub fn on_menu_event<F: Fn(&AppHandle<R>, MenuEvent) + Send + Sync + 'static>(
    mut self,
    f: F,
  ) -> Self

第一个参数是f，f的泛型是F

F的约束，有函数trait Fn表示闭包可调用多次，不需要可变

闭包的参数，第一个是AppHandle，第二个是MenuEvent。

返回Self。

这个MenuEvent，就只有一个方法id

#[derive(Debug, Clone, Serialize)]
pub struct MenuEvent {
  /// Id of the menu item which triggered this event
  pub id: MenuId,
}

而这个id是MenuId这个结构体，实现了AsRef这个trait

impl AsRef<str> for MenuId {
    fn as_ref(&self) -> &str {
        self.0.as_ref()
    }
}

因此在事件中访问id写法如下

event.id().as_ref()

或者

event.id().0.as_str()

就可以得到id的字符串切片，在通过match或者if let，在里面写action

最后简单的代码如下，在menu.rs中

pub fn create_menu(app: &AppHandle) ->Result<Menu<Wry>> {
    let print=MenuItem::with_id(
        app,
        "print",
        "打印",
        true,
        None::<&str>
    )?;

    let menu=Menu::new(app)?;
    menu.append(&print)?;
    app.on_menu_event(|app,event| {
        match event.id().as_ref() {
            "print" => {
                println!("打印");
            }
            _ => {}
        }
        
    });
    Ok(menu)
}

很简单。结果如下

在前端实现菜单项的action

这个更简单，在前端TypeScript中

从接口MenuItemOptions中，可以发现一个可选参数action是个函数

export interface MenuItemOptions {

    id?: string;

    text: string;

    enabled?: boolean;

    accelerator?: string;

    action?: (id: string) => void;
}

函数中有一个参数id是字符串，简单写一下。

    const menuItems = {
            id: "first",
            items: [
                {
                    id: "first-item",
                    text: "First",
                    action: (id: string) => {
                        console.log("clicked id: " + id);
                    }
                }
            ]
        } as MenuOptions;