跳转至

TouchBar

[!WARNING] Electron 的内置类不能在用户代码中被子类化。 更多信息，请参阅 FAQ。

类：TouchBar

为原生 macOS 应用创建 TouchBar 布局

进程：主进程

new TouchBar(options)

使用指定项创建一个新的触控栏。使用 BrowserWindow.setTouchBar 将 TouchBar 添加到窗口。

[!NOTE] TouchBar API 目前是实验性的，在未来的 Electron 版本中可能会发生变化或被移除。

静态属性

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，设置后将会替换触控栏上的“esc”按钮。设置为 null 可恢复默认的“esc”按钮。更改此值会立即更新触控栏中的 escape item。

示例

以下是一个简单的老虎机触控栏游戏示例，包含一个按钮和一些标签。

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 窗口，并且应用正在你的触控栏（或触控栏模拟器）中运行。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron