# Layout 元素

## 1. 结构

```ts
interface LayoutClip extends BaseClip {
  type: "layout";
  direction?: "horizontal" | "vertical";
  gap?: number;
  padding?: number | [number, number, number, number];
  alignItems?: "start" | "center" | "end" | "stretch";
  justifyContent?:
    | "start"
    | "center"
    | "end"
    | "space-between"
    | "space-around";
  clip?: boolean;
  children: Clip[];
}
```

## 2. 当前已实现参数

- `direction`
- `gap`
- `padding`
- `alignItems`
- `justifyContent`
- `clip`
- `children`

## 3. `children` 当前支持的元素类型

- `video`
- `image`
- `text`
- `rect`
- `circle`
- `polygon`
- `audio`
- `layout`
- `template`

当前不支持直接作为子节点：
- `subtitle`

## 4. 最重要的限制

`layout.children` 不是独立时间线。

- 子元素不会各自按 `start` 调度
- 子元素不会完整执行自己的 `duration`
- 子元素不应该被当成完整时间线 clip 使用
- `animations / keyframes / transition` 不应在 `children` 中按“顶层 clip 规则”理解

## 5. 示例

```json
{
  "type": "layout",
  "start": 0,
  "duration": 6,
  "direction": "vertical",
  "gap": 24,
  "padding": 32,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": "80%",
    "height": "60%"
  },
  "children": [
    {
      "type": "text",
      "start": 0,
      "duration": 6,
      "text": "Title",
      "style": {
        "fontSize": 56,
        "fill": "#ffffff"
      }
    },
    {
      "type": "rect",
      "start": 0,
      "duration": 6,
      "transform": {
        "width": "100%",
        "height": 120
      },
      "style": {
        "fill": "#1f2937",
        "borderRadius": 16
      }
    }
  ]
}
```