Laya经验杂谈:List控件通过Box Render实现渲染的注意事项

LayaAir IDE版本和库版本: 1.8.0

Laya的ui控件list的渲染有两种常见的实现方式。

  1. 通过itemRender实现:
    • list.itemRender赋值一个实现了dataSource接口的类定义;
    • 通过list.array传入数据源;
  2. 通过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();

运行效果如下图:


符合预期的表现

目前表现跟预期还是一致的,接下来,假设每种动物的图片资源尺寸不一,并且怪物形象在图片中的实际位置也不统一。我们需要增加pivotXpivotY的配置,来统一怪物形象的实际显示位置。我们对以上代码做如下的修改:

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错位了。其实这里就是上文说的“有则赋值”的规则,我们实际并没有预期要把dataSourcepivotXpivotY赋值给box,但实际却发生了。

我们可以把数据源里的pivotXpivotY修改为srcPivotXsrcPivotY来避免上述意外的发生,我真是个小机灵鬼。(也可以通过其他方式避免,本文不赘述)

data.push({name:'小狗', weight:5, src:'dog.png', srcPivotX:0, srcPivotY:0});

总结:通过renderHandler实现list渲染的时候,千万要注意共有属性的非预期赋值。

引申:发生上述“有则赋值”的地方在LayaBox控件,其有一接口为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)

你可能感兴趣的:(Laya经验杂谈:List控件通过Box Render实现渲染的注意事项)