Skip to main content

View

创建和布局原生视图。

¥Create and layout native views.

进程：主进程

¥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

基本的原生视图。

¥A basic native view.

进程：主进程

¥Process: Main

View 是 EventEmitter。

¥View is an EventEmitter.

new View()​

创建一个新的 View。

¥Creates a new View.

实例事件​

¥Instance Events

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

¥Objects created with new View emit the following events:

事件：'bounds-changed'​

¥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 View - 要添加的子视图。

    ¥view View - Child view to add.

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

    ¥index Integer (optional) - Index at which to insert the child view. Defaults to adding the child at the end of the child list.

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

¥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 View - 要删除的子视图。

    ¥view View - Child view to remove.

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

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

view.setBounds(bounds)​

view.getBounds()​

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

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

view.setBackgroundColor(color)​

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

    ¥color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.

有效 color 值的示例：

¥Examples of valid color values:

  • 十六进制

    ¥Hex

    • #fff(RGB)

    • #ffff(ARGB)

    • #ffffff(RRGGBB)

    • #ffffffff(AARRGGBB)

  • RGB

    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)

      • 例如 rgb(255, 255, 255)

        ¥e.g. rgb(255, 255, 255)

  • RGBA

    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)

      • 例如 rgba(255, 255, 255, 1.0)

        ¥e.g. rgba(255, 255, 255, 1.0)

  • HSL

    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)

      • 例如 hsl(200, 20%, 50%)

        ¥e.g. hsl(200, 20%, 50%)

  • HSLA

    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)

      • 例如 hsla(200, 20%, 50%, 0.5)

        ¥e.g. hsla(200, 20%, 50%, 0.5)

  • 颜色名称

    ¥Color name

    • 选项列于 SkParseColor.cpp 中

      ¥Options are listed in SkParseColor.cpp

    • 与 CSS Color Module Level 3 关键字类似，但区分大小写。

      ¥Similar to CSS Color Module Level 3 keywords, but case-sensitive.

      • 例如 blueviolet 或 red

        ¥e.g. blueviolet or red

注意：带 alpha 的十六进制格式采用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

¥Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.

view.setVisible(visible)​

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

    ¥visible boolean - If false, the view will be hidden from display.

实例属性​

¥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.