Flex 4 beta中的视口和滚动功能介绍

Flex 4
beta提供了接口IViewport（被所有可滚动组件实现）和组件Scroller（为视口添加滚动条，实现交互时的功能功能）。这里所谓视口（viewport），即可滚动组件，要实现IViewport接口。交互式滚动，是所有图形用户界面（GUI）工具的基本特性之一。Flex
4 beta之所以采用这种方法，是为了比Flex 3的实现更有效率，具体请参阅Comparison
with MX scrolling
。
在List和TextArea等很多Flex组件中，Scroller和视口均是它们皮肤的一个组成部分，无需开发者考虑如何实现滚动功能。本文将介绍IViewport接口的工作原理，并提供一个简单的Scroller例子。如果你想知道如何创建自己的交互式滚动组件，或需深入理解Flex
4中滚动特性的工作原理，请阅读本文。
要求
为了更好理解本文的内容，你需准备如下软件和文件：
Flash Builder 4 beta
下载（InfoQ中文站独家高速下载）

深入学习

示例文件：
flex4_viewport_scrolling.mxml

(MXML, 2 KB)
预备知识
熟悉ActionScript、Flex3和基本的2D图形概念，将有利于理解本文内容。
滚动与视口概述
GUI通过滚动，可以显示比用户屏幕空间更大的文档。
在Spark（Flex 4 beta新增的组件和皮肤架构）中，IViewport接口定义了用一个矩形小裁剪窗口（clipping
window）每次滚动一定距离、逐步展示大文档的具体行为。这里所说“滚动”，是指改变与大文档关联的裁剪窗口的位置。
Spark中的Scroller组件为交互式滚动视口提供了一个通用的GUI。它显示一对分别呈纵向和横向的滚动条，其滚动条的滑块位置定义了裁剪窗口的位置(X,Y)。缺省情况下，滚动条仅在需要时才显示。图1解释了IViewport接口的相关属性（width、height、contentWidth、contentHeight、horizontalScrollPosition和verticalScrollPosition）及其几何结构。
图1
，IViewport的几何结构和相关属性
视口的contentWidth和contentHeight属性，定义了视口中内容被绘制时的横向和纵向最大尺寸。width和height属性定义视口中部分内容的尺寸，即在屏幕上出现的内容的尺寸，或说视口的裁剪矩形窗口的大小。horizontalScrollPosition和verticalScrollPosition属性则表示上述裁剪窗口的位置。通过改变这些属性，应用程序可以实现视口的滚动。
Scroller类
Spark的Scroller类是一个内置视口的容器，和Group和DataGroup组件相仿。
Scroller能显示纵向和横向滚动条，其滚动位置由视口的horizontalScrollPosition和verticalScroll