九大布局 Row/Column/Grid/Form/Fit 企业后台全场景选型与 XWL 标准写法

摘要

企业后台页面结构繁杂：顶部操作工具栏、多列数据卡片、多行录入表单、左右分栏详情面板、侧边抽屉菜单、居中弹窗提示、全屏数据大屏等场景，90% 开发人员存在布局选型混乱问题 —— 用 Grid 做单行按钮栏、用 Row 做多列表单、复杂分栏多层嵌套冗余容器，导致页面 XWL 代码臃肿、维护困难、自适应错乱。本文基于 WebBuilder 官方完整 Layout 示例源码，拆解 row、column、grid、grid1/3/5、form/form1、fit、center/middle/hmiddle/vmiddle 九类布局的适用边界，划分工具栏、表单录入、数据看板、分栏分割、弹窗抽屉、居中提示、全屏大屏七大类企业后台标准业务场景，给出每类场景唯一推荐布局、标准 XWL 模板、可直接复制复用代码，同时整理布局嵌套规范、gap/padding/flex 参数标准化配置，覆盖 OA、CRM、制造 MES、政务台账、数据驾驶舱全行业页面落地实战需求，新手可直接对照场景选用对应布局，资深开发者统一团队页面布局编码标准。

一、前言：企业后台布局选型常见五大落地问题

1. 布局容器混用，场景匹配错误：使用二维 grid 网格放置单行按钮工具栏，网格轨道多余计算造成页面冗余；使用 row 横向布局做多列录入表单，无法统一标签对齐，需额外手写大量样式适配；
2. 参数配置无统一标准：gap 间距有的写gap:true、有的写gap:".5em"，padding 内边距无统一规范，不同开发人员页面视觉割裂；flex 比例随意分配，1fr、2fr 无固定规范，页面自适应效果参差不齐；
3. 多层无意义嵌套：一层内容嵌套三层 container 布局容器，XWL 代码行数翻倍，页面加载解析变慢，后期修改需要逐层查找容器；
4. 动态场景适配缺失：弹窗表单不使用 form1 垂直弹性布局，文本域高度无法自适应；详情抽屉不使用 fit 填满布局，两侧留白、空间浪费；
5. 居中实现方式不统一：部分页面用 row+justify:center 居中，部分页面嵌套多层 div 居中，部分使用 middle 布局，同一系统居中视觉不一致，UI 规范混乱。

WebBuilder 内置九类标准化布局容器，每一类都针对固定业务场景深度封装，不存在万能通用布局，场景与布局一一对应是高效开发、统一 UI、简化代码的核心前提。本文结合官方示例所有 demo，划分全行业后台标准页面场景，明确每种场景最优布局、禁用布局、标准参数写法、完整 XWL 模板。

二、九大布局容器核心特性、适用边界、禁用场景总览（基于示例源码）

2.1 layout:"row" 横向弹性行布局

核心特性：主轴水平排列子组件，支持 flex 弹性占比、flexWrap 自动换行、justify 水平对齐、align 垂直对齐、fill 空白占位、自定义 gap 间距；示例包含普通单行 row、自动换行 row、居中对齐 row、两端均分 space-between、空白 fill 填充 row 五大 demo，是页面横向一维排布首选。

推荐适用场景：页面顶部操作工具栏、表格批量操作按钮组、弹窗底部保存取消按钮行、多标签水平切换栏、搜索条件单行筛选栏；

禁用场景：多列录入表单、二维数据卡片网格、垂直侧边菜单、全屏分栏面板；

标准参数规范：

• 工具栏单行不换行：layout:"row", gap:".5em", align:"center"，按钮统一垂直居中；
• 多按钮自动换行搜索栏：layout:"row", flexWrap:true, gap:".5em", padding:true；
• 两端分布操作栏：layout:"row", justify:"space-between", align:"center"；
• 中间留白左右按钮：内部添加<cname:"fill"/>占位组件，无需空容器填充空白。

