LayaBox入门基础之UI实现
List（列表）是比较常用的功能。本篇结合LayaAir引擎与IDE针对List显示、增加、删除等相关操作进行逐步讲解，供开发者学习引擎与IDE的实战参考。（创建项目等基础操作，请查看其它文档，本篇跳过）
一、用LayaAirIDE制作UI
1.1 创建一个View类型的UI页面
（图1）创建一个名为ListPage的View类型UI页面
首先，我们在LayaAirIDE的项目管理器内，创建一个View类型的UI页面，宽高为640*1136。页面命名为ListPage。
1.2 导入UI资源
将美术制作好的UI页面资源导入到资源管理器中。（具体导入方式参考LayaAirIDE资源导入的文档。）
（图2）
1.3 用九宫格制作List背景
1.3.1 拖拽List背景到舞台
（图3）将图片背景bg_list.png拖拽到舞台
1.3.2 Image属性中通过sizeGrid属性设置九宫格。
（图4）点击sizeGrid属性右侧按钮打开九宫格设置面板
1.3.3 在属性里设置width为640（全屏宽度）
（图5）
1.4 制作List容器
1.4.1 拖拽checkbox.png到舞台，并设置属性name为check。
（图6）
1.4.2 拖拽一个label.png到舞台，设置属性name为listNumber，其它属性参照图7。
（图7）用于序号的label组件
1.4.3 再拖拽一个label.png到舞台，修改文本内容为“List示例文本”，属性设置参照图8所示：
（图8）用于List文本的label组件
1.4.4 选中list背景图、序号label、文本label、checkbox，用Ctrl+B快捷键创建一个Box容器。然后选中Box容器，设置Box属性renderType为render。如图9，图10。
（图9）
（图10）
1.4.5 点击box容器再次通过Ctrl+B创建一个List容器，如图11。注意，所有的List容器，必须是基于Box容器的，我们看一下图12的层级关系，会更加清晰一些，list基于box循环产生。
（图11）
（图12）
1.5 设置List属性
选取List容器，设置Lis属性 var为_list（通过此变量可以调用该组件下的所有属性），然后根据实际需要设置其它属性，repeatX是X轴的列表数量，repeatY是Y轴的列表数量，spaceX是X轴列表间距，spaceY是Y轴列表间距。如图13所示：
（图13）
1.6 添加操作按钮
这里，我们直接使用了模板的ButtonTab，拖拽到舞台中，然后点击进入子节点，设置var、label属性以及九宫格等。如图14，图15：
（图14）
（图15）
调整好UI位置细节后，如图16。F12发布UI，就可以进入代码阶段
（图16）
