Skip to main content

View

创建并布局原生视图。

进程：主进程

🌐 Process: Main

在app模块的ready事件被触发之前，该模块无法使用。

🌐 This module cannot be used until the ready event of the app module is emitted.

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​

🌐 Class: View

一个基本的原生视图。

进程：主进程

🌐 Process: Main

View 是一个 事件触发器。

warning

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

new View()​

创建一个新的 View。

🌐 Creates a new View.

实例事件​

🌐 Instance Events

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

🌐 Objects created with new View emit the following events:

Event: 'bounds-changed'​

当视图的边界由于布局而发生变化时触发。可以使用 view.getBounds() 获取新的边界。

🌐 Emitted when the view's bounds have changed in response to being laid out. The new bounds can be retrieved with view.getBounds().

实例方法​

🌐 Instance Methods

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

🌐 Objects created with new View have the following instance methods:

view.addChildView(view[, index])​

  • view 视图 - 用于添加的子视图。
  • index 整数（可选）- 插入子视图的索引。默认为将子视图添加到子视图列表的末尾。

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

🌐 If the same View is added to a parent which already contains it, it will be reordered such that it becomes the topmost view.

view.removeChildView(view)​

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

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

🌐 If the view passed as a parameter is not a child of this view, this method is a no-op.

view.setBounds(bounds)​

  • bounds 矩形 - 视图的新边界。

view.getBounds()​

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

🌐 Returns Rectangle - The bounds of this View, relative to its parent.

view.setBackgroundColor(color)​

  • color 字符串 - 使用十六进制、RGB、ARGB、HSL、HSLA 或命名的 CSS 颜色格式。十六进制类型的 alpha 通道是可选的。

color 值的有效示例：

🌐 Examples of valid color values:

  • 十六进制
    • #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

带透明度的十六进制格式使用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

view.setBorderRadius(radius)​

  • radius 整数 - 边框半径大小（像素）。
note

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

view.setVisible(visible)​

  • visible 布尔值 - 如果为假，该视图将被隐藏显示。

view.getVisible()​

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

🌐 Returns boolean - Whether the view should be drawn. Note that this is different from whether the view is visible on screen—it may still be obscured or out of view.

实例属性​

🌐 Instance Properties

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

🌐 Objects created with new View have the following properties:

view.children 只读​

🌐 view.children Readonly

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

🌐 A View[] property representing the child views of this view.