The Scroller component displays a single scrollable component, called a viewport, and horizontal and vertical scroll bars. The viewport must implement the IViewport interface. Its skin must be a derivative of the Group class.
The Spark Group, DataGroup, and RichEditableText components implement the IViewport interface and can be used as the children of the Scroller control, as the following example shows:
<s:Scroller width="100" height="100"> <s:Group> <mx:Image width="300" height="400" source="@Embed(source='assets/logo.jpg')"/> </s:Group> </s:Scroller> |
The size of the Image control is set larger than that of its parent Group container. By default, the child extends past the boundaries of the parent container. Rather than allow the child to extend past the boundaries of the parent container, the Scroller specifies to clip the child to the boundaries and display scroll bars.
Not all Spark containers implement the IViewPort interface. Therefore, those containers, such as the BorderContainer and SkinnableContainer containers, cannot be used as the direct child of the Scroller component. However, all Spark containers can have a Scroller component as a child component. For example, to use scroll bars on a child of the Spark BorderContainer, wrap the child in a Scroller component.
To make the entire BorderContainer scrollable, wrap it in a Group container. Then, make the Group container the child of the Scroller component, For skinnable Spark containers that do not implement the IViewport interface, you can also create a custom skin for the container that includes the Scroller component.
The IViewport interface defines a viewport for the components that implement it. A viewport is a rectangular subset of the area of a container that you want to display, rather than displaying the entire container. The scroll bars control the viewport's horizontalScrollPosition and verticalScrollPosition properties. scroll bars make it possible to view the area defined by the viewport's contentWidth and contentHeight properties.
You can combine scroll bars with explicit settings for the container's viewport. The viewport settings determine the initial position of the viewport, and then you can use the scroll bars to move it, as the following example shows:
<s:Scroller width="100" height="100"> <s:Group horizontalScrollPosition="50" verticalScrollPosition="50" > <mx:Image width="300" height="400" source="@Embed(source='assets/logo.jpg')"/> </s:Group> </s:Scroller> |
The scroll bars are displayed according to the vertical and horizontal scroll bar policy, which can be auto, on, or off. The auto policy means that the scroll bar will be visible and included in the layout when the viewport's content is larger than the viewport itself.
The Scroller skin layout cannot be changed. It is unconditionally set to a private layout implementation that handles the scroll policies. Scroller skins can only provide replacement scroll bars. To gain more control over the layout of a viewport and its scroll bars, instead of using Scroller, just add them to a Group and use the scroll bar viewport property to link them together.
The Scroller control has the following default characteristics:
Characteristic | Description |
Default size | 0 |
Minimum size | 0 |
Maximum size | 10000 pixels wide and 10000 pixels high |
Default skin class | spark.skins.spark.ScrollerSkin |
沒有留言:
張貼留言