Laya经验杂谈：Label.changeText(string)的注意事项

LayaAir IDE版本和库版本： 1.7.20

今天谈谈Label的changeText(string)方法，看看有哪些需要注意的地方。

官方对changeText(string)的描述。

/**
    *
快速更改显示文本。不进行排版计算，效率较高。
    *
如果只更改文字内容，不更改文字样式，建议使用此接口，能提高效率。
    *@param text 文本内容。
    */
    __proto.changeText=function(text){
        // ...
    }

描述中说到“建议使用此接口，能提高效率”，也就是说，官方是鼓励我们使用这个方法的，但前提是“不进行排版计算”，“不更改文字样式”。

了解Label的刷新机制

Label跟其他的UI组件的样式刷新时机是一样的，主要的修改时机为：添加到舞台后、修改样式后。

1. 添加到舞台后

添加到舞台后，Label的样式会进行一次刷新。换言之，在添加到舞台前使用changeText(string)修改文本内容后，其样式会在添加到舞台后进行刷新，所以一般情况下不会出现异常。

2. 修改样式后

修改样式后，一般会在下一帧渲染的时候刷新样式。但是使用changeText(string)修改文本后，由于时不会对Label进行重新排版的，刷新时排版也不会有什么变化。

具体案例

假定我们有以下默认的UI视图结构

UI试图结构

代码如下：

    const view = new ui.TestViewUI();
    Laya.stage.addChild(view);

运行结果：

运行结果1

我们分几种情况来加深对上文的理解。

1. 在添加到舞台之前通过changeText(string)或通过Label.text属性赋值

    const view = new ui.TestViewUI();

    view.lblName.changeText( 'F' );
    // 或
    // view.lblName.text = ( 'F' );

    Laya.stage.addChild(view);

运行结果：

运行结果2

结论：在添加到舞台前两种方式修改文本后，排版都生效了（HBox能够正常发挥作用）

2. 在添加到舞台之后，同一帧，通过changeText(string)或通过text属性赋值

    const view = new ui.TestViewUI();
    Laya.stage.addChild(view);

    view.lblName.changeText( 'F' );
    // 或
    // view.lblName.text = ( 'F' );

结论：同上，排版都生效了

3. 在添加到舞台之后，下一帧，通过changeText(string)或通过Label.text属性赋值

    const view = new ui.TestViewUI();
    Laya.stage.addChild(view);

    Laya.timer.frameOnce(1, this, ()=>{
        view.lblName.changeText( 'F' );
        // 或
        // view.lblName.text = ( 'F' );

        // 主动刷新HBox
        view.hbox.refresh();
    })

这次运行结果跟上述两种情况不一样，使用changeText(string)的时候，HBox没有发挥作用，也就是可以理解为changeText(string)并没有进行重新排版。如下图：

运行结果3

最终结论

当Label组件被添加到舞台的下一帧起，我们期望在文本修改后，能够即时生效，就应该使用Label.text来修改文本，反则，使用changeText(string)修改文本将更高效。
而至于为什么不进行重新排版会更高效，大家有兴趣的话可以查一下H5的canvas标签是如何绘制文本的、各类UI框架中是如何管理显示对象宽高的，另外也可以看看Laya框架中刷新视图组件样式的规则。