跳转到主要内容

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 的内置类不能在用户代码中被继承。有关更多信息，请参阅 FAQ。

new View()​

创建一个新的 View。

实例事件​

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

事件: 'bounds-changed'​

当视图的边界响应布局而改变时发出。可以使用 view.getBounds() 获取新的边界。

实例方法​

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

view.addChildView(view[, index])​

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

如果相同的 View 已经包含在父视图中，它将被重新排序，使其成为最顶层的视图。

view.removeChildView(view)​

  • view 视图 - 要删除的子视图。

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

view.setBounds(bounds)​

view.getBounds()​

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

view.setBackgroundColor(color)​

  • color 字符串 - 十六进制、RGB、ARGB、HSL、HSLA 或命名的 CSS 颜色格式的颜色。十六进制类型可选地包含 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 的十六进制格式使用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

view.setBorderRadius(radius)​

  • radius 整数 - 像素为单位的边框半径大小。
注意

视图边框的区域剪切仍然会捕获点击。

view.setVisible(visible)​

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

view.getVisible()​

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

实例属性​

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

view.children 只读​

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