2.2 layout:"column" 纵向弹性列布局

核心特性：主轴垂直排列子组件，flex 控制垂直高度占比，支持 align 水平对齐，适配垂直一维排布；示例 columnCt 纵向按钮组 demo。

推荐适用场景：抽屉侧边垂直功能菜单、弹窗左侧分步导航、页面左侧树形筛选栏、表单内垂直按钮组；

禁用场景：水平按钮工具栏、多列网格卡片、水平录入表单；

标准参数规范：layout:"column", gap:".5em", padding:true，弹性组件设置flex:1自动填充剩余垂直高度。

2.3 layout:"grid"/grid1/grid3/grid5 二维网格布局系列

包含通用 grid、固定 1 列 grid1、3 列 grid3、5 列 grid5 四大细分网格，支持 gridColumn 跨列、gridRow 跨行、tableStyle 表格边框、fill 空白网格占位、自定义 gridTplRows 行高度模板；示例 gridCt 基础网格、grid5Ct 五列复杂跨行列、gridTableStyleCt 表格边框网格、gridLastRowAutoFitCt 自适应底部网格。

推荐适用场景：多列客户 / 设备数据卡片看板、多列基础信息录入表单、统计指标网格面板、表格样式台账页面；

细分选型规范：

1. 单列长表单：grid1；
2. 双列常规录入表单：grid3（3 列网格占用 2 列放置标签 + 输入框）；
3. 多卡片 4-5 列大屏看板：grid5；
4. 行列不固定自适应卡片：通用 grid，搭配 gridTplRows 自定义行高度；
5. 台账、明细表格样式页面：开启tableStyle:true自动生成单元格分割边框； 禁用场景：单行水平工具栏、垂直侧边菜单、全屏唯一图表 / 表格； 标准参数规范：卡片网格统一gap:".8em", padding:"1em"，表单网格gap:".5em", padding:true。

2.4 layout:"form"/"form1" 表单专用布局（后台表单首选）

form：水平两列标签 + 输入框布局；form1：垂直弹性表单，文本域 flex 自适应高度；示例 formCt 通用表单、form1Ct 垂直自适应文本域表单。

推荐适用场景：新增编辑弹窗主表单、基础信息录入页面、审批流程填写表单；

细分选型：短字段少表单用 form 水平布局，长文本、多行输入、高度自适应场景用 form1 垂直布局；

禁用场景：数据卡片网格、单行按钮工具栏、全屏大屏；

标准参数规范：form1 布局内 textArea 文本域固定配置flex:1, minHeight:"3em"，自动占满表单剩余高度。

2.5 layout:"fit" 自适应填满布局

核心特性：容器内仅第一个子组件自动填满容器全部宽高，忽略其余子组件；示例 fitCt 单按钮填满容器 demo。

推荐适用场景：页面主内容区、抽屉内部唯一表格 / ECharts 图表、弹窗内全屏树形 tree、分割面板中心主区域；

禁用场景：多子组件排布、表单录入、多按钮工具栏；

标准参数规范：layout:"fit", padding:"1em"，内部仅放置单个核心业务组件（grid/chart/tree）。

2.6 center/middle/hmiddle/vmiddle 四大居中专用布局

1. center：居中 + 溢出裁剪；适用短提示弹窗、小卡片居中展示；
2. middle：水平垂直居中，不裁剪溢出内容；适用弹窗内长文本、长按钮居中；
3. hmiddle：仅水平居中；vmiddle 仅垂直居中； 推荐适用场景：空数据居中提示、弹窗内确认文字、空白页面占位提示； 禁用场景：工具栏、表单、数据网格；

三、七大类企业后台标准业务场景布局选型 + 完整可复用 XWL 模板

3.1 场景一：页面顶部操作工具栏（90% 列表页面必备）

首选布局：layout:"row"

禁用 grid/column，单行一维排布 row 性能最优，代码简洁；

