LayaAir IDE
版本和库版本: 1.7.20
今天谈谈Label
的changeText(string)
方法,看看有哪些需要注意的地方。
官方对changeText(string)
的描述。
/**
*<p>快速更改显示文本。不进行排版计算,效率较高。</p>
*<p>如果只更改文字内容,不更改文字样式,建议使用此接口,能提高效率。</p>
*@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
框架中刷新视图组件样式的规则。