基础容器

基础容器（Row）是页面的栅格布局容器，一行可容纳多个布局列（Column），通过拖拽分隔条调整各列宽度，是页面骨架搭建的起点。

概述

把「基础容器」拖入画布后，会自动附带一个布局列。组件放置在列中，而不是直接放在行中：

行负责横向排布列，列负责纵向（或横向）排布其中的组件。
每行最多支持 6 列，最少保留 1 列。
悬停行时会出现列之间的分隔条，拖动分隔条即可调整列宽（最小列宽为 2/24）。

列是结构性容器，不能上移、下移、复制或移除，只能通过列的工具栏进行拆分列与删除列：

操作	说明
拆分列	在被选中的列右侧再插入一列（受最大列数限制）
删除列	删除当前列及其内部组件；行至少保留一列，删除含内容的列会二次确认

向后兼容

历史布局中的固定列行（Row1 ~ Row4）在拆分列时会被转换为动态行（Row），以保持列宽配置格式兼容。

配置项

以下属性在选中行后于右侧属性抽屉中配置。

配置项	说明
列间距	行内多个列之间的间距，取值 0 ~ 30，默认 5
单元格宽度	当列数大于 1 时出现，通过区间滑块调整各列宽度占比
固定列数展示	关闭（默认）时按设备宽度自动适配列数；开启后所有设备统一使用固定列数

以下属性在选中列后配置。

配置项	说明
元素间距	列内组件之间的间距，取值 0 ~ 30，默认 5
布局方向	列的排列方向：纵向 / 横向
对齐方式	列内组件的对齐方式：默认 / 从左到右 / 从右到左 / 居中

布局方向与对齐

纵向：列内组件自上而下堆叠，对齐方式对应交叉轴对齐。
横向：列内组件自左向右排列，对齐方式对应主轴分布（默认「默认」为两端对齐，即在 space-between 下均匀分布）。

使用建议

常见做法是用「双列」组织「左侧表单 + 右侧说明」「上方筛选 + 下方表格」的布局。
列数默认按设备宽度自适应，窄屏会自动堆叠为单列；仅当希望所有设备保持同一列宽时，才开启「固定列数展示」。

下一步

Tab 容器 - 多页签切换容器
布局器 - 返回布局器操作说明
页面 - 返回平台页面总览

属性明细

以下内容面向技术实现与 AI 检索，说明基础容器与布局列的属性、列宽计算规则与存储格式。

行（Row）属性表

行节点 widgetType 为 Row，其配置全部存放在节点 meta 中：

属性名	类型	含义	取值/存储值
`ColumnSpace`	string(number)	列间距（px）	`0` ~ `30`，默认 `5`；未配置时读取方按 `5` 处理
`ColumnsWidth`	string	单元格宽度分隔点	逗号分隔的 24 分制分隔点，如 `"8,16"`；详见下文
`FixedColumns`	string(boolean)	是否强制固定列数展示	`"true"`（所有设备固定列宽）/ `"false"`（默认，按设备宽度自适应）

ColumnsWidth 存储的是分隔点（split points），不是每列宽度本身：

取值为长度等于 列数 - 1 的、严格递增的整数序列，每个值在 (0, 24) 内。
相邻分隔点之差（首列从 0 起、末列到 24 止）即各列的 24 分制宽度。
示例："12" → 2 列 12/12；"8,16" → 3 列 8/8/8；"6,12,18" → 4 列 6/6/6/6；"8" → 2 列 8/16。
当分隔点缺失或与列数不一致时，按列数均分（24 不能被整除时，余数从最左列起逐列 +1）。

拖动列分隔条时，被拖动分隔点的可移动范围为 前一分隔点 + MIN_COLUMN_SPAN 到 后一分隔点 - MIN_COLUMN_SPAN；两端以外分别按 0 与 24 夹取。

FixedColumns 控制列宽是否随设备宽度变化，取值为字符串布尔值，断点行为如下（「列宽」指该列由 ColumnsWidth 推导出的 24 分制宽度）：

取值	`xs` / `sm`	`md`	`lg` / `xl` / `xxl`
缺省或 `"false"`（默认，自适应）	`24`（每列占满整行，窄屏自动堆叠为单列）	`min(列宽 × 2, 24)`	列宽
`"true"`（固定）	列宽	列宽	列宽

历史固定行（Row1 ~ Row4）沿用上述属性与默认值，仅自适应时部分断点的具体取值与动态行略有差异。

AutoAdaptColumns 已弃用

早期版本使用 AutoAdaptColumns（默认 "false"，即不启用自适应）表示「自适应列数」开关。现改为默认自适应，该键已弃用：读取方不再识别 AutoAdaptColumns，历史数据中的该键会被忽略并按默认自适应处理；如需固定列宽，请改用 FixedColumns: "true"。

列（Column）属性表

列节点 widgetType 为 Column：

