触控板

类: TouchBar

为原生macOS应用创建TouchBar布局

进程:主进程

new TouchBar(options)

使用指定项的创建新的 touch bar。 使用 BrowserWindow.setTouchBarTouchBar 添加到新窗口。

注意: TouchBar API目前为实验性质,可能会更改或删除。

提示: 如果您没有带 Touch Bar 的 MacBook,您 可以使用 Touch Bar 模拟器 来测试 。

静态属性

TouchBarButton

一个 typeof TouchBarButton 引用自 TouchBarButton 类。

TouchBarColorPicker

一个 typeof TouchBarColorPicker 引用自 TouchBarColorPicker 类。

TouchBarGroup

一个 typeof TouchBarGroup 引用自 TouchBarGroup 类。

TouchBarLabel

一个 typeof TouchBarLabel 引用自 TouchBarLabel 类。

TouchBarPopover

一个 typeof TouchBarPopover 引用自 TouchBarPopover 类。

TouchBarScrubber

一个 typeof TouchBarScrubber 引用自 TouchBarScrubber 类。

TouchBarSegmentedControl

一个 typeof TouchBarSegmentedControl 引用自 TouchBarSegmentedControl 类。

TouchBarSlider

一个 typeof TouchBarSlider 引用自 TouchBarSlider 类。

TouchBarSpacer

一个 typeof TouchBarSpacer 引用自 TouchBarSpacer 类。

TouchBarOtherItemsProxy

一个 typeof TouchBarOtherItemsProxy 引用自 TouchBarOtherItemsProxy 类。

实例属性

TouchBar的实例中有以下属性可用:

touchBar.escapeItem

TouchBarItem设置的内容将替换掉Touch bar中的“esc”按钮 将该项设为null以使用默认的”esc”按钮 修改这个值将立即更新Touch bar中的返回按钮

示例

下面是一个带有一个按钮和若干文本的简易Touch bar老虎机游戏示例

  1. const { app, BrowserWindow, TouchBar } = require('electron')
  2. const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
  3. let spinning = false
  4. // Reel labels
  5. const reel1 = new TouchBarLabel({ label: '' })
  6. const reel2 = new TouchBarLabel({ label: '' })
  7. const reel3 = new TouchBarLabel({ label: '' })
  8. // Spin result label
  9. const result = new TouchBarLabel({ label: '' })
  10. // Spin button
  11. const spin = new TouchBarButton({
  12. label: '🎰 Spin',
  13. backgroundColor: '#7851A9',
  14. click: () => {
  15. // Ignore clicks if already spinning
  16. if (spinning) {
  17. return
  18. }
  19. spinning = true
  20. result.label = ''
  21. let timeout = 10
  22. const spinLength = 4 * 1000 // 4 seconds
  23. const startTime = Date.now()
  24. const spinReels = () => {
  25. updateReels()
  26. if ((Date.now() - startTime) >= spinLength) {
  27. finishSpin()
  28. } else {
  29. // Slow down a bit on each spin
  30. timeout *= 1.1
  31. setTimeout(spinReels, timeout)
  32. }
  33. }
  34. spinReels()
  35. }
  36. })
  37. const getRandomValue = () => {
  38. const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
  39. return values[Math.floor(Math.random() * values.length)]
  40. }
  41. const updateReels = () => {
  42. reel1.label = getRandomValue()
  43. reel2.label = getRandomValue()
  44. reel3.label = getRandomValue()
  45. }
  46. const finishSpin = () => {
  47. const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
  48. if (uniqueValues === 1) {
  49. // All 3 values are the same
  50. result.label = '💰 Jackpot!'
  51. result.textColor = '#FDFF00'
  52. } else if (uniqueValues === 2) {
  53. // 2个值相同
  54. result.label = '😍 Winner!'
  55. result.textColor = '#FDFF00'
  56. } else {
  57. // 没有值相同
  58. result.label = '🙁 Spin Again'
  59. result.textColor = null
  60. }
  61. spinning = false
  62. }
  63. const touchBar = new TouchBar({
  64. items: [
  65. spin,
  66. new TouchBarSpacer({ size: 'large' }),
  67. reel1,
  68. new TouchBarSpacer({ size: 'small' }),
  69. reel2,
  70. new TouchBarSpacer({ size: 'small' }),
  71. reel3,
  72. new TouchBarSpacer({ size: 'large' }),
  73. result
  74. ]
  75. })
  76. let window
  77. app.whenReady().then(() => {
  78. window = new BrowserWindow({
  79. frame: false,
  80. titleBarStyle: 'hiddenInset',
  81. width: 200,
  82. height: 200,
  83. backgroundColor: '#000'
  84. })
  85. window.loadURL('about:blank')
  86. window.setTouchBar(touchBar)
  87. })

运行以上示例

要运行上面的示例,您需要 (假设您已经在将要运行该示例的目录中打开了一个终端):

  1. 将上述文件保存到您的电脑上,并命名为 touchbar.js
  2. 通过 npm install electron 来安装 Electron
  3. 在 Electron 中运行示例:./node_modules/.bin/electron touchbar.js

接下来这个应用会在你的Touch bar (或者Touch bar模拟器) 上运行,你将能看到一个Electron窗口