跳转到主要内容

TouchBar

警告

Electron 的内置类不能在用户代码中被继承。有关更多信息，请参阅 FAQ。

类: TouchBar​

为原生 macOS 应用程序创建 Touch Bar 布局

进程: 主进程

new TouchBar(options)​

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

注意

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

提示

如果您没有配备 Touch Bar 的 MacBook，可以使用 Touch Bar Simulator 在您的应用程序中测试 Touch Bar 的使用。

静态属性​

TouchBarButton​

指向 TouchBarButton 类的 typeof TouchBarButton 引用。

TouchBarColorPicker​

指向 TouchBarColorPicker 类的 typeof TouchBarColorPicker 引用。

TouchBarGroup​

指向 TouchBarGroup 类的 typeof TouchBarGroup 引用。

TouchBarLabel​

指向 TouchBarLabel 类的 typeof TouchBarLabel 引用。

TouchBarPopover​

指向 TouchBarPopover 类的 typeof TouchBarPopover 引用。

TouchBarScrubber​

指向 TouchBarScrubber 类的 typeof TouchBarScrubber 引用。

TouchBarSegmentedControl​

指向 TouchBarSegmentedControl 类的 typeof TouchBarSegmentedControl 引用。

TouchBarSlider​

指向 TouchBarSlider 类的 typeof TouchBarSlider 引用。

TouchBarSpacer​

指向 TouchBarSpacer 类的 typeof TouchBarSpacer 引用。

TouchBarOtherItemsProxy​

指向 TouchBarOtherItemsProxy 类的 typeof 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 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)
})

运行上面的示例​

要运行上面的示例，您需要（假设您已在要运行示例的目录中打开终端）

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

您应该会看到一个新的 Electron 窗口以及在您的 Touch Bar（或 Touch Bar 模拟器）中运行的应用程序。