方向与间距 — 不用坐标的排布

第 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 像素宽下、在平板上、在被拖到一半宽的桌面窗口里，都是同一个文件。写死坐标，就只在其中一种情况下对。

方向和间距不需要知道尺寸就能写。所以这一层只有它们。