Version: 2020.3
시각적 트리
UXML 포맷

레이아웃 엔진

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine is the Yoga open source project that implements a subset of Flexbox: a HTML/CSS layout system.

Yoga와 Flexbox를 사용하려면 다음의 외부 리소스를 참조하십시오.

기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃은 다음의 기본 동작을 포함합니다.

  • 컨테이너가 자식을 수직으로 배포합니다.
  • 컨테이너 직사각형의 포지션이 자식 직사각형을 포함합니다. 이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.
  • 텍스트가 포함된 시각적 요소는 크기 계산에 있는 텍스트 크기를 사용합니다. 이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.

UI Toolkit include built-in controls for standard UI controls such as button, toggle, text field, or label. These built-in controls have styles that affect their layout.

다음 목록에서 레이아웃 엔진을 사용하는 방법에 대한 팁을 확인하십시오.

  • widthheight를 설정하여 요소의 크기를 정의하십시오.

  • flexGrow 프로퍼티(USS: flex-grow: <value>;)를 사용하여 요소에 유연한 크기를 할당하십시오. flexGrow 프로퍼티의 값은 요소의 크기가 해당 형제들에 의해 결정될 때 가중치 역할을 합니다.

  • Set the flexDirection property to row (in USS: flex-direction: row;) to switch to a horizontal layout.

  • 상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.

  • position 프로퍼티를 absolute로 설정하여 부모 포지션 직사각형을 기준으로 요소를 배치하십시오. 이 경우에는 형제 또는 부모의 레이아웃에 영향을 주지 않습니다.


  • 2018–11–02 페이지 수정됨
시각적 트리
UXML 포맷