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
找到以下代码,有兴趣的同学可以断点调试加深了解,这里也不详述了:
/**
*Box
类是一个控件容器类。
*/
//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)