直接上完整代码：
第一种方法：(最好)
class GameMain {
private listPageUI: ui.ListPageUI;
private arr: Array<any>;
constructor() {
Laya.init(640, 1136, Laya.WebGL);
Laya.stage.bgColor = "#fffff5";
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.onLoaded));
}
private onLoaded(): void {
this.listPageUI = new ui.ListPageUI();
Laya.stage.addChild(this.listPageUI);
//获取模拟数据
this.getListData();
}
//List数据模拟，渲染
private getListData(): void {
//添加list数据
this.arr = [];
for (var i: number = 1; i <= 30; i++) {
this.arr.push({listText:{text:"第"+i+"项测试文本"} });
}
this.listPageUI._list.vScrollBarSkin = '';
//将this.arr数据赋值到列表数据源。
this.listPageUI._list.array = this.arr;
//list渲染:单元格渲染处理器(默认返回参数cell:Box,index:int)。
this.listPageUI._list.renderHandler = new Laya.Handler(this, this.onRender);
//mouseHandler: list单元格鼠标事件处理器
this.listPageUI._list.mouseHandler = new Laya.Handler(this, this.onMouse);
}
/**
*渲染List
* @param cell
* @param index
*
*/
private onRender(cell: Laya.Box, index: number): void {
//如果索引不再可索引范围，则终止该函数
if (index > this.arr.length)
return;
//获取当前渲染条目的数据
var data: any = this.arr[index];
//根据子节点的名字listNumber，获取子节点对象。
var listText: Laya.Label = cell.getChildByName("listText") as Laya.Label;
var cb = cell.getChildByName("check") as Laya.CheckBox;
//label渲染列表文本
listText.text = data.listText.text;
cb.selected =data.isCheck;
}
/**
*鼠标事件添加
* @param e
* @param index
*
*/
private onMouse(e: Event, index: number): void {
//鼠标单击事件触发
if (e.type == Laya.Event.CLICK) {
//判断点击事件类型,如果点中的是checkBox组件执行
if ((e.target) instanceof Laya.CheckBox) {
//记录当前条目所包含组件的数据信息(避免后续删除条目后数据结构显示错误)
var tempObj: any = this.arr[index];
//根据check的选中状态，设置条目的数据信息
if (((e.target) as Laya.CheckBox).selected) {
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } ,isCheck: true });
} else {
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } ,isCheck: false });
}
}
}
}
}
new GameMain();
解决代码重点：
第一步：通过监听鼠标事件，判断checkBox是否被选中来设置数据源
if (((e.target) as Laya.CheckBox).selected) {
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } ,isCheck: true });
} else {
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } ,isCheck: false });
}
第二步：渲染数据源
var cb = cell.getChildByName("check") as Laya.CheckBox;
cb.selected =data.isCheck;
第二种方法：
class GameMain {
private listPageUI: ui.ListPageUI;
private arr: Array<any>;
constructor() {
Laya.init(640, 1136, Laya.WebGL);
Laya.stage.bgColor = "#fffff5";
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.onLoaded));
}
private onLoaded(): void {
this.listPageUI = new ui.ListPageUI();
Laya.stage.addChild(this.listPageUI);
//获取模拟数据
this.getListData();
}
//List数据模拟，渲染
private getListData(): void {
//添加list数据
this.arr = [];
for (var i: number = 1; i <= 30; i++) {
this.arr.push({listText:{text:"第"+i+"项测试文本"} });
}
this.listPageUI._list.vScrollBarSkin = '';
//将this.arr数据赋值到列表数据源。
this.listPageUI._list.array = this.arr;
//list渲染:单元格渲染处理器(默认返回参数cell:Box,index:int)。
this.listPageUI._list.renderHandler = new Laya.Handler(this, this.onRender);
//mouseHandler: list单元格鼠标事件处理器
this.listPageUI._list.mouseHandler = new Laya.Handler(this, this.onMouse);
}
/**
*渲染List
* @param cell
* @param index
*
*/
private onRender(cell: Laya.Box, index: number): void {
//如果索引不再可索引范围，则终止该函数
if (index > this.arr.length)
return;
//获取当前渲染条目的数据
var data: any = this.arr[index];
//根据子节点的名字listNumber，获取子节点对象。
var listText: Laya.Label = cell.getChildByName("listText") as Laya.Label;
//label渲染列表文本
listText.text = data.listText.text;
var cb = cell.getChildByName("check") as Laya.CheckBox;
cb.selected = this._selIdx == index;
}
private _selIdx:number = -1;
/**
*鼠标事件添加
* @param e
* @param index
*
*/
private onMouse(e: Event, index: number): void {
//鼠标单击事件触发
if (e.type == Laya.Event.CLICK) {
//判断点击事件类型,如果点中的是checkBox组件执行
if ((e.target) instanceof Laya.CheckBox) {
//记录当前条目所包含组件的数据信息(避免后续删除条目后数据结构显示错误)
var tempObj: any = this.arr[index];
//根据check的选中状态，设置条目的数据信息
if (((e.target) as Laya.CheckBox).selected) {
this._selIdx = index;
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } });
} else {
this.listPageUI._list.setItem(index, { listText:{ text: tempObj.listText.text } });
}
}
}
}
}
new GameMain();
解决代码重点：
第一步：设置一个选中下表的私有变量
private _selIdx:number = -1;
第二步：监听鼠标事件，判断CheckBox是否被选中，若是选中，设置_selIdx的值为当前index的值
this._selIdx = index;
第三步：渲染数据的时候，获取ChengBox节点，通过判断index是否等于this._selIdx来判断是否被选中
var cb = cell.getChildByName("check") as Laya.CheckBox;
cb.selected = this._selIdx == index;
