Skip to main content

TouchBar

[!警告] Electron 的内置类无法在用户代码中进行子类化。更多信息，请参阅 常见问题解答。

¥[!WARNING] Electron's built-in classes cannot be subclassed in user code. For more information, see the FAQ.

类：TouchBar​

¥Class: TouchBar

为原生 macOS 应用创建 TouchBar 布局

¥Create TouchBar layouts for native macOS applications

进程：主进程

¥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 版本中更改或删除。

¥[!NOTE] The TouchBar API is currently experimental and may change or be removed in future Electron releases.

[!TIP] 如果你没有配备 Touch Bar 的 MacBook，你可以使用 触摸栏模拟器 在你的应用中测试 Touch Bar 的使用情况。

¥[!TIP] If you don't have a MacBook with Touch Bar, you can use Touch Bar Simulator to test Touch Bar usage in your app.

静态属性​

¥Static Properties

TouchBarButton​

typeof TouchBarButton 对 TouchBarButton 类的引用。

¥A typeof TouchBarButton reference to the TouchBarButton class.

TouchBarColorPicker​

typeof TouchBarColorPicker 对 TouchBarColorPicker 类的引用。

¥A typeof TouchBarColorPicker reference to the TouchBarColorPicker class.

TouchBarGroup​

typeof TouchBarGroup 对 TouchBarGroup 类的引用。

¥A typeof TouchBarGroup reference to the TouchBarGroup class.

TouchBarLabel​

typeof TouchBarLabel 对 TouchBarLabel 类的引用。

¥A typeof TouchBarLabel reference to the TouchBarLabel class.

TouchBarPopover​

typeof TouchBarPopover 对 TouchBarPopover 类的引用。

¥A typeof TouchBarPopover reference to the TouchBarPopover class.

TouchBarScrubber​

typeof TouchBarScrubber 对 TouchBarScrubber 类的引用。

¥A typeof TouchBarScrubber reference to the TouchBarScrubber class.

TouchBarSegmentedControl​

typeof TouchBarSegmentedControl 对 TouchBarSegmentedControl 类的引用。

¥A typeof TouchBarSegmentedControl reference to the TouchBarSegmentedControl class.

TouchBarSlider​

typeof TouchBarSlider 对 TouchBarSlider 类的引用。

¥A typeof TouchBarSlider reference to the TouchBarSlider class.

TouchBarSpacer​

typeof TouchBarSpacer 对 TouchBarSpacer 类的引用。

¥A typeof TouchBarSpacer reference to the TouchBarSpacer class.

TouchBarOtherItemsProxy​

typeof TouchBarOtherItemsProxy 对 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

    ¥Save the above file to your computer as touchbar.js

  2. 通过 npm install electron 安装 Electron

    ¥Install Electron via npm install electron

  3. 在 Electron 中运行示例：./node_modules/.bin/electron touchbar.js

    ¥Run the example inside 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).