Layout 布局容器

Layout 是一种特殊的 Clip 类型，用于创建嵌套结构和复杂布局。

字段定义

interface LayoutClip extends BaseClip {
  type: 'layout';
  direction?: 'horizontal' | 'vertical';  // 布局方向
  gap?: number;                           // 元素间距
  padding?: number | number[];            // 内边距
  alignItems?: AlignItems;                // 交叉轴对齐
  justifyContent?: JustifyContent;        // 主轴对齐
  clip?: boolean;                         // 是否裁剪溢出
  children: Clip[];                       // 子元素
}

type AlignItems = 'start' | 'center' | 'end' | 'stretch';
type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around';

布局方向

horizontal 水平布局

子元素从左到右排列。

{
  "type": "layout",
  "direction": "horizontal",
  "gap": 20,
  "children": [
    { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#ff0000" } },
    { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#00ff00" } },
    { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#0000ff" } }
  ]
}

vertical 垂直布局

子元素从上到下排列。

{
  "type": "layout",
  "direction": "vertical",
  "gap": 10,
  "children": [
    { "type": "text", "text": "标题" },
    { "type": "text", "text": "副标题" },
    { "type": "text", "text": "正文" }
  ]
}

间距设置

gap 元素间距

设置子元素之间的间距。

{
  "type": "layout",
  "direction": "horizontal",
  "gap": 30,
  "children": [...]
}

padding 内边距

设置容器的内边距。

统一内边距：

{
  "type": "layout",
  "padding": 20,
  "children": [...]
}

分别设置四边：

{
  "type": "layout",
  "padding": [10, 20, 30, 40],
  "children": [...]
}

顺序为：[上, 右, 下, 左]

对齐方式

alignItems 交叉轴对齐

值	水平布局效果	垂直布局效果
start	顶部对齐	左侧对齐
center	垂直居中	水平居中
end	底部对齐	右侧对齐
stretch	高度拉伸填满	宽度拉伸填满

justifyContent 主轴对齐

值	描述
start	起点对齐
center	居中对齐
end	终点对齐
space-between	两端对齐，元素间平分空间
space-around	元素周围平分空间

溢出处理

clip 裁剪溢出

值	描述
false	不裁剪，内容可以溢出
true	裁剪，超出部分隐藏

{
  "type": "layout",
  "clip": true,
  "children": [...]
}

子元素时间

Layout 本身有 start 和 duration，子元素的时间是相对于 Layout 的。

{
  "type": "layout",
  "start": 5,
  "duration": 10,
  "children": [
    {
      "type": "text",
      "text": "第一个",
      "start": 0,
      "duration": 5
    },
    {
      "type": "text",
      "text": "第二个",
      "start": 5,
      "duration": 5
    }
  ]
}

Layout 在时间线第 5 秒出现，持续 10 秒
第一个文本在 Layout 出现时立即显示（相对时间 0）
第二个文本在 Layout 出现后 5 秒显示

嵌套布局

Layout 可以嵌套，创建复杂的布局结构。

{
  "type": "layout",
  "direction": "vertical",
  "gap": 20,
  "children": [
    {
      "type": "layout",
      "direction": "horizontal",
      "gap": 10,
      "children": [
        { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#ff0000" } },
        { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#00ff00" } }
      ]
    },
    {
      "type": "layout",
      "direction": "horizontal",
      "gap": 10,
      "children": [
        { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#0000ff" } },
        { "type": "rect", "transform": { "width": 100, "height": 100 }, "style": { "fill": "#ffff00" } }
      ]
    }
  ]
}

完整示例

卡片布局

{
  "type": "layout",
  "start": 0,
  "duration": 10,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 800,
    "anchor": "center"
  },
  "direction": "vertical",
  "gap": 20,
  "padding": 30,
  "style": {
    "fill": "#ffffff",
    "borderRadius": 16
  },
  "children": [
    {
      "type": "text",
      "text": "卡片标题",
      "start": 0,
      "duration": 10,
      "style": { "fontSize": 32, "fontWeight": 700, "fill": "#333333" }
    },
    {
      "type": "text",
      "text": "这是卡片的描述内容",
      "start": 0,
      "duration": 10,
      "style": { "fontSize": 18, "fill": "#666666" }
    }
  ]
}

导航栏

{
  "type": "layout",
  "direction": "horizontal",
  "gap": 30,
  "justifyContent": "space-between",
  "alignItems": "center",
  "transform": {
    "width": "100%",
    "height": 80
  },
  "padding": [0, 40, 0, 40],
  "style": {
    "fill": "#1a1a1a"
  },
  "children": [
    {
      "type": "text",
      "text": "LOGO",
      "style": { "fontSize": 24, "fontWeight": 700, "fill": "#ffffff" }
    },
    {
      "type": "layout",
      "direction": "horizontal",
      "gap": 20,
      "children": [
        { "type": "text", "text": "首页", "style": { "fontSize": 16, "fill": "#ffffff" } },
        { "type": "text", "text": "产品", "style": { "fontSize": 16, "fill": "#ffffff" } },
        { "type": "text", "text": "关于", "style": { "fontSize": 16, "fill": "#ffffff" } }
      ]
    }
  ]
}

字段说明表

字段	类型	必填	默认值	描述
type	'layout'	是	-	固定值
direction	string	否	horizontal	布局方向
gap	number	否	0	元素间距
padding	number \| number[]	否	0	内边距
alignItems	string	否	start	交叉轴对齐
justifyContent	string	否	start	主轴对齐
clip	boolean	否	false	是否裁剪溢出
children	Clip[]	是	-	子元素列表

最佳实践

层级控制：Layout 本身可以有 zIndex，子元素也有各自的 zIndex
时间管理：子元素的 start 是相对于 Layout 的，不是绝对时间
性能考虑：避免过深的嵌套层级（建议不超过 3 层）
尺寸设置：Layout 的尺寸可以通过 transform 设置，也可以由子元素撑开
样式继承：Layout 的 style 不会继承给子元素

Layout 布局容器

On this page