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。

[!WARNING] Electron 的内置类不能在用户代码中被子类化。更多信息请参阅 FAQ。

new View()¶

创建一个新的 View。

实例事件¶

通过 new View 创建的对象会触发以下事件：

事件：'bounds-changed'¶

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

实例方法¶

通过 new View 创建的对象具有以下实例方法：

view.addChildView(view[, index])¶

• view View - 要添加的子视图。
• index Integer（可选）- 插入子视图的索引。默认将子视图添加到子列表的末尾。

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

view.removeChildView(view)¶

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

如果传入的视图不是此视图的子视图，则此方法不执行任何操作。

view.setBounds(bounds[, options])¶

• bounds Rectangle - 此视图的新边界。
• options Object（可选）- 设置边界的选项。
• animate boolean | Object（可选）- 如果为 true，边界更改将带动画。如果传入对象，则该对象可以包含以下属性：
  • duration Integer（可选）- 动画持续时间（以毫秒为单位）。默认值为 250。
  • easing string（可选）- 动画的缓动函数。默认值为 linear。
  • linear
  • ease-in
  • ease-out
  • ease-in-out

view.getBounds()¶

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

view.setBackgroundColor(color)¶

• color string - 颜色，格式为 Hex、RGB、ARGB、HSL、HSLA 或 CSS 命名颜色格式。alpha 通道对于 hex 类型是可选的。

有效的 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

[!NOTE] 带 alpha 的 Hex 格式使用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

view.setBorderRadius(radius)¶

• radius Integer - 边框圆角半径大小（以像素为单位）。

[!NOTE] 视图边框被裁切掉的区域仍会捕获点击。

view.setBackgroundBlur(blurRadius)¶

• blurRadius Integer - 背景模糊效果的半径（以像素为单位）。

[!NOTE] 你必须设置带有 alpha 通道的背景颜色（例如 #80ffffff），模糊效果才会可见。

view.setVisible(visible)¶

• visible boolean - 如果为 false，此视图将被隐藏，不再显示。

view.getVisible()¶

返回 boolean - 此视图是否应被绘制。请注意，这与视图在屏幕上是否可见不同——它仍可能被遮挡或处于视野之外。

实例属性¶

通过 new View 创建的对象具有以下属性：

view.children 只读¶

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