electron - 如何制作一个对话框以在打开时阻止 BrowserWindow？

Question

我调用 dialog.showOpenDialog() 来查找文件夹的路径。但问题是这不会阻塞 mainWindow。当标准路径选择 GUI 出现时，程序必须在路径选择完成后才能继续工作。谷歌搜索并意识到您需要使用 remote。但是什么也没发生。

我明白了:

Cannot destructure property dialog of 'undefined' or 'null'. if from electron.remote take dialog.

我尝试了很多不同的东西(这些并不是所有的尝试，只是我记得的):

const { dialog } = require ('electron').remote;

var remote = electron.remote;

var dialog = remote.dialog;

const dialog = require ('electron').remote.dialog;

我尝试了很多连接，但是。

我的 main.js:

const url = require('url');
const path = require('path');

const {dialog} = electron.remote;

const {app, BrowserWindow, Menu} = electron;

app.on('ready', function () {
    const {start_width, start_height} = electron.screen.getPrimaryDisplay().workAreaSize;
    mainWindow = new BrowserWindow({
        minWidth: 1250,
        minHeight: 800,
        height: start_height,
        width: start_width,
        center: true,
        show: false,
    });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'templates/mainWindow.html'),
        protocol: 'file:',
        slashes: true
    }));

    mainWindow.on('closed', function () {
        app.quit();
    });
    // mainWindow.webContents.openDevTools();
    const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
    Menu.setApplicationMenu(mainMenu);
    mainWindow.maximize();
    mainWindow.show();
});

function createAddWindow() {
    addWindow = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add item'
    });

    addWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'templates/addWindow.html'),
        protocol: 'file:',
        slashes: true
    }));
    addWindow.on('close', function () {
        addWindow = null;
    })
}

const mainMenuTemplate = [
    {
        label: 'Analysis',
        submenu: [{
            label: 'Global search',
            accelerator: 'Ctrl+O',
            click() {
                var path = createAddWindow();
                console.log(path);
            }

        },
            {
                label: 'Search for a year',
                accelerator: 'Ctrl+Alt+O',
                click() {
                    console.log(folderSelect());//i need console.log (like the whole program) to continue to work after folderSelect returns some value.
                }
            },
            {
                label: 'Quit',
                accelerator: process.platform == 'darwin' ? 'Command+Q' : 'Ctrl+Q',
                click() {
                    app.quit();
                }
            },
        ]
    }
];

function folderSelect() {
    dialog.showOpenDialog({properties: ['openDirectory']}, function (path) {
        console.log(path[0]);
        if (path === undefined) {
            return 'error';
        }
        else{
            return path[0];
        }
    });
}

我需要 console.log(就像整个程序一样)在 folderSelect 返回一些值后继续工作。

例如，如果我调用了folderSelect函数，则在选择窗口关闭后的文件夹之前，您无法与程序进行交互。

我在 SO 上看到了很多类似的问题，但无论我做什么都没有用。

Answer 1

为了阻止主窗口，您需要将 BrowserWindow 对象作为第一个可选参数传递给 dialog.showOpenDialog 方法，即您想要的参数将对话框附加到(mainWindow 在你的情况下我猜)。

引自 the docs :

dialog.showOpenDialog([browserWindow, ]options)

The browserWindow argument allows the dialog to attach itself to a parent window, making it modal.

现在，你如何实现它是完全不同的事情。它可以通过多种方式完成，但如果您希望从 renderer 进程调用对话框，最简单的方法是这样的:

import { remote } from 'electron'

remote.dialog.showOpenDialog(
  remote.getCurrentWindow(), // <- notice this one
  { properties: ['openDirectory'] }
).then(result => {
  // prefer promised API
})

关键部分要让整个事情正常工作，是在 BrowserWindow 选项中启用 nodeIntegration，这取决于您使用的 Electron 版本，您可能有也可能没有(他们已经在 version 4 中将默认值从 true 切换为 false )。无论如何，最好从现在开始明确设置它。这就是您现在通常启动 mainwindow 的方式:

mainWindow = new BrowserWindow({
  // ...
  show: false,
  webPreferences: {
    nodeIntegration: true // <- this one
  }
});