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 Menu 创建的对象可以触发以下事件：

事件 'bounds-changed'

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

实例方法

Objects created with new View have the following instance methods:

view.addChildView(view[, index])

• view View - Child view to add.
• 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 - 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[, options])

• bounds Rectangle - New bounds of the View.
• options Object (optional) - Options for setting the bounds.
  • animate boolean | Object (optional) - If true, the bounds change will be animated. If an object is passed, it can contain the following properties:
    • duration Integer (optional) - Duration of the animation in milliseconds. 默认值为250。
    • easing string (optional) - Easing function for the animation. Default is linear.
      • 线性
      • ease-in
      • ease-out
      • ease-in-out

view.getBounds()

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

view.setBackgroundColor(color)

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

Examples of valid color values:

• Hex
  • #fff (RGB)
  • #ffff (ARGB)
  • #ffffff (RRGGBB)
  • #ffffffff (AARRGGBB)
• RGB
  • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
    • e.g. rgb(255, 255, 255)
• RGBA
  • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
    • e.g. rgba(255, 255, 255, 1.0)
• HSL
  • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
    • e.g. hsl(200, 20%, 50%)
• HSLA
  • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
    • e.g. hsla(200, 20%, 50%, 0.5)
• Color name
  • Options are listed in SkParseColor.cpp
  • 类似 CSS Color Module Level 3 关键字，但大小写敏感。
    • e.g. blueviolet or red

note

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

view.setBorderRadius(radius)

• radius Integer - Border radius size in pixels.

note

The area cutout of the view's border still captures clicks.

view.setBackgroundBlur(blurRadius)

• blurRadius Integer - The radius of the background blur effect (in pixels).

note

You must set a background color with an alpha channel (e.g. #80ffffff) in order for the blur effect to be visible.

view.setVisible(visible)

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

view.getVisible()

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.

实例属性

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

view.children Readonly

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