在桌面應用程式開發中，與使用者進行互動是不可或缺的功能。無論是顯示重要訊息、請求確認操作、還是讓使用者選擇檔案，都需要適當的對話框機制。Tauri 提供了一套完整的原生對話框 API，讓我們能夠呼叫作業系統內建的對話框，為使用者提供熟悉且一致的互動體驗。

原生對話框的優勢

使用系統原生對話框有許多優勢。首先，它們與作業系統的視覺風格完全一致，使用者無需適應新的介面設計。其次，原生對話框通常具有更好的可存取性支援，包括鍵盤導航和螢幕閱讀器相容性。最重要的是，這些對話框是由作業系統直接管理的，因此在效能和記憶體使用方面都比自製的 HTML 對話框更優秀。

對於檔案操作相關的對話框，原生解決方案還提供了與系統檔案管理器的深度整合，包括書籤、最近使用的位置、雲端儲存整合等功能，這些都是自製對話框難以實現的。

訊息對話框 Message Dialog

Tauri 的 Dialog 模組提供了多種對話框類型，在前端 (JS) 和後端 (Rust) 都可以使用。其中，最基本的是訊息對話框，用於向使用者顯示重要資訊：

import { message } from '@tauri-apps/plugin-dialog';

async function greet() {
  await message(`Hello, ${greetName.value}!`, { title: 'Greeting', kind: 'info' });
}

也可以在 Rust 觸發：

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

let ans = app.dialog()
  .message("File not found")
  .kind(MessageDialogKind::Error)
  .title("Warning")
  .blocking_show();

也可以自己設定選項：

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

let answer = app.dialog()
  .message("周末要約吃飯嗎?")
  .title("揪吃飯啊！")
  .buttons(MessageDialogButtons::OkCancelCustom("走啊".to_string(), "下次一定".to_string()))
  .blocking_show();

Android 介面

Android 的話會長這樣：

就... 簡化了不少...

檔案選擇對話框

檔案相關的對話框是桌面應用中最常用的功能之一。Tauri 提供了開啟檔案和儲存檔案兩種對話框：

開啟檔案

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();

儲存檔案

use tauri_plugin_dialog::DialogExt;

let file_path = app
  .dialog()
  .file()
  .add_filter("My Filter", &["png", "jpeg"])
  .blocking_save_file();

最佳實踐與使用指南

在使用對話框時，需要注意幾個重要原則。首先，對話框的標題和訊息應該清楚明確，讓使用者能夠快速理解當前的情況和可能的選擇。其次，對於可能造成資料遺失的操作，應該使用 confirm 對話框來再次確認。

檔案過濾器的設定也很重要，它不僅能幫助使用者快速找到相關檔案，還能防止選擇不支援的檔案格式。適當的預設路徑設定能讓使用者的操作更加便捷。

透過這些原生對話框，我們為 Tauri 應用程式提供了專業且使用者友善的互動介面，大大提升了整體的使用者體驗。

小結

透過本文我們學習了 Tauri Dialog 插件的核心功能，包括訊息對話框、檔案選擇和儲存對話框的使用。這些原生對話框不僅提供了跨平台的一致體驗，也讓我們能在 JavaScript 和 Rust 中靈活調用。掌握這些基礎對話框功能，將為我們的 Tauri 應用程式帶來更專業的使用者互動體驗。