触控板

类: 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
// 类似老虎机的滚轴标签
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()
// 旋转结果标签
const result = new TouchBarLabel()
// 旋转按钮
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)
})

运行以上示例

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

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

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