방향과 간격 — 좌표를 쓰지 않는 배치

1편의 화면에는 노드가 셋이었고, 각각 자식을 하나씩만 가졌다. 실제 화면은 그렇지 않다.

여러 개를 담는 노드

{ "type": "linear", "direction": "vertical", "spacing": 12, "alignment": "center",
  "children": [ ... ] }

linear 는 children 을 받는다. 그리고 세 가지만 정한다.

• direction — vertical 또는 horizontal
• spacing — 사이 간격
• alignment — 가로축 정렬

가로로 놓고 싶으면 같은 노드에 direction 만 바꾼다. 자식은 손대지 않는다.

{ "type": "linear", "direction": "horizontal", "spacing": 16,
  "children": [
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ede9fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ddd6fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#c4b5fd", "borderRadius": 10 } } ] }

box 는 크기와 겉모습을 가진 사각형이다. 자식을 넣으면 그 자식의 그릇이 되고, 안 넣으면 그냥 색칠한 면이다. 위 세 개는 자식이 없다.

좌표가 없다

이 화면 정의 어디에도 top, left, x, y 가 없다. 그건 이 런타임이 게을러서가 아니다.

화면이 서버에서 온다는 건, 화면을 만든 쪽이 화면이 놓일 자리의 크기를 모른다는 뜻이다. 906바이트짜리 이 파일은 1000픽셀 폭에서도, 태블릿에서도, 창을 반으로 줄인 데스크톱에서도 같은 파일이다. 좌표를 적으면 그 셋 중 하나에서만 맞다.

방향과 간격은 크기를 모르고도 적을 수 있다. 그래서 이 층에는 그것만 있다.