Skip to main content

TouchBar

warning

Electron 内置的类不能在用户代码中被继承。 欲了解更多信息，请参见 常见问题。

类：TouchBar​

🌐 Class: TouchBar

为原生 macOS 应用创建 TouchBar 布局

进程：主进程

🌐 Process: Main

new TouchBar(options)​

创建一个包含指定项目的新触控栏。使用 BrowserWindow.setTouchBar 将 TouchBar 添加到窗口中。

🌐 Creates a new touch bar with the specified items. Use BrowserWindow.setTouchBar to add the TouchBar to a window.

note

TouchBar API 目前处于实验阶段，未来的 Electron 版本中可能会发生变化或被移除。

tip

如果你没有带触控栏的 MacBook，你可以使用 触控栏模拟器 在你的应用中测试触控栏的使用。

静态属性​

🌐 Static Properties

TouchBarButton​

对 TouchBarButton 类的 typeof TouchBarButton 引用。

🌐 A typeof TouchBarButton reference to the TouchBarButton class.

TouchBarColorPicker​

对 TouchBarColorPicker 类的 typeof TouchBarColorPicker 引用。

🌐 A typeof TouchBarColorPicker reference to the TouchBarColorPicker class.

TouchBarGroup​

对 TouchBarGroup 类的 typeof TouchBarGroup 引用。

🌐 A typeof TouchBarGroup reference to the TouchBarGroup class.

TouchBarLabel​

对 TouchBarLabel 类的 typeof TouchBarLabel 引用。

🌐 A typeof TouchBarLabel reference to the TouchBarLabel class.

TouchBarPopover​

对 TouchBarPopover 类的 typeof TouchBarPopover 引用。

🌐 A typeof TouchBarPopover reference to the TouchBarPopover class.

TouchBarScrubber​

对 TouchBarScrubber 类的 typeof TouchBarScrubber 引用。

🌐 A typeof TouchBarScrubber reference to the TouchBarScrubber class.

TouchBarSegmentedControl​

对 TouchBarSegmentedControl 类的 typeof TouchBarSegmentedControl 引用。

🌐 A typeof TouchBarSegmentedControl reference to the TouchBarSegmentedControl class.

TouchBarSlider​

对 TouchBarSlider 类的 typeof TouchBarSlider 引用。

🌐 A typeof TouchBarSlider reference to the TouchBarSlider class.

TouchBarSpacer​

对 TouchBarSpacer 类的 typeof TouchBarSpacer 引用。

🌐 A typeof TouchBarSpacer reference to the TouchBarSpacer class.

TouchBarOtherItemsProxy​

对 TouchBarOtherItemsProxy 类的 typeof TouchBarOtherItemsProxy 引用。

🌐 A typeof TouchBarOtherItemsProxy reference to the TouchBarOtherItemsProxy class.

实例属性​

🌐 Instance Properties

TouchBar 实例上可用的属性如下：

🌐 The following properties are available on instances of TouchBar:

touchBar.escapeItem​

设置为 TouchBarItem 后，将会替换触控栏上的“esc”按钮。设置为 null 则恢复默认的“esc”按钮。更改此值会立即更新触控栏上的逃逸按钮。

🌐 A TouchBarItem that will replace the "esc" button on the touch bar when set. Setting to null restores the default "esc" button. Changing this value immediately updates the escape item in the touch bar.

示例​

🌐 Examples

以下是一个带有按钮和一些标签的简易老虎机触控栏游戏示例。

🌐 Below is an example of a simple slot machine touch bar game with a button and some labels.

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

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// Reel labels
const reel1 = new TouchBarLabel({ label: '' })
const reel2 = new TouchBarLabel({ label: '' })
const reel3 = new TouchBarLabel({ label: '' })

// Spin result label
const result = new TouchBarLabel({ label: '' })

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return
    }

    spinning = true
    result.label = ''

    let timeout = 10
    const spinLength = 4 * 1000 // 4 seconds
    const startTime = Date.now()

    const spinReels = () => {
      updateReels()

      if ((Date.now() - startTime) >= spinLength) {
        finishSpin()
      } else {
        // Slow down a bit on each spin
        timeout *= 1.1
        setTimeout(spinReels, timeout)
      }
    }

    spinReels()
  }
})

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
  return values[Math.floor(Math.random() * values.length)]
}

const updateReels = () => {
  reel1.label = getRandomValue()
  reel2.label = getRandomValue()
  reel3.label = getRandomValue()
}

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
  if (uniqueValues === 1) {
    // All 3 values are the same
    result.label = '💰 Jackpot!'
    result.textColor = '#FDFF00'
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!'
    result.textColor = '#FDFF00'
  } else {
    // No values are the same
    result.label = '🙁 Spin Again'
    result.textColor = null
  }
  spinning = false
}

const touchBar = new TouchBar({
  items: [
    spin,
    new TouchBarSpacer({ size: 'large' }),
    reel1,
    new TouchBarSpacer({ size: 'small' }),
    reel2,
    new TouchBarSpacer({ size: 'small' }),
    reel3,
    new TouchBarSpacer({ size: 'large' }),
    result
  ]
})

let window

app.whenReady().then(() => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hiddenInset',
    width: 200,
    height: 200,
    backgroundColor: '#000'
  })
  window.loadURL('about:blank')
  window.setTouchBar(touchBar)
})

运行上面的例子​

🌐 Running the above example

要运行上面的示例，你需要（假设你在要运行示例的目录中打开了一个终端）：

🌐 To run the example above, you'll need to (assuming you've got a terminal open in the directory you want to run the example):

  1. 将上述文件保存到你的计算机中，命名为 touchbar.js
  2. 通过 npm install electron 安装 Electron
  3. 在 Electron 中运行示例：./node_modules/.bin/electron touchbar.js

然后，你应该会看到一个新的 Electron 窗口以及在触摸栏（或触摸栏模拟器）中运行的应用。

🌐 You should then see a new Electron window and the app running in your touch bar (or touch bar emulator).