Skip to main content

View

네이티브 뷰를 생성하고 레이아웃을 구성한다.

프로세스: Main

이 모듈은 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)

Class: View​

기본적인 네이티브 뷰입니다.

프로세스: 메인

View는 EventEmitter입니다.

new View()는 새로운 View 인스턴스를 생성한다.

인스턴스 이벤트​

new View로 생성된 객체는 다음과 같은 이벤트를 발생시킨다:

이벤트: 'bounds-changed'​

뷰가 레이아웃에 따라 크기가 변경될 때 발생한다. 새로운 크기 정보는 view.getBounds()를 통해 확인할 수 있다.

인스턴스 메서드​

new View로 생성된 객체는 다음과 같은 인스턴스 메서드를 가진다:

view.addChildView(view[, index])​

  • view View - 추가할 자식 뷰
  • index Integer (옵션) - 자식 뷰를 삽입할 위치를 지정하는 인덱스. 기본값은 자식 목록의 끝에 추가한다.

이미 부모 뷰에 포함된 동일한 뷰를 추가하면, 해당 뷰가 최상위 뷰가 되도록 재정렬된다.

view.removeChildView(view)​

  • view View - 제거할 자식 뷰

인자로 전달된 뷰가 현재 뷰의 자식이 아닌 경우, 이 메서드는 아무런 동작도 수행하지 않는다.

view.setBounds(bounds)​

  • bounds Rectangle - 뷰의 새로운 경계값.

view.getBounds()​

Rectangle 타입의 값을 반환한다. 이 값은 부모 엘리먼트를 기준으로 한 현재 뷰의 경계를 나타낸다.

view.setBackgroundColor(color)​

  • color string - Hex, RGB, ARGB, HSL, HSLA 또는 CSS 색상 이름 형식으로 색상을 지정한다. Hex 타입의 경우 알파 채널은 선택 사항이다.

유효한 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 Color Module Level 3 키워드와 유사하지만 대소문자를 구분한다.
      • 예: blueviolet 또는 red

참고: Hex 형식에서 알파 채널은 AARRGGBB 또는 ARGB를 사용하며, RRGGBBAA 또는 RGB는 사용하지 않는다.

view.setBorderRadius(radius)​

  • radius Integer - 픽셀 단위의 테두리 반경 크기.

참고: 뷰의 테두리에서 잘려나간 영역도 클릭 이벤트를 캡처한다.

view.setVisible(visible)​

  • visible boolean - false로 설정하면, 뷰가 화면에서 숨겨진다.

인스턴스 속성​

new View로 생성된 객체는 다음과 같은 속성을 가진다:

view.children 읽기 전용​

이 뷰의 자식 뷰들을 나타내는 View[] 타입의 프로퍼티이다.