跳到主要内容

TouchBar

警告

Electron 的内置类不能在用户代码中被子类化。欲了解更多信息,请参阅常见问题

类:TouchBar

为 macOS 原生应用程序创建触控栏布局

进程:主进程

new TouchBar(options)

使用指定的项目创建一个新的触控栏。使用 BrowserWindow.setTouchBarTouchBar 添加到窗口中。

注意

TouchBar API 目前处于实验阶段,未来 Electron 版本中可能会更改或移除。

提示

如果您没有带触控栏的 MacBook,可以使用 触控栏模拟器 来测试应用程序中的触控栏使用情况。

静态属性

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 项。

示例

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

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 窗口,并且应用程序在您的触控栏(或触控栏模拟器)中运行。