表单页面

前面章节，我们使用格子布局和弹性布局完成了一个比较复杂的仪表板页面，充分灵活的使用格子和弹性布局的功能。上一个章节完成了列表页面，那么接下来实战实现表单页面。

本章只是将表单页的布局完成，没有涉及具体的业务，关于界面的布局，强烈建议大家先学习前面的格子布局功能介绍章节，弹性布局章节，表单章节，自由布局章节，这几个章节都详细的以实际中的场景介绍功能和属性。

请注意，在本章学习前，请先学习母版页，本章会用到母版页面的导航和页面。

拆解页面

整体的表单页面，实际上是个分组表单的页面，3个分组表单部分以及确定取消按钮。

在实现具体内容前，同仪表板页面和列表页面一样，需要一个底色为灰色的背景，我们按照相同的步骤进行添加。

观察图上，我们可以看到整个页面划分，会有一个灰色系的背景进行分隔，所以第一步，并不是开始制作页面，而是给页面设置整体的灰色背景图片。

回到设计器，打开表单页面（实际上是创建的一个空白页面，在母版页章节中创建的，建议先看母版页章节），插入背景图片，选择背景色块，设置颜色为f2f3f5, 如下图。

接下来，将背景图片充满整个页面，勾选背景图片的，适配浏览器宽度，适配浏览器高度，这样一个底色的背景就有了，并且是运行之后，充满整个页面。

运行之后，可以看到如下图的效果，但是能看到灰色背景的页面，并没有充满剩余的空间，这是因为创建的页面，所有的行和列，都是固定的行高和列宽，我们需要设置格子的范围模式，充满剩余空间。

回到设计器，先随意选择一列，一行设置范围模式，后面我们再调整。如下图，AH列，第20行，运行查看效果。

运行，可以看到带背景的仪表板页面充满了整个页面占位区。

关于格子行和列的范围模式，此处不讲解，详见格子布局的功能介绍。

选择格子区域B2:AJ10, 拖拽表单到此区域，然后直接拖拽数据表到表单区域，会弹出选择字段的对话框，选择需要在表单中显示的字段，点击确定。

选择表单，然后设置列数3，如下图。

选择表单，点击功能区的，单元格样式，下拉选择白色背景圆角8的样式（此样式在前面章节中创建过），如果没有，就创建一个单元格样式，背景色为白色，圆角为8，使用这个样式。

运行查看效果，点击左侧的表单页面菜单，跳转到表单页面，查看效果，能看到分组表单1就完成了。

和上一部分的步骤完全相同，只是表单中绑定的字段不同，此处就不重复步骤了，如下图，在B12:AJ18区域，放置了表单，拖拽数据表到表单中，显示了字段，列数同样为3。

表单容器的样式，同样选择前面部分的白色背景圆角8的样式。

按照第一部分，在B20:AJ23区域，放了第3个表单，拖拽数据表显示对应的字段。列数为3。在我的示例中，只放了2个字段。表单容器的样式，同样选择前面部分的白色背景圆角8的样式。

运行查看效果，3个表单都已经完成，但是还差了一个确定和取消按钮组。

在Z25:AJ25格子区域，拖拽弹性布局到此格子区域，默认水平排列从左到右排列。

如下图：

可以看到，确定和取消按钮是在靠弹性布局的左侧显示，期望是在右侧显示，我们调整一下对齐方式，选择弹性布局，将主轴对齐方式改成向主轴终点对齐。

运行查看效果，到此整个表单的布局已经完成，当然还有一些细节没有调整，比如间距，比如文本内容等，这些部分比较简单，可以自行学习调整。

注意到，确定在取消按钮左侧，如果期望确定按钮在取消按钮右侧，只需要在设计器，选择取消按钮，拖拽到确定按钮之前即可完成调整顺序。