【Tauri2】010——菜单menu（1）
目录
前言
直接创建
菜单项——MenuItem
使用new方法
with_id方法
子菜单——SubMenu
new方法
with_id方法
with_items方法
菜单——Menu
间接创建
在前端创建菜单
总结
前言
前面介绍了setup这个hook。也提到了菜单，这篇来试试创建菜单以及菜单的动作(action)
在Rust中创建菜单/
直接创建
在创建之前，可以进行一些其他操作。
首先，将lib.rs中的run函数的内容复制到main.rs，其他的东西也复制，删除lib.rs
再删除Cargo.toml下的表lib，创建menu.rs
实际上，可以不分开，但是，所有代码都写在一起，不好看。
从小到大创建。
菜单项——MenuItem
MenuItem in tauri::menu - Rust
https://docs.rs/tauri/2.4.0/tauri/menu/struct.MenuItem.html
使用new方法
可以使用new方法，看看函数签名
pub fn new<M, T, A>(
manager: &M,
text: T,
enabled: bool,
accelerator: Option<A>,
) -> crate::Result<Self>这个签名总体上看，四个参数，三个泛型，返回Result<Self>
Manager：&App或者&Apphandle
Text：文本。
enabled：能否使用
accelerator：快捷键
笔者以前还没发现，这个Result，居然是别名
pub type Result<T> = std::result::Result<T, Error>;怪不得，用起来有点怪。
因此，创建菜单栏的代码如下
let start=MenuItem::new(app, "start", true, Some("q"))?;或者没有快捷键
let start=MenuItem::new(app, "start", true, None::<&str>)?;需要标注泛型的类型，直接写None，会报错
Type annotations needed
with_id方法
函数签名
pub fn with_id<M, I, T, A>(
manager: &M,
id: I,
text: T,
enabled: bool,
accelerator: Option<A>,
) -> crate::Result<Self>就多了个id参数，比如
let hello_item = MenuItem::with_id(app, "hello", "Hello", true,None::<&str>)?;子菜单——SubMenu
Submenu in tauri::menu - Rusthttps://docs.rs/tauri/2.4.0/tauri/menu/struct.Submenu.html这个简单来说，就是放前面的菜单栏，也可以不用子菜单。这里就使用了。
这个也可以使用new方法，也有with_id,或者使用with_items，写法很多种。‘
new方法
ub fn new<M: Manager<R>, S: AsRef<str>>(
manager: &M,
text: S,
enabled: bool,
) -> crate::Result<Self> let first_submenu = Submenu::new(
app, //
"first",
true
)?;
first_submenu.append(&hello_item)?;with_id方法
pub fn with_id<M: Manager<R>, I: Into<MenuId>, S: AsRef<str>>(
manager: &M,
id: I,
text: S,
enabled: bool,
) -> crate::Result<Self> let first_submenu = Submenu::with_id(
app,
"first_submenu",
"First Submenu",
true,
)?.append(
&hello_item,
)?;with_items方法
pub fn with_items<M: Manager<R>, S: AsRef<str>>(
manager: &M,
text: S,
enabled: bool,
items: &[&dyn IsMenuItem<R>],
) -> crate::Result<Self> 这个items的类型 &[&dyn IsMenuItem<R>],
首先&[] ，表示引用切片
dyn是Rust中的关键字，
dyn表示动态分发（dynamic dispatch）的 trait 对象，用于需要存储或操作多种实现同一 trait 的类型
1、在运行时（而非编译时）确定具体类型
2、通过统一接口处理不同的类型
dyn trait对于&[&dyn IsMenuItem<R>],
简单的说，首先，是个切片。其次，包含多个实现了IsMenuItem这个trait 的不同具体类型的引用
更明白的说，里面可以写如下的东西
IsMenuItem in tauri::menu - Rusthttps://docs.rs/tauri/2.4.0/tauri/menu/trait.IsMenuItem.html
因此，代码如下
let first_submenu = Submenu::with_items(
app,
"first_submenu",
true,
&[&hello_item, &world_item],
)?;无论用那种方法，总之，差不多。
菜单——Menu
Menu in tauri::menu - Rusthttps://docs.rs/tauri/2.4.0/tauri/menu/struct.Menu.html
根上面差不了多少，直接给出代码
let menu=Menu::with_id_and_items(
app,
"menu_id",
&[&first_submenu]
)?;使用了with_id_and_items，既要写id，也要加item。
最终menu.rs的代码如下
use tauri::menu::{Menu, MenuItem, Submenu,IconMenuItem};
use tauri::{AppHandle, Wry,Result};
use tauri::image::Image;
pub fn create_menu(app: &AppHandle) ->Result<Menu<Wry>> {
let hello_item = MenuItem::with_id(app, "hello", "Hello", true,None::<&str>)?;
let world_item = MenuItem::with_id(app, "world", "World", true,None::<&str>)?;
let icon_item=IconMenuItem::with_id(
app,
"icon",
"Icon",
true,
Some(Image::from_path("icons/icon.png")?),
None::<&str>,
)?;
let first_submenu = Submenu::with_items(
app,
"first_submenu",
true,
&[&hello_item, &world_item,&icon_item],
)?;
let menu=Menu::with_id_and_items(
app,
"menu_id",
&[&first_submenu]
)?;
Ok(menu)
}main.rs的关键代码
.setup(|app| {
let app_handle = app.handle();
let menu= menu::create_menu(app_handle)?;
app.set_menu(menu)?;
Ok(())
})笔者还使用了IconMenuItem，实际上和前面差不多，只是多了图片。
IconMenuItem in tauri::menu - Rusthttps://docs.rs/tauri/2.4.0/tauri/menu/struct.IconMenuItem.html
cargo run结果如下
看起来文字显示不完全，笔者也没有解决。
间接创建
感觉类似于工厂模式，先要有给工厂，在工厂里面生产菜单，而这个工厂就是MenuBuilder
use tauri::menu::MenuBuilder笔者看官网是这么写的。
还有其他工厂。
因此，直接复制了，
use tauri::menu::{Menu, MenuBuilder,SubmenuBuilder,CheckMenuItemBuilder,IconMenuItemBuilder};
use tauri::{AppHandle, Wry,Result};
use tauri::image::Image;
pub fn create_menu(app: &AppHandle) ->Result<Menu<Wry>> {
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_path("icons/icon.png")
.expect("failed to load icon");
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()?;
Ok(menu)
}
在前端创建菜单
感觉在后端写菜单，不是很好看，在前端试试。
下面这个链接是一位大佬的模板
jbolda/personal-tray-app: Looking to create a Tauri app that runs in the background and is accessible through the system tray or a keyboard? Use this template as a way to jump start creating your app.https://github.com/jbolda/personal-tray-app/以后文章中经常使用这个模板。这个模板封装的可以。
项目的关键结构如下
写了这么久，很少写前端。哈哈哈哈
如下是前端menu的参考
菜单 | Tauri - Tauri 框架https://v2.tauri.org.cn/reference/javascript/api/namespacemenu/setup.ts中代码
import { useEffect, useState } from "react";
import { Menu,MenuOptions} from "@tauri-apps/api/menu";
export function useTauri(menuItems: MenuOptions) {
const [menu, setMenu] = useState<null | Menu>(null);
useEffect(() => {
async function init() {
const initMenu = await Menu.new(menuItems);
await initMenu.setAsWindowMenu()
setMenu(initMenu);
}
init()
.then(() => console.log("初始化菜单成功"))
.catch((error) => console.error("初始化菜单失败:", error));
}, []);
return { menu };
}context.ts
import { Menu } from "@tauri-apps/api/menu";
import { createContext } from "react";
export const SystemMenuContext = createContext<{
menu: null | Menu;
}>({
menu: null,
});App.tsx
import {SystemMenuContext} from './context.ts'
import {useTauri} from "./hook/setup.ts";
import {MenuOptions} from "@tauri-apps/api/menu";
import "./App.css";
function App() {
const menuItems = {
id: "first",
items: [
{
id: "first-item",
text: "First",
},
{
id: "second-item",
text: "Second",
items: [
{
id: "sub-item-1",
text: "Sub Item 1",
},
{
id:'separator',
item:"Separator"
},
{
id: "sub-item-2",
text: "Sub Item 2",
},
{
id: "icon-item",
text: "Icon Item",
icon: "icons/icon.png" ,
}
]
},
// icon menu item
{
id: "icon-item",
text: "Icon Item",
icon: "icons/icon.png" ,
}
]
} as MenuOptions;
return (
<SystemMenuContext.Provider value={useTauri(menuItems)}>
<header className="App-header">
<h1>My Tauri App</h1>
</header>
</SystemMenuContext.Provider>
);
}
export default App;
参数是差不多，都有上面id，text之的类，
感觉差不多，。
总结
简单的在前端和后端创建了menu，差不多，只是创建了，还有其他东西，比如action。后面再说。