跳转到主内容

查看

创建和布局原生视图。

Process: Main

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 类​

一个原生的视图。

Process: Main

View 是一个 EventEmitter。

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)​

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