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)
1139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
