Skip to main content

TouchBar

Class: TouchBar​

Create TouchBar layouts for native macOS applications为本机macOS应用程序创建TouchBar布局

Process:进程：Main

new TouchBar(options)​

Creates a new touch bar with the specified items. 使用指定的项目创建一个新的触摸条。Use BrowserWindow.setTouchBar to add the TouchBar to a window.使用BrowserWindow.setTouchBar将TouchBar添加到窗口中。

Note: The TouchBar API is currently experimental and may change or be removed in future Electron releases.TouchBar API目前处于实验阶段，可能会在未来的Electron版本中更改或删除。

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.如果您没有带触摸条的MacBook，您可以使用触摸条模拟器测试应用程序中的触摸条使用情况。

Static Properties静态属性​

TouchBarButton​

A typeof TouchBarButton reference to the TouchBarButton class.对TouchBarButton类的typeof TouchBarButton引用。

TouchBarColorPicker​

A typeof TouchBarColorPicker reference to the TouchBarColorPicker class.对TouchBarColorPicker类的typeof TouchBarColorPicker引用。

TouchBarGroup​

A typeof TouchBarGroup reference to the TouchBarGroup class.对TouchBarGroup类的typeof TouchBarGroup引用。

TouchBarLabel​

A typeof TouchBarLabel reference to the TouchBarLabel class.对TouchBarLabel类的typeof TouchBarLabel引用。

TouchBarPopover​

A typeof TouchBarPopover reference to the TouchBarPopover class.对TouchBarPopover类的typeof TouchBarPopover引用。

TouchBarScrubber​

A typeof TouchBarScrubber reference to the TouchBarScrubber class.对TouchBarScrubber类的typeof TouchBarScrubber引用。

TouchBarSegmentedControl​

A typeof TouchBarSegmentedControl reference to the TouchBarSegmentedControl class.对TouchBarSegmentedControl类的typeof TouchBarSegmentedControl引用。

TouchBarSlider​

A typeof TouchBarSlider reference to the TouchBarSlider class.对TouchBarSlider类的typeof TouchBarSlider引用。

TouchBarSpacer​

A typeof TouchBarSpacer reference to the TouchBarSpacer class.对TouchBarSpacer类的typeof TouchBarSpacer引用。

TouchBarOtherItemsProxy​

A typeof TouchBarOtherItemsProxy reference to the TouchBarOtherItemsProxy class.对TouchBarOtherItemsProxy类的typeof TouchBarOtherItemsProxy引用。

Instance Properties实例属性​

The following properties are available on instances of TouchBar:TouchBar实例上提供了以下属性：

touchBar.escapeItem​

A TouchBarItem that will replace the "esc" button on the touch bar when set. 一个TouchBarItem，设置后将取代触摸条上的“esc”按钮。Setting to null restores the default "esc" button. 设置为null将恢复默认的“esc”按钮。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()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()

// Spin result label
const result = new TouchBarLabel()

// 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. Save the above file to your computer as 将上述文件另存为touchbar.js
  2. Install Electron via npm install electron通过npm install electron安装Electron
  3. Run the example inside Electron: 在Electron内部运行示例：./node_modules/.bin/electron touchbar.js

You should then see a new Electron window and the app running in your touch bar (or touch bar emulator).然后，您应该会看到一个新的Electron窗口和在触摸条（或触摸条模拟器）中运行的应用程序。