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

Flex 4中的视口和滚动功能介绍必备知识熟悉ActionScript、Flex3和基本的2D图形概念，将有利于理解本文内容。

用户级别中级必需产品Flash Builder (下载试用版)实例下载Download:Viewport.fxpFlex 4提供了接口IViewport（被所有可滚动组件实现）和组件Scroller（为视口添加滚动条，实现交互时的功能）。

这里所谓视口（viewport），即可滚动组件，要实现IViewport接口。

交互式滚动，是所有图形用户界面（GUI）工具的基本特性之一。

Flex 4之所以采用这种方法，是为了比Flex 3的实现更有效率，具体请参阅Spark与MX的比较。

在List和TextArea等很多Flex组件中，Scroller和视口均是它们皮肤的一个组成部分，无需开发者考虑如何实现滚动功能。

本文将介绍IViewport接口的工作原理，并提供一个简单的Scroller例子。

如果你想知道如何创建自己的交互式滚动组件，或需深入理解Flex 4中滚动特性的工作原理，请阅读本文。

滚动与视口概述GUI通过滚动，可以显示比用户屏幕空间更大的文档。

在Spark（Flex 4新增的组件和皮肤架构）中，IViewport接口定义了用一个矩形小裁剪窗口（clippingwindow）每次滚动一定距离、逐步展示大文档的具体行为。

这里所说“滚动”，是指改变与大文档关联的裁剪窗口的位置。

Spark中的Scroller组件为交互式滚动视口提供了一个通用的GUI。

它显示一对分别呈纵向和横向的滚动条，其滚动条的滑块位置定义了裁剪窗口的位置(X,Y)。

缺省情况下，滚动条仅在需要时才显示。

图1解释了IViewport接口的相关属性:width、height、contentWidth、contentHeight、horizontalScrollPosition和verticalScrollPosition及其几何结构。

如图1IViewport的几何结构和相关属性视口的contentWidth和contentHeight属性，定义了视口中内容被绘制时的横向和纵向最大尺寸。

width和height属性定义视口中部分内容的尺寸，即在屏幕上出现的内容的尺寸，或说视口的裁剪矩形窗口的大小。

horizontalScrollPosition和verticalScrollPosition属性则表示上述裁剪窗口的位置。

通过改变这些属性，应用程序可以实现视口的滚动。

Scroller类Spark的Scroller类是一个内置视口的容器，和Group和DataGroup组件相仿。

Scroller能显示纵向和横向滚动条，其滚动位置由视口的horizontalScrollPosition和verticalScrollPosition属性表示。

滚动条滑块的长度、滚动条最大长度由视口中内容的尺寸即contentWidth和contentHeight决定。

如下是一个简单的Scroller例子。

Scroller的视口是一个Group组件，Group又包含一个位于其中央的Image组件。

<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx" width="400" height="600"> <fx:Declarations><!--将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:Scroller width="300" height="400" horizontalCenter="0" verticalCenter="0"> <s:VGroup id="vp" width="100%" height="100%"><s:Image source="assets/331598.jpg"/></s:VGroup></s:Scroller></s:Group>这里还有一个经修改后更为复杂的例子，它可以显示视口几个属性的当前值如图2显示视口几个属性的当前值代码：<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx" width="400" height="600"><fx:Declarations><!--将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:Scroller width="300" height="400" horizontalCenter="0" verticalCenter="-50"> <s:VGroup id="vp" width="100%" height="100%"><s:Image source="assets/331598.jpg"/></s:VGroup></s:Scroller><s:VGroup left="50" top="475" width="300" gap="15"><s:Label text="viewport.contentWidth = {vp.contentWidth}"/><s:Label text="viewport.contentHeight = {vp.contentHeight}"/><s:Label text="viewport.horizontalScrollPosition ={vp.horizontalScrollPosition}"/><s:Label text="viewport.verticalScrollPosition = {vp.verticalScrollPosition}"/> </s:VGroup></s:Group>根据Scroller再次修改后的代码<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx" width="400" height="600"><fx:Declarations><!--将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:VGroup id="vp" width="300" height="400" horizontalCenter="0" verticalCenter="-50" clipAndEnableScrolling="true"><s:Image source="@Embed('assets/331598.jpg')"/></s:VGroup><s:VGroup left="99" top="474" gap="15"><s:Label text="viewport.contentWidth = {vp.contentWidth}"/><s:Label text="viewport.contentHeight = {vp.contentHeight}"/><s:Label text="viewport.horizontalScrollPosition ={vp.horizontalScrollPosition}"/><s:Label text="viewport.verticalScrollPosition = {vp.verticalScrollPosition}"/> </s:VGroup><s:VScrollBar viewport="{vp}" height="400" left="353" top="50"/><s:HScrollBar viewport="{vp}" width="309" left="50" top="452"/></s:Group>缺省情况下，Scroller仅在视口内容的尺寸大于视口实际尺寸时才显示滚动条。

当然，你也可以通过修改verticalScrollPolicy和horizontalScrollPolicy属性来改变滚动条显示策略。