跳至主要內容

檢視

建立和配置原生檢視。

程序：主程序

此模組在 app 模組的 ready 事件發出之前無法使用。

const { BaseWindow, View } = require('electron')
const win = new BaseWindow()
const view = new View()

view.setBackgroundColor('red')
view.setBounds({ x: 0, y: 0, width: 100, height: 100 })
win.contentView.addChildView(view)

類別：View​

基本原生檢視。

程序：主程序

View 是一個 EventEmitter。

new View()​

建立新的 View。

實例事件​

使用 new View 建立的物件會發出以下事件

事件：'bounds-changed'​

當檢視的邊界因配置而變更時發出。可以使用 view.getBounds() 檢索新的邊界。

實例方法​

使用 new View 建立的物件具有以下實例方法

view.addChildView(view[, index])​

  • view View - 要新增的子檢視。
  • index 整數（可選）- 要插入子檢視的索引。預設將子檢視新增至子清單的末尾。

如果將相同的檢視新增到已包含該檢視的父項，則會重新排序，使其成為最頂端的檢視。

view.removeChildView(view)​

  • view View - 要移除的子檢視。

如果作為參數傳遞的檢視不是此檢視的子檢視，則此方法為無操作。

view.setBounds(bounds)​

  • bounds 矩形 - 檢視的新邊界。

view.getBounds()​

返回 矩形 - 此檢視相對於其父項的邊界。

view.setBackgroundColor(color)​

  • color 字串 - 十六進位、RGB、ARGB、HSL、HSLA 或具名 CSS 色彩格式的色彩。十六進位類型可選用 Alpha 通道。

有效的 color 值範例

  • 十六進位
    • #fff (RGB)
    • #ffff (ARGB)
    • #ffffff (RRGGBB)
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如：rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如：rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如：hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如：hsla(200, 20%, 50%, 0.5)
  • 色彩名稱
    • 選項列於 SkParseColor.cpp
    • 與 CSS Color Module Level 3 關鍵字類似，但區分大小寫。
      • 例如：blueviolet 或 red

注意： 帶有 Alpha 通道的十六進位格式採用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

view.setBorderRadius(radius)​

  • radius 整數 - 邊框半徑大小（以像素為單位）。

注意：檢視邊框的挖空區域仍會捕獲點擊。

view.setVisible(visible)​

  • visible 布林值 - 如果為 false，則檢視將不會顯示。

實例屬性​

使用 new View 建立的物件具有以下屬性

view.children 唯讀​

代表此檢視子檢視的 View[] 屬性。