layaBox:解决list中item复用,checkbox选中,其他复用项默认选中问题

直接上完整代码:
第一种方法:(最好)

class GameMain {
    private listPageUI: ui.ListPageUI;
    private arr: Array;
    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;
    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;

你可能感兴趣的:(layaBox:解决list中item复用,checkbox选中,其他复用项默认选中问题)