iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

30天學習Tauri系列 第 19

19.Tauri System Tray

  • 分享至 

  • xImage
  •  

今天我們簡單的創建system tray

首先,打開todo\src-tauri\tauri.conf.json並加入systemTray在tauri裡

"systemTray": {
      "iconPath": "icons/icon.png",
      "iconAsTemplate": true
    },
{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "todo",
    "version": "0.0.0"
  },
  "tauri": {
    "systemTray": {
      "iconPath": "icons/icon.png",
      "iconAsTemplate": true
    },
	...

接著到todo\src-tauri\src\main.rs

// 引入
use tauri::{CustomMenuItem, SystemTrayMenu, SystemTrayMenuItem};

// Config system tray 上下文menu

// 創建SystemTrayMenu
  let tray_quit = CustomMenuItem::new("quit".to_string(), "Quit");
  let tray_hide = CustomMenuItem::new("hide".to_string(), "Hide");
  let tray_menu = SystemTrayMenu::new()
    .add_item(tray_quit)
    .add_item(tray_hide);
  let system_tray = SystemTray::new()
    .with_menu(tray_menu);

設定app system tray
https://ithelp.ithome.com.tw/upload/images/20221004/20108931hh2PluTxOz.png

接著,我們來進行測試能看到已經創建好system tray了
https://ithelp.ithome.com.tw/upload/images/20221004/201089318kYF9qm8X2.png
https://ithelp.ithome.com.tw/upload/images/20221004/20108931BkrpNlAY8N.png

監聽 system tray events

引入SystemTrayEvent
use tauri::{SystemTray, SystemTrayMenu, SystemTrayEvent};

現在我們來監聽system tray events,我們加入

    .system_tray(system_tray)
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a left click");
      }
      SystemTrayEvent::RightClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a right click");
      }
      SystemTrayEvent::DoubleClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a double click");
      }
      SystemTrayEvent::MenuItemClick { id, .. } => {
        match id.as_str() {
          "quit" => {
            std::process::exit(0);
          }
          "hide" => {
            let window = app.get_window("main").unwrap();
            window.hide().unwrap();
          }
          _ => {}
        }
      }
      _ => {}
    })

我們試著對tauri的system tray做連點、右鍵、左鍵點擊
https://ithelp.ithome.com.tw/upload/images/20221004/20108931TgwIp10jOr.png
能看到他監聽到了我們的print事件

todo\src-tauri\src\main.rs

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

use std::sync::Mutex;
use tauri::{CustomMenuItem, Menu, MenuItem, Submenu, Manager};
use tauri::{SystemTray, SystemTrayMenu, SystemTrayEvent};

mod todo;
use todo::{Todo, TodoApp};

struct AppState {
  app: Mutex<TodoApp>,
}

fn main() {
  let app = TodoApp::new().unwrap();
  // here `"quit".to_string()` defines the menu item id, and the second parameter is the menu item label.
  let quit = CustomMenuItem::new("quit".to_string(), "Quit");
  let close = CustomMenuItem::new("close".to_string(), "Close");
  let submenu = Submenu::new("Custom", Menu::new().add_item(quit).add_item(close));
  let menu = Menu::new()
    .add_native_item(MenuItem::Copy)
    .add_item(CustomMenuItem::new("hide", "Hide"))
    .add_submenu(submenu);
  
  let tray_quit = CustomMenuItem::new("quit".to_string(), "Quit");
  let tray_hide = CustomMenuItem::new("hide".to_string(), "Hide");
  let tray_menu = SystemTrayMenu::new()
    .add_item(tray_quit)
    .add_item(tray_hide);
  let system_tray = SystemTray::new()
    .with_menu(tray_menu);

  tauri::Builder::default()
    .setup(|app| {
      let splashscreen_window = app.get_window("splashscreen").unwrap();
      let main_window = app.get_window("main").unwrap();
      // we perform the initialization code on a new task so the app doesn't freeze
      tauri::async_runtime::spawn(async move {
        // initialize your app here instead of sleeping :)
        println!("Initializing...");
        std::thread::sleep(std::time::Duration::from_secs(5));
        println!("Done initializing.");

        // After it's done, close the splashscreen and display the main window
        splashscreen_window.close().unwrap();
        main_window.show().unwrap();
      });
      Ok(())
    })
    .system_tray(system_tray)
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a left click");
      }
      SystemTrayEvent::RightClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a right click");
      }
      SystemTrayEvent::DoubleClick {
        position: _,
        size: _,
        ..
      } => {
        println!("system tray received a double click");
      }
      SystemTrayEvent::MenuItemClick { id, .. } => {
        match id.as_str() {
          "quit" => {
            std::process::exit(0);
          }
          "hide" => {
            let window = app.get_window("main").unwrap();
            window.hide().unwrap();
          }
          _ => {}
        }
      }
      _ => {}
    })
    .menu(menu)
    .on_menu_event(|event| match event.menu_item_id() {
      "quit" => {
        // Custom
        std::process::exit(0);
      }
      "close" => {
        // Custom
        event.window().close().unwrap();
      }
      "hide" => {
        println!("Hide Click");
      }
      _ => {}
    })
    .invoke_handler(tauri::generate_handler![
      get_todos, new_todo, done_todo, delete_todo
    ])
    .manage(AppState {
        app: Mutex::from(app),
    })
    .run(tauri::generate_context!())
    .expect("failed to run app");
}

...

今天簡單的介紹了Tauri的System Tray,我們明天見


上一篇
18.Tauri notification
下一篇
20.Tauri Event
系列文
30天學習Tauri30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言