[]
前一个章节，我们使用格子布局和弹性布局完成了一个比较复杂的仪表板页面，充分灵活的使用格子和弹性布局的功能。那么接下来的列表页面和表单页面，就轻松简单许多。
本章只是将列表页的布局完成，没有涉及具体的业务，关于界面的布局，强烈建议大家先学习前面的格子布局功能介绍章节，弹性布局章节，表单章节，自由布局章节，这几个章节都详细的以实际中的场景介绍功能和属性。
请注意，在本章学习前，请先学习母版页，本章会用到母版页面的导航和页面。
整体列表页面，分成左右2大部分：
左侧是带搜索框的树形图
右侧是带查询面板的表格
在实现具体内容前，同仪表板页面一样，需要一个底色为灰色的背景，我们按照相同的步骤进行添加。
观察图上，我们可以看到整个页面划分，会有一个灰色系的背景进行分隔，所以第一步，并不是开始制作页面，而是给页面设置整体的灰色背景图片。
回到设计器，打开列表页面（实际上是创建的一个空白页面，在母版页章节中创建的，建议先看母版页章节），插入背景图片，选择背景色块，设置颜色为f2f3f5, 如下图。
接下来，将背景图片充满整个页面，勾选 背景图片的，适配浏览器宽度，适配浏览器高度，这样一个底色的背景就有了，并且是运行之后，充满整个页面。
运行之后，可以看到如下图的效果，但是能看到灰色背景的页面，并没有充满剩余的空间，这是因为创建的页面，所有的行和列，都是固定的行高和列宽，我们需要设置格子的范围模式，充满剩余空间。
回到设计器，先随意选择一列，一行设置范围模式，后面我们再调整。如下图，AH列，第20行，运行查看效果。
运行，可以看到带背景的仪表板页面充满了整个页面占位区。
关于格子行和列的范围模式，此处不讲解，详见格子布局的功能介绍。
选择B2:K27格子区域，选择弹性布局，选择垂直排列布局，如下图。
拖拽单行输入框到弹性布局中，选择输入框，打开 项目在容器内的布局对话框，设置高度为32。
再拖拽树形图到弹性布局中，选择树形图，打开 项目在容器内的布局对话框，设置放大比例为1。
选择容器，在功能区，在单元格样式中，选择白色背景圆角为8的样式（此样式是前一章仪表板中创建出来的，容器可以复用）。如果没有，创建一个单元格样式，背景为白色，圆角为8，然后使用此样式即可。
运行查看效果，点击左侧的列表页面菜单，跳转到列表页面，带搜索框的树形图的布局已经完成，可以调整一下间距。
回到设计器，选择容器，打开 内边距，设置所有内边距为20px，如下图，让容器内元素看起来更美观。
运行查看效果，左侧部分的UI已经完成，当然可以给输入框设置搜索图标。树形图需要配置数据，并且需要设置查询条件，以达到真实的搜索业务，本章先只讲解UI布局。
我们先来实现右侧部分的查询面板，查询面板在列表页面是非常常见的功能，下面将实现查询面板的UI布局部分。
选择M2:AJ2格子区域，然后拖拽弹性布局到此区域，默认水平排列即可，如下图。
拖拽表单单元格到弹性布局中，选择表单，设置为 行内表单。
拖拽按钮到弹性布局中，文本为查询，再拖拽按钮到弹性布局中，文本为重置，当然按钮可以选择不同的样式，如下图。
接下来是表单内，拖拽需要的单元格，比如输入框，选择器到表单内，如下图。如果表单项的宽度大，可以调整一下，具体操作为：
选中输入框，在右侧属性面板中，打开表单项设置，设置宽度，比如180，高度为32。
选中选择器，在右侧属性面板中，打开表单项设置，设置宽度，比如180，高度为32
我们发现，表单项在高度上不能完全显示出来，这是因为表单默认设置了内边距，我们修改一下。
选择表单，点击 容器内边距 对话框，设置上边距，下边距为0，点击确定。
运行查看效果，我们能看到查询面板的布局已经完成，但是有个细节，我们需要把2个按钮放置在右侧，让表单部分宽度加宽，占据剩下宽度。
回到设计器，选择表单，打开 项目在容器内的布局 对话框，设置放大比例为1。
运行查看效果, 简单的查询面板就已经完成，当然可以根据业务往表单区域内再添加需要的单元格，修改表单项的标签文本。此处只是示例，使用标签文本，没有进行修改。
接下来，我们需要放置内置表格，尤其活字格内置表格只能放置在格子区域，我们先在选择格子区域，选择N4:AI27区域，直接选择数据表，拖拽到此格子区域，会弹出选择绑定数据表的字段，选择之后，点击确定按钮，完成表格的直接绑定。
注意，看我图中选择的区域，用于放置表格的区域，左右各留出来空白行和列，是为了边距效果，表格本身没有内边距的功能，所以需要使用格子的行和列做出间距的效果。
运行查看效果，右侧部分基本已经完成，我们需要给右侧的查询面板和表格加一个白色的背景。
设计器中，插入白色背景图片，大小区域为M2:AJ27, 圆角为8，如下图。
运行查看效果，右侧部分，查询面板和白色背景顶部太近，我们可以在设计器中调整一下。
回到设计器，选择第2行，将行高调整为64，会发现弹性布局中的元素高度都被拉伸了，这是因为，弹性布局在交叉轴上对齐方式是拉伸填充方式，接下来，我们调整一下。
选择查询面板的弹性布局容器，设置交叉轴对齐方式为居中对齐，如下图。
保持选择查询面板的弹性布局，按Ctrl+A，全选容器内的子元素，点击右侧的 项目在容器内的布局，设置高度为32。相当于批量将子元素的高度统一设置成了32。
继续选择查询面板弹性布局，打开 容器内边距，设置一下左右内边距，为20px，如下图。
运行查看效果，到此列表页面的布局已经完成，当然还有一些细节，比如间距，文本等，需要继续调整。这部分修改比较简单，大家可以自行处理。
本章只是将列表页的布局完成，没有涉及具体的业务，关于界面的布局，强烈建议大家先学习前面的格子布局功能介绍章节，弹性布局章节，表单章节，自由布局章节，这几个章节都详细的以实际中的场景介绍功能和属性。
