进度条¶

概述¶

进度条使窗口能够向用户提供进度信息，而无需切换到该窗口本身。

在 Windows 上，你可以使用任务栏按钮来显示进度条。

在 macOS 上，进度条将作为 Dock 图标的一部分显示。

注意：在 Windows 上，每个窗口都可以拥有自己的进度条，而在 macOS 上 应用程序只能有一个进度条。在 Linux 上，不支持进度条。

这三种情况都由同一个 API 覆盖——BrowserWindow 实例上可用的 setProgressBar() 方法。要指示你的进度，请调用此方法并传入 0 到 1 之间的数字。例如，如果你有一个长时间运行的任务，当前已完成 63%， 你可以调用 setProgressBar(0.63)。

将参数设置为负值（例如 -1）会移除进度条。将其设置为大于 1 的值 会在 Windows 上指示一个不确定进度条，或在其他操作系统上限制为 100%。不确定进度条 保持活动状态，但不显示实际百分比，用于你不知道操作需要多长时间才能完成的情况。

有关更多选项和模式，请参阅 API 文档。

示例¶

在这个示例中，我们为主窗口添加一个进度条，并使用 Node.js 定时器随时间递增。

```fiddle docs/fiddles/features/progress-bar const { app, BrowserWindow } = require('electron/main')

let progressInterval

function createWindow () { const win = new BrowserWindow({ width: 800, height: 600 })

win.loadFile('index.html')

const INCREMENT = 0.03 const INTERVAL_DELAY = 100 // ms

let c = 0 progressInterval = setInterval(() => { // update progress bar to next value // values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100% win.setProgressBar(c)

// increment or reset progress bar
if (c < 2) {
  c += INCREMENT
} else {
  c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
}

}, INTERVAL_DELAY) }

app.whenReady().then(createWindow)

// before the app is terminated, clear both timers app.on('before-quit', () => { clearInterval(progressInterval) })

app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } })

app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ```

启动 Electron 应用程序后，Dock（macOS）或任务栏（Windows） 应显示一个进度条，它从零开始并推进到 100% 完成。 然后它应短暂显示不确定状态（Windows）或固定在 100%（其他操作系统）， 然后循环。

对于 macOS，当使用 Mission Control 时， 你的应用程序也会显示进度条：