egret GUI 文本混排+文本链接的聊天解决方案【取巧法】

时间:2023-12-12 11:02:26

ui方面:

<e:Scroller verticalScrollPolicy="auto" width="468" height="620" x="6" y="110">
<e:Group id="messageGroup">
<e:Label id="message_area" width="468" height="620"/>
</e:Group>
</e:Scroller>

使用Label的原因:TextArea不支持textFlow属性,虽然你追踪TextArea最终还是用TextField,并且你最终也可以使用TextField的textFlow属性,但是很麻烦。

套一个Group是因Label不能直接作为Scroller的viewport,然后Group外面再套一层Scroller,这样L可以上下移动Label了,当前的设置Scroller的尺寸以规定他的可视范围。

代码中:

this.message_area._textField.touchEnabled = true;
this.message_area.textFlow = 你的textFlow;
this.message_area.commitProperties();
this.message_area.height = this.message_area._textField.textHeight;

Label没有TEXTEVET.LINK事件,而Label的textField的鼠标事件又被禁止了,所以需要自己去设置textField的touchEnable为true;

然后在给Label添加textFlow之后需要即时的commitProperties(),如果不调用这个方法的话,估计需要等到下一帧textFlow才会传递到textField去,这样也拿不到他的文本高度和textFlow生效后的高度;

var sv = this.message_area.height - scroller.height;
if( sv > 0){
this.messageGroup.verticalScrollPosition = sv;
this.scroller._updateContentPosition();
}

以上代码是当文本高度超过scroller的高度的时候主动将他滚动到最下面。

效果图:

egret GUI 文本混排+文本链接的聊天解决方案【取巧法】