Skip to content

创建对话框

在 Electron 中,创建对话框主要使用 dialog 模块。dialog 是一个用于显示系统对话框的模块,比如打开文件、保存文件或显示警告等。这个模块必须在 BrowserWindow 创建后才能使用。

以下是一个简单的示例,展示如何使用 dialog 模块来创建一个打开文件的对话框:

javascript
const { app, BrowserWindow, dialog } = require('electron')

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载 index.html 到窗口
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

// 打开文件对话框
app.on('ready', () => {
  dialog.showOpenDialog({
    properties: ['openFile']
  }).then(result => {
    console.log(result.canceled)
    console.log(result.filePaths)
  }).catch(err => {
    console.log(err)
  })
})

在这个例子中,我们首先引入了 app, BrowserWindow, 和 dialog 模块。然后定义了一个 createWindow 函数用来创建一个新的 BrowserWindow。当 Electron 应用准备就绪时,我们调用了 showOpenDialog 方法来显示一个打开文件的对话框。

showOpenDialog 方法接受一个选项对象作为参数,可以配置对话框的属性,如是否选择文件夹、是否多选等。在这个例子中,我们只允许用户选择单个文件。

对话框显示后,会返回一个 Promise,Promise 的结果是一个包含 canceledfilePaths 属性的对象。如果用户取消了对话框,canceled 将为 true;否则,filePaths 将包含用户选择的文件路径。

你还可以使用 showSaveDialog 来创建一个保存文件的对话框,或者使用 showMessageBox 来显示一个消息框。每个方法都有其特定的参数和返回值,具体可以参考 Electron 的官方文档。