跳到主要内容

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` Integer (可选) - 插入子视图的索引。 默认为将子视图添加到子列表的末尾。

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

`view.removeChildView(view)`​

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

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

`view.setBounds(bounds)`​

`view.getBounds()`​

返回 Rectangle - 此 View 相对于其父级的边界。

`view.setBackgroundColor(color)`​

  • `color` string - 十六进制、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` Integer - 边框半径（像素）大小。
注意

视图边框的裁剪区域仍然捕获点击事件。

`view.setVisible(visible)`​

  • `visible` boolean - 如果为 false，视图将从显示中隐藏。

`view.getVisible()`​

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

实例属性​

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

`view.children` 只读​

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