类 TouchBar
类: TouchBar
为原生macOS应用创建TouchBar布局
Process: Main
Class: TouchBar
Create TouchBar layouts for native macOS applications
Process: Main
new TouchBar(options) 实验功能
参数对象items(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)[]escapeItem(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer | null) (可选的)
Creates a new touch bar with the specified items. Use BrowserWindow.setTouchBar to add the TouchBar to a window.
注意: TouchBar API目前为实验性质，以后的Electron版本可能会更改或删除。
提示：如果您没有带Touch Bar的MacBook，则可以使用 Touch Bar Simulator 来测试应用中的Touch Bar使用情况。
new TouchBar(options) Experimental
optionsObjectitems(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)[]escapeItem(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer | null) (optional)
Creates a new touch bar with the specified items. Use BrowserWindow.setTouchBar to add the TouchBar to a window.
Note: The TouchBar API is currently experimental and may change or be removed in future Electron releases.
Tip: If you don't have a MacBook with Touch Bar, you can use Touch Bar Simulator to test Touch Bar usage in your app.
实例属性
在TouchBar的实例中有以下属性可用：
Instance Properties
The following properties are available on instances of TouchBar:
touchBar.escapeItem
TouchBarItem设置的内容将替换掉Touch bar中的“esc”按钮 将该项设为null以使用默认的"esc"按钮 修改这个值将立即更新Touch bar中的返回按钮
touchBar.escapeItem
A TouchBarItem that will replace the "esc" button on the touch bar when set. Setting to null restores the default "esc" button. Changing this value immediately updates the escape item in the touch bar.
示例
下面是一个带有一个按钮和若干文本的简易Touch bar老虎机游戏示例
const { app, BrowserWindow, TouchBar } = require('electron')
const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
let spinning = false
// Reel labels
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()
// Spin result label
const result = new TouchBarLabel()
// 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.once('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})Examples
Below is an example of a simple slot machine touch bar game with a button and some labels.
const { app, BrowserWindow, TouchBar } = require('electron')
const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
let spinning = false
// Reel labels
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()
// Spin result label
const result = new TouchBarLabel()
// 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.once('ready', () => {
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
接下来这个应用会在你的Touch bar (或者Touch bar模拟器) 上运行，你将能看到一个Electron窗口
Running the above example
To run the example above, you'll need to (assuming you've got a terminal open in the directory you want to run the example):
- Save the above file to your computer as
touchbar.js - Install Electron via
npm install electron - Run the example inside Electron:
./node_modules/.bin/electron touchbar.js
You should then see a new Electron window and the app running in your touch bar (or touch bar emulator).