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）