LayaAir IDE版本和库版本： 1.8.0
Laya的ui控件list的渲染有两种常见的实现方式。
- 通过
itemRender实现：- 给
list.itemRender赋值一个实现了dataSource接口的类定义； - 通过
list.array传入数据源；
- 给
- 通过
renderHandler实现：- 在
LayaAir IDE的编辑模式下给List控件添加Box控件作为其子级容器; - 将该
Box控件的renderType属性设置为render； - 给
list.renderHandler赋值一个Handler对象； - 通过
list.array传入数据源；
- 在
不过本文只探讨使用第2种实现方式需要注意的地方。
通过renderHandler实现渲染时，box与dataSource遵循“有则赋值”规则
什么是“有则赋值”？说人话就是，通过dataSource传入的数据对象与box存在共有的属性（名字相同的属性）时，将会把数据对象的值赋给box。逻辑类似于：
if(data.hasOwnProperty('name') && box.hasOwnProperty('name')){
box.name = data.name;
}
下面通过一个例子来说明，以下是一个将动物信息展示出来的list实现：
import WebGL = Laya.WebGL;
// 程序入口
class GameMain{
constructor()
{
Laya.init(400,600, WebGL);
Laya.stage.bgColor = '#FFFFFF';
Laya.loader.load('res/atlas/comp.atlas', Laya.Handler.create(this, ()=>{
const data:{name:string, weight:number, src:string}[] = [];
data.push({name:'小狗', weight:5, src:'dog.png'});
data.push({name:'小猫', weight:3, src:'cat.png'});
data.push({name:'小鸟', weight:0.2, src:'bird.png'});
data.push({name:'小鸡', weight:0.5, src:'chick.png'});
data.push({name:'小猪', weight:10, src:'pig.png'});
const view:ui.ListViewUI = new ui.ListViewUI();
view.pos(50,50);
view.listDemo.array = data;
Laya.stage.addChild(view);
view.listDemo.renderHandler = Laya.Handler.create(this, (itemRender:Laya.Box, index:number)=>{
const label:Laya.Label = itemRender.getChildByName('lblContent') as Laya.Label;
const d = data[index];
label.changeText(d.name + ' 重量：' + d.weight + ' 图像：' + d.src);
}, undefined, false);
}))
}
}
new GameMain();
运行效果如下图：
符合预期的表现
目前表现跟预期还是一致的，接下来，假设每种动物的图片资源尺寸不一，并且怪物形象在图片中的实际位置也不统一。我们需要增加pivotX和pivotY的配置，来统一怪物形象的实际显示位置。我们对以上代码做如下的修改：
import WebGL = Laya.WebGL;
// 程序入口
class GameMain{
constructor()
{
Laya.init(400,600, WebGL);
Laya.stage.bgColor = '#FFFFFF';
Laya.loader.load('res/atlas/comp.atlas', Laya.Handler.create(this, ()=>{
// 仅对数据源做了修改，增加了pivotX和pivotY属性
const data:{name:string, weight:number, src:string, pivotX:number, pivotY:number}[] = [];
data.push({name:'小狗', weight:5, src:'dog.png', pivotX:0, pivotY:0});
data.push({name:'小猫', weight:3, src:'cat.png', pivotX:20, pivotY:0});
data.push({name:'小鸟', weight:0.2, src:'bird.png', pivotX:0, pivotY:0});
data.push({name:'小鸡', weight:0.5, src:'chick.png', pivotX:-20, pivotY:0});
data.push({name:'小猪', weight:10, src:'pig.png', pivotX:0, pivotY:0});
view.pos(50,50);
view.listDemo.array = data;
Laya.stage.addChild(view);
view.listDemo.renderHandler = Laya.Handler.create(this, (itemRender:Laya.Box, index:number)=>{
const label:Laya.Label = itemRender.getChildByName('lblContent') as Laya.Label;
const d = data[index];
label.changeText(d.name + ' 重量：' + d.weight + ' 图像：' + d.src);
}, undefined, false);
}))
}
}
new GameMain();
运行效果如下图：
不符合预期的表现
我的天！刚才一切正常的表现，居然发生了异常，list的渲染出来的item错位了。其实这里就是上文说的“有则赋值”的规则，我们实际并没有预期要把dataSource的pivotX和pivotY赋值给box，但实际却发生了。
我们可以把数据源里的pivotX和pivotY修改为srcPivotX和srcPivotY来避免上述意外的发生，我真是个小机灵鬼。（也可以通过其他方式避免，本文不赘述）
data.push({name:'小狗', weight:5, src:'dog.png', srcPivotX:0, srcPivotY:0});
总结：通过renderHandler实现list渲染的时候，千万要注意共有属性的非预期赋值。
引申：发生上述“有则赋值”的地方在Laya的Box控件，其有一接口为dataSource来接收数据源，可以在laya.ui.js找到以下代码，有兴趣的同学可以断点调试加深了解，这里也不详述了：
/**
*<code>Box</code> 类是一个控件容器类。
*/
//class laya.ui.Box extends laya.ui.Component
var Box=(function(_super){
function Box(){
Box.__super.call(this);;
}
__class(Box,'laya.ui.Box',_super);
var __proto=Box.prototype;
Laya.imps(__proto,{"laya.ui.IBox":true})
/**@inheritDoc */
__getset(0,__proto,'dataSource',_super.prototype._$get_dataSource,function(value){
this._dataSource=value;
for (var name in value){
var comp=this.getChildByName(name);
if (comp)comp.dataSource=value[name];
else if (this.hasOwnProperty(name)&& !((typeof (this[name])=='function')))this[name]=value[name];
}
});
return Box;
})(Component)
