Flex4_ScrollBar控件

sinkingboat

1.滚动条控件简介
    滚动条控件分为：ScrollBar, HScrollBar , VScrollBar。
    VScrollBar （ 竖直 ScrollBar ）控件和 HScrollBar （ 水平 ScrollBar ）控件是用户操纵滚动条，将未显示出来的数据部分显示出来。
    虽然可以使用 VScrollBar 控件和 HScrollBar 控件作为单独的空间，但是他们通常要联合其他的组件作为自定义组件的一部分，以提供屏幕滚动功能。


2.ScrollBar控件常用属性和方法
    四部分组成：两个箭头按钮、一个滚带和一个滚动按钮。

    ScrollBar 控件使用四个参数来计算其显示状态：
    * maxScrollPosition 最大范围值
    * minScrollPosition 最小范围值
    * 当前位置：必须在最大、最小范围值之间
    * 视口大小

3.创建ScrollBar控件
    在MXML中使用 <mx:VScrollBar> 标签来定义ScrollBar控件，示例如下：
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
       <![CDATA[
           import mx.events.ScrollEvent;
           // 显示滚动位置的事件侦听器
           private function myScroll(event:ScrollEvent):void {
               showPosition.text = "VScrollBar 的属性:" '\n'
                   "------------------------------------" '\n'
                   "Current scroll position: "
                   event.currentTarget.scrollPosition '\n'
                   "The maximum scroll position: "
                   event.currentTarget.maxScrollPosition '\n'
                   "The minimum scroll position: "
                   event.currentTarget.minScrollPosition;
           }
       ]]>
   </mx:Script>
    <mx:Label
           width="100%"
           color="blue"
           text="点击 ScrollBar 查看它的属性。"/>
    <mx:VScrollBar id="bar"
           height="100%"
           minScrollPosition="0"
           maxScrollPosition="{this.width - 20}"
           lineScrollSize="50"
           pageScrollSize="100"
           repeatDelay="1000"
           repeatInterval="500"
           scroll="myScroll(event);"/>
    <mx:TextArea id="showPosition"
           height="100%" width="100%"
           color="blue"/>
</mx:Application>
    如果 ScrollBar 的大小被设置的小于上、下箭头按钮，则此 ScrollBar 控件不会正确显示。Flex 没提供这种情况的错误检查。

参考文献：
1.Flex 4 : ScrollBar , HScrollBar , VScrollBar. http://www.slsay.com/archives/144
2.http://oreilly.com/flex/excerpts/flex-4-cookbook/containers.html
3.http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d88.html
4.http://www.lonhosford.com/lonblog/2010/07/25/flex-4-hscrollbar-vscrollbar-how-to-autohide-like-scroller/
5.http://www.onez.cn/document/Flex4/spark/components/VScrollBar.html
6.http://hi.baidu.com/gis/blog/item/01460a1f38fd3204314e150a.html
7.http://www.flextheworld.com/2009/06/flex4-layout.html
8.http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html
9.http://apps.hi.baidu.com/share/detail/23587751
10.http://opensource.adobe.com/wiki/display/flexsdk/Spark Scroller
11.http://www.adobe.com/cn/devnet/flex/articles/flex4_viewport_scrolling_03.html

bokezyyx

不错的控件知识，感谢分享

platform1

真心赞的控件知识分享