标准需求：左侧新增、编辑、删除按钮，中间空白 fill 占位，右侧导出、打印按钮，按钮垂直居中，间距统一 0.5em；

完整复用 XWL 模板：

{
  cname: "container",
  cid: "toolbarRow",
  layout: "row",
  gap: ".5em",
  align: "center",
  padding: true,
  items: [
    {cname:"button",cid:"addBtn",text:"新增",type:"primary"},
    {cname:"button",cid:"editBtn",text:"编辑"},
    {cname:"button",cid:"delBtn",text:"删除"},
    {cname:"fill"},
    {cname:"button",cid:"exportBtn",text:"导出Excel"},
    {cname:"button",cid:"printBtn",text:"打印"}
  ]
}

适配：客户管理、采购订单、设备台账所有列表页面顶部工具栏。

3.2 场景二：弹窗新增 / 编辑录入表单（后台最高频场景）

首选布局：短字段用 form，长文本多行输入用 form1

禁用 row、grid，form 系列原生适配标签 + 输入框，无需手动对齐；

form1 垂直自适应表单标准模板（弹窗内通用）：

{
  cname: "container",
  cid: "editFormCt",
  layout: "form1",
  frame: false,
  height: "15em",
  resizable: true,
  items: [
    {cname:"text",cid:"name",text:"名称",required:true},
    {cname:"text",cid:"code",text:"编码",required:true},
    {cname:"textArea",cid:"remark",text:"备注",flex:1,minHeight:"3em"}
  ]
}

适配：供应商编辑、工单新增、用户信息弹窗表单。

3.3 场景三：多列数据卡片看板（数据驾驶舱、统计页面）

首选布局：grid5 / 通用 grid，开启 tableStyle 做台账表格

禁用 row、fit，二维网格均匀分配卡片空间；

五列卡片看板标准模板：

{
  cname: "container",
  cid: "cardGrid",
  layout: "grid5",
  gap: ".8em",
  padding: "1em",
  frame: true,
  items: [
    {cname:"container",layout:"fit",text:"卡片1",frame:true},
    {cname:"container",layout:"fit",text:"卡片2",frame:true},
    {cname:"container",layout:"fit",text:"卡片3",frame:true,gridColumn:"span 3"},
    {cname:"container",layout:"fit",text:"卡片4",frame:true},
    {cname:"container",layout:"fit",text:"卡片5",frame:true}
  ]
}

适配：生产指标大屏、客户统计看板、设备状态监控页面。

3.4 场景四：左右 / 上下分栏分割面板（后台复杂复合页面）

首选组合：外层 column 垂直分栏，中层 row 水平分栏，内部 fit 承载核心内容

参考官方示例rowColBordersCt分割布局 demo，上下 top-middle-bottom 三层，中间 row 左中右三栏，每一栏内部 fit 放置表格、树形、图表；

分层嵌套规范：最多三层嵌套（外层 column→中层 row→内层 fit），禁止四层及以上嵌套容器，简化代码、提升解析速度。

适配：左侧树形筛选 + 右侧数据表格、顶部工具栏 + 中间主表格 + 底部明细、侧边抽屉菜单 + 主内容面板。

3.5 场景五：侧边 Drawer 抽屉内部布局

首选组合：外层 column 垂直菜单，主内容 fit 填满

抽屉 dockPosition:right/left，外层 layout:"column" 垂直功能按钮，底部 fit 放置详情表格；

禁用 grid、form，抽屉空间狭窄，一维纵向排布最优。

3.6 场景六：全屏数据大屏、单图表页面

首选布局：fit 填满容器

页面 viewport 内部唯一 container layout:"fit"，内部放置 ECharts 图表、大数据 grid 表格，自动填满页面全部可视区域，无留白浪费空间；

禁用 grid、row，多余行列计算占用性能。

3.7 场景七：空白页面、空数据居中提示

