View

创建和布局原生视图。

进程：主进程

在发出 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。

警告

Electron 的内置类不能被用户代码继承。更多信息，请参阅常见问题解答。

new View()

创建一个新的 View。

实例事件

使用 new View 创建的对象会发出以下事件

事件：'bounds-changed'

当视图的边界因布局而改变时发出。可以通过 view.getBounds() 获取新的边界。

实例方法

使用 new View 创建的对象具有以下实例方法

view.addChildView(view[, index])

• view View - 要添加的子视图。
• index 整数 (可选) - 插入子视图的索引。默认为将子视图添加到子列表的末尾。

如果将同一个 View 添加到已包含它的父视图中，它将被重新排序，成为最顶层的视图。

view.removeChildView(view)

• view View - 要移除的子视图。

如果作为参数传递的视图不是此视图的子视图，则此方法无效。

view.setBounds(bounds)

• bounds Rectangle - 视图的新边界。

view.getBounds()

返回 Rectangle - 此视图的边界，相对于其父视图。

view.setBackgroundColor(color)

• color 字符串 - 以 Hex、RGB、ARGB、HSL、HSLA 或命名的 CSS 颜色格式表示的颜色。对于 Hex 类型，alpha 通道是可选的。

有效 color 值的示例

• Hex
  • #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 通道的 Hex 格式使用 AARRGGBB 或 ARGB，*不是* RRGGBBAA 或 RGB。

view.setBorderRadius(radius)

• radius 整数 - 边框半径大小（以像素为单位）。

注意

视图边框的切口区域仍然可以捕获点击。

view.setVisible(visible)

• visible 布尔值 - 如果为 false，则视图将隐藏不显示。

view.getVisible()

返回 boolean - 视图是否应该被绘制。请注意，这与视图是否在屏幕上可见不同——它可能仍然被遮挡或不在视图范围内。

实例属性

使用 new View 创建的对象具有以下属性

view.children 只读

一个 View[] 属性，表示此视图的子视图。