Version: 2020.2
언어: 한국어
시각적 트리
UXML 포맷

레이아웃 엔진

UI 툴킷에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 Flexbox의 하위 집합, 즉 HTML/CSS 레이아웃 시스템을 구현하는 Yoga 오픈소스 프로젝트입니다.

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

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

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

UI 툴킷은 스탠다드 UI 컨트롤(예: 버튼, 토글, 텍스트 필드, 레이블 등)을 위한 빌트인 컨트롤을 포함합니다. 이 빌트인 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.

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

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

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

  • flexDirection 프로퍼티를 row(USS: flex-direction: row;)로 설정하여 수평 레이아웃으로 전환하십시오.

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

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


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