方向と間隔 — 座標を使わない配置

第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ピクセルでも、タブレットでも、半分に縮めたデスクトップの窓でも同じファイルだ。座標を書けば、その三つのうち一つでしか正しくない。

方向と間隔は、大きさを知らなくても書ける。だからこの層にはそれしか無い。