触控板
- 类: TouchBar
- 示例
  - 运行以上示例

触控板

类: TouchBar

为原生macOS应用创建TouchBar布局

进程：主进程

`new TouchBar(options)`

选项 对象
- items (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)[] (可选)
- escapeItem (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer | null) (可选)

使用指定项的创建新的 touch bar。使用 BrowserWindow.setTouchBar 将 TouchBar 添加到新窗口。

注意: TouchBar API目前为实验性质，可能会更改或删除。

提示： 如果您没有带 Touch Bar 的 MacBook，您可以使用 Touch Bar 模拟器来测试。

静态属性

`TouchBarButton`

一个 typeof TouchBarButton 引用自 TouchBarButton 类。

`TouchBarColorPicker`

一个 typeof TouchBarColorPicker 引用自 TouchBarColorPicker 类。

`TouchBarGroup`

一个 typeof TouchBarGroup 引用自 TouchBarGroup 类。

`TouchBarLabel`

一个 typeof TouchBarLabel 引用自 TouchBarLabel 类。

`TouchBarPopover`

一个 typeof TouchBarPopover 引用自 TouchBarPopover 类。

`TouchBarScrubber`

一个 typeof TouchBarScrubber 引用自 TouchBarScrubber 类。

`TouchBarSegmentedControl`

一个 typeof TouchBarSegmentedControl 引用自 TouchBarSegmentedControl 类。

`TouchBarSlider`

一个 typeof TouchBarSlider 引用自 TouchBarSlider 类。

`TouchBarSpacer`

一个 typeof TouchBarSpacer 引用自 TouchBarSpacer 类。

`TouchBarOtherItemsProxy`

一个 typeof TouchBarOtherItemsProxy 引用自 TouchBarOtherItemsProxy 类。

实例属性

在TouchBar的实例中有以下属性可用：

`touchBar.escapeItem`

TouchBarItem设置的内容将替换掉Touch bar中的“esc”按钮将该项设为null以使用默认的”esc”按钮修改这个值将立即更新Touch bar中的返回按钮

示例

下面是一个带有一个按钮和若干文本的简易Touch bar老虎机游戏示例

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个值相同
    result.label = '😍 Winner!'
    result.textColor = '#FDFF00'
  } else {
    // 没有值相同
    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)
})

运行以上示例

要运行上面的示例，您需要 (假设您已经在将要运行该示例的目录中打开了一个终端)：

将上述文件保存到您的电脑上，并命名为 touchbar.js
通过 npm install electron 来安装 Electron
在 Electron 中运行示例：./node_modules/.bin/electron touchbar.js

接下来这个应用会在你的Touch bar (或者Touch bar模拟器) 上运行，你将能看到一个Electron窗口