Electron中能否设置showMessageBox默认焦点按钮？如何配置退出确认对话框？

当然可以给showMessageBox设置默认焦点按钮，而且完全能实现你要的退出确认框效果——按钮按Yes(Y)、No(N)排列，同时默认焦点落在No按钮上，不用调换按钮位置。下面给你详细拆解实现方法：

核心原理：利用defaultId指定默认焦点 #

Electron的dialog.showMessageBox（同步/异步版本）都支持通过defaultId选项来指定默认获得焦点的按钮，这个值对应你buttons数组里的索引（从0开始计数）。同时配合cancelId可以设置用户按ESC键时触发的按钮，让交互逻辑更符合预期。

退出确认框的具体实现 #

要实现按钮顺序为Yes(Y)在前、No(N)在后，且默认焦点在No按钮的效果，只需要按以下步骤配置参数：

• 按钮顺序：通过buttons数组直接按你想要的顺序定义：['Yes(Y)', 'No(N)']
• 默认焦点：把defaultId设为1（因为No是数组的第二个元素，索引为1）
• ESC键行为：设置cancelId: 1，这样用户按ESC时会触发No按钮的逻辑，避免误退出
• 快捷键适配：开启normalizeAccessKeys: true，让括号里的Y、N自动成为Alt快捷键（比如Alt+Y触发Yes，Alt+N触发No）

同步版本代码示例（主进程中） #

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

// 监听应用退出前的事件，拦截默认退出行为
app.on('before-quit', (event) => {
  event.preventDefault();

  const userChoice = dialog.showMessageBoxSync({
    type: 'question',
    message: '确定要退出应用吗？',
    detail: '未保存的内容将会丢失',
    buttons: ['Yes(Y)', 'No(N)'],
    defaultId: 1, // 默认聚焦No按钮
    cancelId: 1, // ESC键触发No按钮
    normalizeAccessKeys: true
  });

  // 根据用户选择决定是否退出
  if (userChoice === 0) {
    app.quit();
  }
});

异步版本代码示例 #

如果你的逻辑是异步的，可以用showMessageBox返回的Promise：

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

app.on('before-quit', async (event) => {
  event.preventDefault();

  const { response } = await dialog.showMessageBox({
    type: 'question',
    message: '确定要退出应用吗？',
    detail: '未保存的内容将会丢失',
    buttons: ['Yes(Y)', 'No(N)'],
    defaultId: 1,
    cancelId: 1,
    normalizeAccessKeys: true
  });

  if (response === 0) {
    app.quit();
  }
});

注意事项 #

• 这个方案适用于Electron v10及以上的稳定版本，API参数都是官方支持的，不用担心兼容性问题
• 如果是在渲染进程中调用，需要通过ipcRenderer和主进程通信，因为dialog模块只能在主进程中直接使用

内容的提问来源于stack exchange，提问作者michinari nukazawa