TouchBar
Electron 的内置类不能被用户代码继承。更多信息,请参阅常见问题解答。
类:TouchBar
为原生 macOS 应用程序创建 Touch Bar 布局
进程:主进程
new TouchBar(options)
创建一个具有指定项的新触摸栏。使用 BrowserWindow.setTouchBar
将 TouchBar
添加到窗口。
TouchBar API 目前仍处于实验阶段,在未来的 Electron 版本中可能会发生更改或被移除。
如果您没有带有 Touch Bar 的 MacBook,可以使用 Touch Bar Simulator 来测试应用程序的 Touch Bar 用法。
静态属性
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
,设置为该值后将替换 Touch Bar 上的“esc”按钮。设置为 null
可恢复默认的“esc”按钮。更改此值会立即更新 Touch Bar 中的 escape 项。
示例
下面是一个简单的老虎机 Touch Bar 游戏示例,包含一个按钮和一些标签。
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 窗口,并且应用程序将在您的 Touch Bar(或 Touch Bar 模拟器)中运行。