Electron 对话框

什么是对话框？

在 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 方法打开文件选择器：

// www.javascriptcn.com code example
dialog.showOpenDialog({
  properties: ['openFile'],
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
  ]
}).then(result => {
  console.log(result.canceled)
  console.log(result.filePaths)
}).catch(err => {
  console.log(err)
})

上述代码会打开一个只允许选择图片文件的文件选择器。

打开多文件选择器

如果你想让用户可以选择多个文件，可以在 properties 数组中添加 openMultipleFiles：

// www.javascriptcn.com code example
dialog.showOpenDialog({
  properties: ['openFile', 'openDirectory', 'multiSelections'],
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] }
  ]
}).then(result => {
  console.log(result.canceled)
  console.log(result.filePaths)
}).catch(err => {
  console.log(err)
})

这里不仅限于选择多个文件，还允许同时选择文件夹。

保存文件选择器

使用 showSaveDialog 方法来创建一个保存文件的选择器：

// www.javascriptcn.com code example
dialog.showSaveDialog({
  title: '保存文件',
  defaultPath: '/Users/username/Downloads/',
  filters: [
    { name: 'Text Files', extensions: ['txt'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}).then(result => {
  if (!result.canceled) {
    console.log(result.filePath)
  }
}).catch(err => {
  console.log(err)
})

该方法允许用户选择一个文件名和路径来保存文件，并且可以根据需要限制文件类型。

自定义对话框

虽然 Electron 的对话框模块提供了一些预定义类型的对话框，但有时候你可能需要更灵活的方式来定制你的对话框。你可以通过创建自定义 HTML 和 CSS 来实现这一点，然后使用 BrowserWindow 打开一个新的窗口作为对话框。这种方式允许你完全控制对话框的外观和行为。

示例：创建自定义对话框

首先，创建一个 HTML 文件，例如 custom-dialog.html：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义对话框</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      width: 300px;
      height: 150px;
      background-color: white;
    }
    .dialog-title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .dialog-content {
      font-size: 14px;
      margin-bottom: 20px;
    }
    .dialog-buttons {
      display: flex;
      justify-content: space-between;
    }
    .dialog-button {
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="dialog-title">提示</div>
  <div class="dialog-content">这是自定义对话框的内容。</div>
  <div class="dialog-buttons">
    <div class="dialog-button" id="cancel">取消</div>
    <div class="dialog-button" id="confirm">确定</div>
  </div>
  <script>
    document.getElementById('cancel').addEventListener('click', () => {
      window.close()
    })
    document.getElementById('confirm').addEventListener('click', () => {
      window.webContents.send('dialog:confirm')
      window.close()
    })
  </script>
</body>
</html>

接下来，在主进程中加载这个 HTML 文件：

// www.javascriptcn.com code example
const { app, BrowserWindow, dialog } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  mainWindow.loadURL(`file://${__dirname}/index.html`)
}

app.whenReady().then(createWindow)

// 自定义对话框
app.on('ready', () => {
  const customDialog = new BrowserWindow({
    width: 300,
    height: 150,
    modal: true,
    parent: null,
    resizable: false,
    show: false
  })

  customDialog.loadFile('./custom-dialog.html')

  customDialog.webContents.on('did-finish-load', () => {
    customDialog.show()
  })

  customDialog.webContents.on('dialog:confirm', () => {
    dialog.showMessageBox({ type: 'info', message: '您点击了确定！' })
  })
})

这样就创建了一个自定义的对话框，其中包含一个标题、内容区域以及两个按钮：取消和确认。点击这些按钮会触发相应的事件处理程序。

小结

本章介绍了如何在 Electron 应用程序中使用对话框模块来创建不同类型的消息框，以及如何根据需求创建自定义对话框。掌握这些知识后，你就可以有效地利用对话框来增强应用的用户体验。