首选布局：middle 居中容器

表格无数据、页面无内容时，使用 layout:"middle" 容器包裹提示文本，水平垂直居中展示，不裁剪长提示文字；

禁用 center（长文本会被裁剪）。

四、布局嵌套标准化规范（统一团队编码，杜绝冗余容器）

4.1 嵌套层级硬性规范

页面容器嵌套最多三层，层级模板固定：

一级：viewport（页面根容器，layout 固定 grid1 单列）；

二级：业务分栏容器（row/column/grid）；

三级：内容承载容器（fit/form/ 单行 row 工具栏）；

禁止四级及以上 container 嵌套，多余嵌套直接合并、删除空容器，简化 XWL 代码，降低页面解析耗时。

4.2 gap、padding 全局统一参数标准（全系统 UI 视觉统一）

1. 工具栏 row：gap:".5em", padding:true；
2. 表单 form/form1：gap:".5em", padding:true；
3. 数据卡片 grid：gap:".8em", padding:"1em"；
4. 分割面板、抽屉容器：gap:".5em", padding:"1em"； 禁止无规范随机填写 gap 数值（1em、0.3em、true 混用），全局统一间距参数，整套系统视觉一致。

4.3 flex 弹性比例分配规范

1. 单行 row 空白填充：统一使用<cname:"fill"/>组件，不设置组件 flex:999 占位；
2. 均分剩余空间：flex:1；双倍空间：flex:2；自定义最小宽度弹性：flex:"2 0 12em"（示例标准写法）；
3. form1 文本域自适应高度：固定flex:1, minHeight:"3em"，统一最小高度。

4.4 autoScroll 滚动开启规范

仅复杂多组件容器开启 autoScroll，fit、单行 row 工具栏禁止开启滚动；表格、tree 自身内置滚动，外层容器不重复开启 autoScroll，避免双层滚动条 BUG。

五、高频落地踩坑解决方案（基于官方示例常见错误）

5.1 踩坑 1：用 grid 网格做单行工具栏，按钮分布错乱

错误写法：layout:"grid3" 放置单行按钮；

解决方案：替换为 layout:"row" 一维弹性布局，一行代码实现对齐、换行、空白填充。

5.2 踩坑 2：弹窗表单使用 row 横向排布标签输入框，对齐混乱

错误写法：多个 row 嵌套实现两列表单；

解决方案：直接使用 layout:"form" 原生表单布局，自动标签对齐，减少 50% 代码量。

5.3 踩坑 3：详情抽屉不用 fit，内部表格两侧大量留白

错误写法：抽屉内部 grid 容器承载表格，固定宽度留白；

解决方案：抽屉内层添加 layout:"fit" 容器，表格自动填满抽屉全部宽度。

5.4 踩坑 4：多层嵌套容器过多，XWL 代码冗长、修改困难

解决方案：遵循三层嵌套规范，删除无 frame、无特殊参数的空 container，合并同级布局容器。

5.5 踩坑 5：居中弹窗使用 center 布局，长提示文字被裁剪隐藏

解决方案：长文本居中替换为 layout:"middle"，不开启溢出裁剪。

六、全行业场景快速选型速查表（开发直接对照选用）

七、总结

WebBuilder 九类布局容器各司其职，不存在通用万能布局，页面开发核心是场景匹配对应布局，杜绝容器混用、无意义多层嵌套、参数不规范三大问题。本文基于官方完整 Layout 示例源码，划分七类企业后台高频业务场景，提供可直接复制的标准化 XWL 模板，同时制定统一嵌套、gap、flex 编码规范，适用于团队多人协作统一 UI 与代码风格，覆盖 OA、CRM、制造 MES、政务台账、数据驾驶舱全行业落地实战。开发者按照场景选型规范开发，可减少 60% 布局调试时间，页面 XWL 代码精简 40%，整套系统页面视觉、交互高度统一，后期迭代维护成本大幅降低