[]
在使用低代码工具「活字格」进行页面搭建时，如果一开始就随意往页面里拖控件，很容易导致页面杂乱，结构混乱，后期难以维护。
正确的方式是：先做页面布局规划 → 再拆解区域 → 最后选择合适的布局方式和单元格类型。
本章介绍活字格的核心布局系统功能和典型场景：网格，弹性布局，自由布局，表单。 后续章节的实践场景中，需要灵活使用这几种布局功能。
下面是常见的web系统页面框架图。
顶部导航区：放置 LOGO、菜单、搜索框。
左侧菜单区：纵向的功能入口。
数据页面区：核心数据的图表、卡片和表格的展示，以及表单的填报页面
如下图活字格的示例系统，左侧菜单为导航区，顶部logo和登录用户信息区，中间为主数据展示区。
在活字格中，有格子、弹性布局、表单、自由布局这几种布局方式，下面是几种布局的对比，典型场景，劣势和特殊使用场景，从以下几个方面进行对比介绍，后续章节中需要灵活使用这几种布局。
格子 | 弹性布局 | 表单 | 自由布局 | |
|---|---|---|---|---|
功能 | 类Excel网格，固定行和列的布局方式 | 按行或列排列元素，提供了强大的对齐和分配空间的功能 | 表单形式展示数据表中的字段 | 无坐标控制，随意的布局系统 |
典型场景 | 快速上手，可以快速实现类的Excel格子页面 | 响应式布局，适合动态元素，以及布局之间相互不影响 | 典型的表单页，或者典型的查询面板中的行内表单 | 适用于静态并且布局不规则的页面 |
劣势 | 当元素存在动态显示或者隐藏时，固定布局无法实现响应式变化。 当调整行高或列宽时，会影响所有行或列的所有元素 | 有一定的学习成本，布局功能强大且灵活，需要理解弹性布局的概念和功能 不能使用图表和表格表格 | 固定的布局，不适合动态的内容 不能使用图表和表格 | |
特殊使用场景 | 背景图片，前景图片，表格和图表只能在格子上使用 | 特殊的叠加图片场景使用 |
在活字格中该如何选择和使用上面的布局呢？
1. 所有的单元格最外一层，都是格子布局，受格子布局的行和列的控制。
2. 背景图片，前景图片，图表，以及表格只能放置在格子区域，不能放置到弹性布局，表单，以及自由布局内。当然此处的图表和表格指的是活字格插入的图表以及活字格的表格，Echart图表单元格以及EL的表格，虚拟表格等都是可以放置到弹性布局，表单，以及自由布局内的。
3. 对于页面布局，需要先做页面布局规划 → 再拆解区域 。在活字格中，根据拆解的区域，除了上面说的背景图片，前景图片，图表和表格需要放置在格子区域，其他区域优先选择使用弹性布局，因为弹性布局更适合响应式布局，并且在后期维护时，不同区域之间有弹性布局容器的隔离，不会相互影响布局。
在活字格中，母版页起到导航页的作用，整个系统的通用信息和导航内容都放在母版页，如上图的示例系统，顶部信息区和左侧菜单，放在母版页中，如下图
第2行使用了弹性布局，用于显示logo和用户信息。
母版页的左侧使用菜单单元格，用于导航页面。
整个系统的绝大部分页面都是数据页面，有仪表板或工作台等用于显示系统的统计和汇总信息，还有数据展示信息页面，通常会使用表格或者图文列表显示数据，以及填报页面的表单页面。
无论是哪种页面，正确的方式依然是：先做页面布局规划 → 再拆解区域 → 最后选择合适的布局方式和单元格类型。
如下图，是典型的数据列表页面，从布局规划来看，主要分成以下3部分：查询面板，操作栏以及表格。
查询面板以及操作栏这2部分都可以使用表单，弹性布局完成。表格（活字格表格）部分需要在格子区域使用。当然如果表格使用的是EL表格，整个页面可以使用弹性布局嵌套的方式完成（需要对弹性布局的功能详细学习）。更推荐的是拆成3部分完成，使用格子+弹性布局/表单完成，减少弹性布局的嵌套从而减少布局的复杂度。
如下图仪表板页面，从上到下分成3大部分，第一部分是数据统计区，第二部分包含2个图表展示数据，最后一部分使用2个表格展示具体数据信息。
尤其图表和表格只能放置在格子区域，所以同样的，第一部分使用弹性布局（当然需要使用弹性布局嵌套弹性布局），其他部分是图表和表格，所以直接在格式区域使用图表和表格完成设计。
下图是个表单页面，划分成3个表单区域展示不同信息的字段，右下角为确认取消按钮。
同样根据拆分的3个部分，放置3个表单，完成此页面的设计。
