什么是对话框？
在 Electron 中，对话框是一种用于与用户交互的界面元素。它们通常用于提示用户输入信息、确认操作或者显示警告和错误消息。对话框可以是模态的也可以是非模态的，模态对话框会阻止用户与应用程序的其他部分进行交互，直到对话框被关闭。
创建基本对话框
在 Electron 中，创建对话框主要通过 dialog 模块来实现。首先需要引入这个模块：
const { dialog } = require('electron')显示信息对话框
你可以使用 showMessageBox 方法来显示一个信息对话框。例如：
dialog.showMessageBox({
type: 'info',
title: '信息',
message: '这是一条信息提示',
buttons: ['确定']
})这段代码会在窗口中显示一个带有“确定”按钮的信息对话框。
显示警告对话框
如果想要显示警告对话框，可以将类型改为 'warning'，例如：
dialog.showMessageBox({
type: 'warning',
title: '警告',
message: '这是一条警告提示',
buttons: ['确定', '取消']
})这样就会显示一个带有两个按钮的警告对话框。
显示错误对话框
对于错误对话框，类型应设为 'error'：
dialog.showMessageBox({
type: 'error',
title: '错误',
message: '这是一条错误提示',
buttons: ['确定']
})这将显示一个带有一个“确定”按钮的错误对话框。
文件和目录选择器
除了简单的消息对话框外，Electron 还提供了文件和目录选择器，用于让用户从系统中选择文件或目录。
打开文件选择器
使用 showOpenDialog 方法打开文件选择器：
-- -------------------- ---- -------
-----------------------
----------- -------------
-------- -
- ----- --------- ----------- ------- ------ ------ -
-
-------------- -- -
----------------------------
-----------------------------
------------ -- -
----------------
--上述代码会打开一个只允许选择图片文件的文件选择器。
打开多文件选择器
如果你想让用户可以选择多个文件，可以在 properties 数组中添加 openMultipleFiles：
-- -------------------- ---- -------
-----------------------
----------- ------------ ---------------- -------------------
-------- -
- ----- --------- ----------- ------- ------ ------ --
- ----- --------- ----------- ------- ------ ------ -
-
-------------- -- -
----------------------------
-----------------------------
------------ -- -
----------------
--这里不仅限于选择多个文件，还允许同时选择文件夹。
保存文件选择器
使用 showSaveDialog 方法来创建一个保存文件的选择器：
-- -------------------- ---- -------
-----------------------
------ -------
------------ -----------------------------
-------- -
- ----- ----- ------- ----------- ------- --
- ----- ---- ------- ----------- ----- -
-
-------------- -- -
-- ------------------ -
----------------------------
-
------------ -- -
----------------
--该方法允许用户选择一个文件名和路径来保存文件，并且可以根据需要限制文件类型。
自定义对话框
虽然 Electron 的对话框模块提供了一些预定义类型的对话框，但有时候你可能需要更灵活的方式来定制你的对话框。你可以通过创建自定义 HTML 和 CSS 来实现这一点，然后使用 BrowserWindow 打开一个新的窗口作为对话框。这种方式允许你完全控制对话框的外观和行为。
示例：创建自定义对话框
首先，创建一个 HTML 文件，例如 custom-dialog.html：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
-------
---- -
------------ ------ -----------
-------- -----
------ ------
------- ------
----------------- ------
-
------------- -
---------- -----
-------------- -----
-
--------------- -
---------- -----
-------------- -----
-
--------------- -
-------- -----
---------------- --------------
-
-------------- -
-------- --- -----
------- --------
-
--------
-------
------
---- -----------------------------
---- -----------------------------------------
---- -----------------------
---- --------------------- --------------------
---- --------------------- ---------------------
------
--------
----------------------------------------------------------- -- -- -
--------------
--
------------------------------------------------------------ -- -- -
-----------------------------------------
--------------
--
---------
-------
-------接下来，在主进程中加载这个 HTML 文件：
-- -------------------- ---- -------
----- - ---- -------------- ------ - - -------------------
-------- ------------ -- -
----- ---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- -----
----------------- -----
-
--
----------------------------------------------------
-
----------------------------------
-- ------
--------------- -- -- -
----- ------------ - --- ---------------
------ ----
------- ----
------ -----
------- -----
---------- ------
----- -----
--
---------------------------------------------
---------------------------------------------- -- -- -
-------------------
--
--------------------------------------------- -- -- -
----------------------- ----- ------- -------- --------- --
--
--这样就创建了一个自定义的对话框，其中包含一个标题、内容区域以及两个按钮：取消和确认。点击这些按钮会触发相应的事件处理程序。
小结
本章介绍了如何在 Electron 应用程序中使用对话框模块来创建不同类型的消息框，以及如何根据需求创建自定义对话框。掌握这些知识后，你就可以有效地利用对话框来增强应用的用户体验。