跳至主要內容

TouchBar

類別：TouchBar​

為原生 macOS 應用程式建立 TouchBar 版面配置

程序：主程序

new TouchBar(options)​

使用指定的項目建立新的觸控列。使用 BrowserWindow.setTouchBar 將 TouchBar 新增至視窗。

注意： TouchBar API 目前為實驗性功能，在未來的 Electron 版本中可能會變更或移除。

提示： 如果您沒有配備 Touch Bar 的 MacBook，可以使用 Touch Bar 模擬器來測試應用程式中的 Touch Bar 用法。

靜態屬性​

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​

當設定時，將取代觸控列上「esc」按鈕的 TouchBarItem。設定為 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)
})

執行以上範例​

若要執行以上範例，您需要 (假設您已在想要執行範例的目錄中開啟終端機)

  1. 將以上檔案以 touchbar.js 的名稱儲存至您的電腦
  2. 透過 npm install electron 安裝 Electron
  3. 在 Electron 中執行範例：./node_modules/.bin/electron touchbar.js

然後您應該會看到一個新的 Electron 視窗和您的應用程式在觸控列 (或觸控列模擬器) 中執行。