根据视口内容变化判断是否显示
这个需求直白一点讲就是在一个固定的区域显示可能超长的内容,不超长的时候不需要显示滚动条,超长的时候显示滚动条,用户可以通过滚动条查看内容。
以下案例以纵向混动条为例说明。
案例
<s:HGroup>
<s:RichEditableText id="bookDescriptionLabel" editable="false"
backgroundAlpha="0" verticalAlign="top"
lineHeight="55" columnGap="50" kerning="auto"
width="850" height="325" fontSize="24" clipAndEnableScrolling="true"
updateComplete="bookDescriptChangeHandler(event)" />
<s:VScrollBar id="VS_Chat" viewport="{bookDescriptionLabel}" right="0" height="{bookDescriptionLabel.height}" styleName="BookDetailVScrollBarSkin"/>
</s:HGroup>
以上代码中,是一个水平布局的结构,左侧显示富文本内容,右侧放置对应的滚动条。滚动条VS_Chat 的视口是bookDescriptionLabel,需要在修改bookDescriptionLabel.text以后,判断是否需要显示VS_Chat。要点是需要监听的视口是bookDescriptionLabel的updateComplete事件,这时候可以获得文本的高度和宽度。
以下是监听事件的方法:
private function bookDescriptChangeHandler(e:Event):void
{ if(this.bookDescriptionLabel.contentHeight>bookDescriptionLabel.height)
{
this.VS_Chat.visible=true;
}else
{
this.VS_Chat.visible=false;
}
}
这个方法执行之时,富文本内容已经渲染完毕,其contentHeight属性是实际的文本高度,将其和富文本可以显示的区域高度做比较即可。
控制VScrollBar的位置(控制视口内容的位置)
设置其value属性,value=0,是没有滚动的初始状态。