对话框
本机系统对话框,用于打开和保存文件,以及消息对话框。
设置
从安装对话框插件开始。
使用项目的包管理器来添加依赖:
npm run tauri add dialog
yarn run tauri add dialog
pnpm tauri add dialog
bun tauri add dialog
cargo tauri add dialog
-
运行
cargo add tauri-plugin-dialog
命令,将插件添加到项目的cargo .toml
依赖中。 -
修改
lib.rs
来初始化插件。
#[cfg_attr(mobile, tauri::mobile_entry_point)]pub fn run() { tauri::Builder::default() // Initialize the plugin .plugin(tauri_plugin_dialog::init()) .run(tauri::generate_context!()) .expect("error while running tauri application");}
- 如果你想在 JavaScript 中创建对话框,还需要安装 npm 包:
npm install @tauri-apps/plugin-dialog
yarn add @tauri-apps/plugin-dialog
pnpm add @tauri-apps/plugin-dialog
bun add @tauri-apps/plugin-dialog
用法
对话框插件可以在 JavaScript 和 Rust 中使用。你可以这样使用它:
在 JavaScript:
在 Rust:
JavaScript
可以在 JavaScript API 参考中查看所有 Dialog 选项。
创建 Yes/No 对话框
显示一个带有 “Yes” 和 “No” 按钮的提问对话框。
import { ask } from '@tauri-apps/plugin-dialog';
// 创建 Yes/No 对话框const answer = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning',});
console.log(answer);// Prints boolean to the console
创建 Ok/Cancel 对话框
显示一个带有 “Ok” 和 “Cancel” 按钮的提问对话框。
import { confirm } from '@tauri-apps/plugin-dialog';
// Creates a confirmation Ok/Cancel dialogconst confirmation = await confirm( 'This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning' });
console.log(confirmation);// Prints boolean to the console
创建 Message 对话框
一个带有 “Ok” 按钮的消息对话框。请注意,如果用户关闭对话框,它将返回 false
。
import { message } from '@tauri-apps/plugin-dialog';
// Shows messageawait message('File not found', { title: 'Tauri', kind: 'error' });
打开一个文件选择对话框
打开一个文件/目录选择对话框。
multiple
选项控制对话框是否允许多重选择,而 directory
则控制对话框是否允许目录选择。
import { open } from '@tauri-apps/plugin-dialog';
// Open a dialogconst file = await open({ multiple: false, directory: false,});console.log(file);// Prints file path and name to the console
保存到文件对话框
打开一个文件/目录保存对话框。
import { save } from '@tauri-apps/plugin-dialog';// Prompt to save a 'My Filter' with extension .png or .jpegconst path = await save({ filters: [ { name: 'My Filter', extensions: ['png', 'jpeg'], }, ],});console.log(path);// Prints the chosen path
Rust
请参阅 Rust API 参考以查看所有可用选项。
建立一个询问对话框
显示一个带有 “Absolutely” 和 “Totally” 按钮的问题对话框。
use tauri_plugin_dialog::DialogExt;
let answer = app.dialog() .message("Tauri is Awesome") .title("Tauri is Awesome") .ok_button_label("Absolutely") .cancel_button_label("Totally") .blocking_show();
如果你需要一个非阻塞操作,你可以使用 show()
:
use tauri_plugin_dialog::DialogExt;
app.dialog() .message("Tauri is Awesome") .title("Tauri is Awesome") .ok_button_label("Absolutely") .cancel_button_label("Totally") .show(|result| match result { true => // do something, false =>// do something, });
建立消息对话框
一个带有 “Ok” 按钮的消息对话框。请注意,如果用户关闭对话框,它将返回 false
。
use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
let ans = app.dialog() .message("File not found") .kind(MessageDialogKind::Error) .title("Warning") .blocking_show();
如果你需要一个非阻塞操作,你可以使用 show()
:
use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
app.dialog() .message("Tauri is Awesome") .kind(MessageDialogKind::Info) .title("Information") .ok_button_label("Absolutely") .show(|result| match result { true => // do something, false => // do something, });
建立一个文件选择器对话框
选择文件
use tauri_plugin_dialog::DialogExt;
let file_path = app.dialog().file().blocking_pick_file();// return a file_path `Option`, or `None` if the user closes the dialog
如果你需要一个非阻塞操作,你可以使用 show()
:
use tauri_plugin_dialog::DialogExt;
app.dialog().file().pick_file(|file_path| { // return a file_path `Option`, or `None` if the user closes the dialog })
保存文件
use tauri_plugin_dialog::DialogExt;
let file_path = app .dialog() .file() .add_filter("My Filter", &["png", "jpeg"]) .blocking_save_file(); // do something with the optional file path here // the file path is `None` if the user closed the dialog
或者:
use tauri_plugin_dialog::DialogExt;
app.dialog() .file() .add_filter("My Filter", &["png", "jpeg"]) .pick_file(|file_path| { // return a file_path `Option`, or `None` if the user closes the dialog });
© 2024 Tauri Contributors. CC-BY / MIT