メインコンテンツへ飛ぶ

表示

ネイティブのビューを作成しレイアウトします。

プロセス: メイン

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

基本のネイティブのビュー。

プロセス: メイン

ViewEventEmitter を継承しています。

new View()

新しい View を作成します。

インスタンスイベント

new View で作成されたオブジェクトでは以下のイベントが発生します。

イベント: 'bounds-changed'

レイアウトに応じてビューの境界が変更されたときに発生します。 新しい境界は view.getBounds() で取得できます。

インスタンスメソッド

new View で作成されたオブジェクトは、次のインスタンスメソッドを持っています。

view.addChildView(view[, index])

  • view View - 追加する子ビュー。
  • index Integer (任意) - 子ビューを挿入する添字。 デフォルトでは、子リストの最後に子を追加します。

追加されたビューが既にその親に含まれていると、そのビューは最上位のビューになるように並べ替えられます。

view.removeChildView(view)

  • 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 Rectangle - ビューの新しい境界。

view.getBounds()

戻り値 Rectangle - 親からの相対値での、この View の境界。

view.setBackgroundColor(color)

  • color string - 16進数、RGB、ARGB、HSL、HSLA、または名前付き CSS カラー形式の色。 16 進数タイプの場合、アルファチャンネルは任意です。

有効な 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 カラーモジュールレベル 3 のキーワードと似ていますが、大文字と小文字を区別します。
      • 例: bluevioletred

注意: アルファ付きの 16 進数形式は AARRGGBBARGB が使用され、RRGGBBAARGB は使用されません。

view.setVisible(visible)

  • visible boolean - false の場合、ビューはディスプレイから隠されます。

インスタンスプロパティ

new View で作成されたオブジェクトは、以下のプロパティを持っています。

view.children 読み取り専用

View[] 型のプロパティで、このビューの子ビューを表します。