首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

触摸板 | TouchBar

为本地macOS应用程序创建TouchBar布局

过程:主

new TouchBar(options) Experimental

  • options 目的
    • items (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)[]
    • escapeItem (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)(可选)

用指定的项目创建一个新的触摸栏。使用BrowserWindow.setTouchBar添加TouchBar到一个窗口。

注意: TouchBar API目前是实验性的,可能会在未来的Electron版本中更改或删除。

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

实例属性

以下属性可用于以下实例TouchBar

touchBar.escapeItem

TouchBarButton设置时,将取代触摸条上的“ESC”按键。设置null恢复默认的“esc”按钮。更改此值立即更新触摸栏中的转义项目。

例子

下面是一个简单的老虎机触摸条游戏的例子,带有一个按钮和一些标签。

代码语言:javascript
复制
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([
  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)
})

运行上面的例子

为了运行上面的例子,你需要(假设你已经在想要运行该例子的dirtectory中打开一个终端):

  1. 将上述文件保存为 touchbar.js
  2. 安装电子通孔 npm install electron
  3. 在Electron中运行示例: ./node_modules/.bin/electron touchbar.js

然后,您应该看到一个新的Electron窗口,并在您的触摸栏(或触摸栏模拟器)中运行该应用程序。

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com