System Tray y Menus

Por: Artiko
taurisystem-traymenubandejacontexto

System Tray y Menus

System Tray

La bandeja del sistema permite que tu app permanezca accesible sin ocupar espacio en la barra de tareas.

Configuracion basica

use tauri::{
    menu::{Menu, MenuItem},
    tray::TrayIconBuilder,
    Manager,
};

pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let show = MenuItem::with_id(app, "show", "Mostrar", true, None::<&str>)?;
            let quit = MenuItem::with_id(app, "quit", "Salir", true, None::<&str>)?;
            let menu = Menu::with_items(app, &[&show, &quit])?;

            TrayIconBuilder::new()
                .menu(&menu)
                .on_menu_event(|app, event| match event.id.as_ref() {
                    "show" => {
                        if let Some(window) = app.get_webview_window("main") {
                            window.show().unwrap();
                            window.set_focus().unwrap();
                        }
                    }
                    "quit" => app.exit(0),
                    _ => {}
                })
                .build(app)?;
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error");
}

Icono del tray

Coloca un icono en src-tauri/icons/ y referencialo:

TrayIconBuilder::new()
    .icon(app.default_window_icon().unwrap().clone())
    .menu(&menu)
    .build(app)?;

Minimizar a tray en lugar de cerrar

use tauri::Manager;

pub fn run() {
    tauri::Builder::default()
        .on_window_event(|window, event| {
            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
                window.hide().unwrap();
                api.prevent_close();
            }
        })
        .run(tauri::generate_context!())
        .expect("error");
}
use tauri::menu::{Menu, MenuBuilder, Submenu, SubmenuBuilder, MenuItem, PredefinedMenuItem};

pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let file_menu = SubmenuBuilder::new(app, "Archivo")
                .item(&MenuItem::with_id(app, "new", "Nuevo", true, Some("CmdOrCtrl+N"))?)
                .item(&MenuItem::with_id(app, "open", "Abrir", true, Some("CmdOrCtrl+O"))?)
                .separator()
                .item(&MenuItem::with_id(app, "save", "Guardar", true, Some("CmdOrCtrl+S"))?)
                .separator()
                .quit()
                .build()?;

            let edit_menu = SubmenuBuilder::new(app, "Editar")
                .undo()
                .redo()
                .separator()
                .cut()
                .copy()
                .paste()
                .build()?;

            let menu = MenuBuilder::new(app)
                .item(&file_menu)
                .item(&edit_menu)
                .build()?;

            app.set_menu(menu)?;

            app.on_menu_event(|app, event| match event.id.as_ref() {
                "new" => println!("Nuevo archivo"),
                "open" => println!("Abrir archivo"),
                "save" => println!("Guardar archivo"),
                _ => {}
            });

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error");
}

Atajos de teclado

El formato Some("CmdOrCtrl+N") usa:

ModificadorDescripcion
CmdOrCtrlCmd en macOS, Ctrl en Windows/Linux
ShiftTecla Shift
AltAlt/Option
SuperTecla Windows/Command

Items predefinidos

Tauri incluye items de menu estandar del SO:

PredefinedMenuItem::about(app, "Acerca de", None)?;
PredefinedMenuItem::quit(app, Some("Salir"))?;
PredefinedMenuItem::copy(app, None)?;
PredefinedMenuItem::paste(app, None)?;

Cada ventana puede tener su propio menu:

let window = app.get_webview_window("main").unwrap();
window.set_menu(menu)?;

window.on_menu_event(|window, event| {
    println!("Menu event en {}: {}", window.label(), event.id.as_ref());
});

Resumen


← Personalizacion de Ventanas | Indice | Siguiente: Distribucion →