Skip to main content

进度条

🌐 Progress Bars

概述​

🌐 Overview

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

🌐 A progress bar enables a window to provide progress information to the user without the need of switching to the window itself.

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

🌐 On Windows, you can use a taskbar button to display a progress bar.

Windows Progress Bar

在 macOS 上，进度条将显示为扩展坞图标的一部分。

🌐 On macOS, the progress bar will be displayed as a part of the dock icon.

macOS Progress Bar

在 Linux 上，Unity 图形界面也有一个类似的功能，允许你在启动器中指定进度条。

🌐 On Linux, the Unity graphical interface also has a similar feature that allows you to specify the progress bar in the launcher.

Linux Progress Bar

注意：在 Windows 上，每个窗口可以有自己的进度条，而在 macOS 和 Linux（Unity）上，应用只能有一个进度条。

所有三种情况都可以通过相同的 API 处理——在 BrowserWindow 实例上可用的 setProgressBar() 方法。要表示你的进度，请使用介于 0 和 1 之间的数字调用此方法。例如，如果你有一个长期运行的任务，目前已完成 63%，则可以这样调用它：setProgressBar(0.63)。

🌐 All three cases are covered by the same API - the setProgressBar() method available on an instance of BrowserWindow. To indicate your progress, call this method with a number between 0 and 1. For example, if you have a long-running task that is currently at 63% towards completion, you would call it as setProgressBar(0.63).

将参数设置为负值（例如 -1）将移除进度条。将其设置为大于 1 的值将在 Windows 中显示不确定进度条，或在其他操作系统中限制为 100%。不确定进度条会保持活动状态，但不会显示实际百分比，通常用于无法确定操作完成时间的情况。

🌐 Setting the parameter to negative values (e.g. -1) will remove the progress bar. Setting it to a value greater than 1 will indicate an indeterminate progress bar in Windows or clamp to 100% in other operating systems. An indeterminate progress bar remains active but does not show an actual percentage, and is used for situations when you do not know how long an operation will take to complete.

看 有关更多选项和模式的 API 文档。

🌐 See the API documentation for more options and modes.

示例​

🌐 Example

在这个例子中，我们向主窗口添加了一个进度条，该进度条会随着时间使用 Node.js 定时器而增加。

🌐 In this example, we add a progress bar to the main window that increments over time using Node.js timers.

docs/fiddles/features/progress-bar (40.6.0)Open in Fiddle
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、Unity）应显示一个进度条，该进度条从零开始，逐步达到 100% 完成。然后，它应短暂显示不确定状态（Windows）或固定在 100%（其他操作系统），然后循环。

🌐 After launching the Electron application, the dock (macOS) or taskbar (Windows, Unity) should show a progress bar that starts at zero and progresses through 100% to completion. It should then show indeterminate (Windows) or pin to 100% (other operating systems) briefly and then loop.

macOS dock progress bar

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

🌐 For macOS, the progress bar will also be indicated for your application when using Mission Control:

Mission Control Progress Bar