关于Flex的ScrollBar

来源:互联网 发布:网络教育毕业总结 编辑:程序博客网 时间:2024/05/24 04:39

根据视口内容变化判断是否显示

这个需求直白一点讲就是在一个固定的区域显示可能超长的内容,不超长的时候不需要显示滚动条,超长的时候显示滚动条,用户可以通过滚动条查看内容。
以下案例以纵向混动条为例说明。

案例

<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,是没有滚动的初始状态。

原创粉丝点击