TouchBar
类：TouchBar
为原生 macOS 应用创建 TouchBar 布局
进程：主进程
new TouchBar(options)
使用指定的项目创建新的 TouchBar。使用 BrowserWindow.setTouchBar 将此 TouchBar 添加到窗口。
注意：TouchBar API 目前处于实验阶段，未来 Electron 版本可能会更改或移除。
提示：如果你没有带 Touch Bar 的 MacBook，可以使用 Touch Bar Simulator 在你的应用中测试 Touch Bar 的使用情况。
静态属性
TouchBarButton
指向 TouchBarButton 类的 [`typeof TouchBarButton`](/docs/latest/api/touch-bar-button) 引用。
TouchBarColorPicker
指向 TouchBarColorPicker 类的 [`typeof TouchBarColorPicker`](/docs/latest/api/touch-bar-color-picker) 引用。
TouchBarGroup
指向 TouchBarGroup 类的 [`typeof TouchBarGroup`](/docs/latest/api/touch-bar-group) 引用。
TouchBarLabel
指向 TouchBarLabel 类的 [`typeof TouchBarLabel`](/docs/latest/api/touch-bar-label) 引用。
TouchBarPopover
指向 TouchBarPopover 类的 [`typeof TouchBarPopover`](/docs/latest/api/touch-bar-popover) 引用。
TouchBarScrubber
指向 TouchBarScrubber 类的 [`typeof TouchBarScrubber`](/docs/latest/api/touch-bar-scrubber) 引用。
TouchBarSegmentedControl
指向 TouchBarSegmentedControl 类的 [`typeof TouchBarSegmentedControl`](/docs/latest/api/touch-bar-segmented-control) 引用。
TouchBarSlider
指向 TouchBarSlider 类的 [`typeof TouchBarSlider`](/docs/latest/api/touch-bar-slider) 引用。
TouchBarSpacer
指向 TouchBarSpacer 类的 [`typeof TouchBarSpacer`](/docs/latest/api/touch-bar-spacer) 引用。
TouchBarOtherItemsProxy
指向 TouchBarOtherItemsProxy 类的 [`typeof TouchBarOtherItemsProxy`](/docs/latest/api/touch-bar-other-items-proxy) 引用。
实例属性
以下属性可用于 TouchBar 的实例
touchBar.escapeItem
当设置时，将替换触控栏上“esc”按钮的 TouchBarItem。设置为 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)
})
运行上述示例
要运行上述示例，你需要（假设你已经在想要运行示例的目录中打开了终端）
- 将上述文件保存到你的电脑上，命名为
touchbar.js - 通过
npm install electron安装 Electron - 在 Electron 中运行示例：
./node_modules/.bin/electron touchbar.js
然后，你应该会看到一个新的 Electron 窗口，以及在你的触控栏（或触控栏模拟器）中运行的应用。