TouchBar
Electron 的内置类不能在用户代码中被子类化。欲了解更多信息,请参阅常见问题。
类:TouchBar
为 macOS 原生应用程序创建触控栏布局
进程:主进程
new TouchBar(options)
使用指定的项目创建一个新的触控栏。使用 BrowserWindow.setTouchBar
将 TouchBar
添加到窗口中。
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)
})
运行上述示例
要运行上述示例,您需要(假设您已在要运行示例的目录中打开终端)
- 将上述文件保存到您的计算机,文件名为
touchbar.js
- 通过
npm install electron
安装 Electron - 在 Electron 内部运行示例:
./node_modules/.bin/electron touchbar.js
然后您应该会看到一个新的 Electron 窗口,并且应用程序在您的触控栏(或触控栏模拟器)中运行。