类: TouchBar

为原生macOS应用创建TouchBar布局

Process: Main

new TouchBar(options) 实验功能

注意: TouchBar API目前为实验性质,以后的Electron版本可能会更改或删除。

提示:如果您没有带Touch Bar的MacBook,则可以使用 Touch Bar Simulator 来测试应用中的Touch Bar使用情况。

实例属性

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()
  6. const reel2 = new TouchBarLabel()
  7. const reel3 = new TouchBarLabel()
  8. // Spin result label
  9. const result = new TouchBarLabel()
  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 values are the same
  54. result.label = '? Winner!'
  55. result.textColor = '#FDFF00'
  56. } else {
  57. // No values are the same
  58. result.label = '? Spin Again'
  59. result.textColor = null
  60. }
  61. spinning = false
  62. }
  63. const touchBar = new TouchBar([
  64. spin,
  65. new TouchBarSpacer({ size: 'large' }),
  66. reel1,
  67. new TouchBarSpacer({ size: 'small' }),
  68. reel2,
  69. new TouchBarSpacer({ size: 'small' }),
  70. reel3,
  71. new TouchBarSpacer({ size: 'large' }),
  72. result
  73. ])
  74. let window
  75. app.once('ready', () => {
  76. window = new BrowserWindow({
  77. frame: false,
  78. titleBarStyle: 'hiddenInset',
  79. width: 200,
  80. height: 200,
  81. backgroundColor: '#000'
  82. })
  83. window.loadURL('about:blank')
  84. window.setTouchBar(touchBar)
  85. })

运行以上示例

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

  • 将上述文件保存到您的电脑上,并命名为 touchbar.js
  • 通过 npm install electron 来安装 Electron
  • 在 Electron 中运行示例:./node_modules/.bin/electron touchbar.js
    接下来这个应用会在你的Touch bar (或者Touch bar模拟器) 上运行,你将能看到一个Electron窗口