属性名	类型	含义	取值/存储值
`ItemSpace`	string(number)	列内元素间距（px）	`0` ~ `30`，默认 `5`
`LayoutType`	string	列内布局方向	`vertical`（默认） / `horizontal`
`Align`	string	对齐方式	`default` / `start` / `end` / `center`（默认 `default`）
`Title`	string	列标题	被 Tab / Step / Segmented 容器作为页签、步骤或分段标题使用时写入

Align 的渲染语义：纵向布局时作用于交叉轴（start / end / center）；横向布局时作用于主轴（default 对应 space-between，start / end / center 分别对应 flex-start / flex-end / center）。

行节点存储示例

一个「基础容器」承载两列，列宽 12/12：

{
  "id": "6c2a2b1a-1000-4a01-8f10-000000000001",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5",
    "ColumnsWidth": "12"
  },
  "children": [
    {
      "id": "6c2a2b1a-1000-4a01-8f10-000000000002",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": []
    },
    {
      "id": "6c2a2b1a-1000-4a01-8f10-000000000004",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": []
    }
  ]
}

在页面布局中的位置

Row 是页面根 Layout 数组唯一允许的顶层节点（CONTAINER_ACCEPT_RULES.root = ["Row"]），其子节点固定为 Column：

{
  "Layout": [
    {
      "widgetType": "Row",
      "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
      "meta": { "ColumnsWidth": "8,16" },
      "children": [
        { "widgetType": "Column", "children": [] },
        { "widgetType": "Column", "children": [] },
        { "widgetType": "Column", "children": [] }
      ]
    }
  ]
}

拆分列与删除列

列工具栏的「拆分列」「删除列」遵循以下规则（列与其父行共同参与）：

操作	前提	行为
拆分列	父节点是行容器，且当前列数 < `ROW_MAX_COLUMNS`(6)	在选中列右侧插入一列；被拆列的宽度对半分（左侧得余数），其余列宽不变；列内子组件也按对半拆分到左右两列（左列得余数）
删除列	父节点是动态行（`widgetType = "Row"`），且当前列数 > 1	删除该列及其全部子组件；释放的宽度并入左邻列（若删除的是首列则并入右邻列），保证总宽仍为 24

历史固定行（Row1 ~ Row4）

早期版本使用固定列数的行容器，均保留用于兼容；它们与动态行共享 ColumnSpace / ColumnsWidth / FixedColumns 的 meta 格式，仅列数与默认分隔点不同：

widgetType	名称	列数	默认 `ColumnsWidth`	固定 `uid`
`Row1`	布局行组件-1列	1	不涉及	`65eef059-3280-4121-8702-a9d443a7e8bf`
`Row2`	布局行组件-2列	2	`"12"`	`f6efb188-749e-401c-bb7d-3570a4337ec3`
`Row3`	布局行组件-3列	3	`"8,16"`	`851a77eb-3746-49f6-b90e-786196d882d4`
`Row4`	布局行组件-4列	4	`"6,12,18"`	`dd5ecf51-8413-459d-a32d-a4a7c35ffcb2`

历史固定行的 dragType / originalType / widgetType 分别为 Row / Row / Row1 ~ Row4。

固定行转换为动态行

对历史固定行执行「拆分列」时，该行会被就地迁移为动态行，仅以下字段变化，其余 meta 不变：

字段	迁移后的值
`uid`	`RowWidgetUid` = `5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d`
`widgetType`	`Row`
`widgetTypeName`	动态行名称（`基础容器`）

因此，只有动态行（widgetType = "Row"）才支持「删除列」，历史固定行需先拆分一次完成迁移。

常量	值	说明
`ROW_MAX_COLUMNS`	6	动态行支持的最大列数
`MIN_COLUMN_SPAN`	2	拖拽分隔条时的最小列宽（24 分制）
`RowWidgetUid`	`5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d`	动态行的固定 `uid`
`Column` 固定 `uid`	`7b9a905e-83d4-452b-83c8-694a3e0935e3`	布局列的固定 `uid`

基础容器

概述

配置项

布局方向与对齐

使用建议

下一步

属性明细

行（Row）属性表

列（Column）属性表

行节点存储示例

在页面布局中的位置

拆分列与删除列

历史固定行（Row1 ~ Row4）

固定行转换为动态行

相关约束

相关接口

概述​

配置项​

布局方向与对齐​

使用建议​

下一步​

属性明细​

行（Row）属性表​

列（Column）属性表​

行节点存储示例​

在页面布局中的位置​

拆分列与删除列​

历史固定行（Row1 ~ Row4）​

固定行转换为动态行​

相关约束​

相关接口​

概述

配置项

布局方向与对齐

使用建议

下一步

属性明细

行（Row）属性表

列（Column）属性表

行节点存储示例

在页面布局中的位置

拆分列与删除列

历史固定行（Row1 ~ Row4）

固定行转换为动态行

相关约束

相关接口