在移动设备应用程序中使用滚动条的注意事项
通常，如果屏幕的可见区域无法显示全部内容，应用程序将显示滚动条。使用 Scroller 控件可以在应用程序中添加滚动条。其他组件（例如 Spark List 控件）支持滚动，因此您无需使用 Scroller 组件。有关更多信息，请参阅 Scrolling Spark containers。
滚动条的点击区域是指屏幕上放置鼠标以执行滚动操作的区域。在基于桌面或浏览器的应用程序中，点击区域是滚动条的可见区域。在移动设备应用程序中，即使屏幕的可见区域无法显示全部内容，也会隐藏滚动栏。隐藏滚动栏可使应用程序使用屏幕的全屏宽度和高度。
移动设备应用程序必须区分用户的意图，用户是要与控件交互（例如选择 Button 控件）还是要进行滚动。移动设备应用程序中有关滚动条的一个注意事项是：Flex 组件经常更改其外观以响应用户交互。
例如，当用户按 Button 控件时，按钮的外观将会更改，以指示该按钮已被选定。用户释放按钮时，按钮将其外观更改回未选定的状态。但是，在进行滚动时，如果用户触摸屏幕上 Button 所在的位置，您并不希望按钮的外观发生变化。
Adobe 工程师 Steven Shongrunden 在 Saving scroll position between views in a mobile Flex Application 中介绍了一个处理滚动条的示例。
滚动术语
以下术语用于介绍移动设备应用程序中的滚动：
- 内容
- 对于可滚动组件（例如 Group 容器或 List 控件），指整个组件区域。根据屏幕大小和应用程序布局，可能会仅显示部分内容。
- 视口
- 当前可见的组件内容区域中的一部分。
- 拖动
- 用户触摸可滚动区域，然后移动手指以便内容沿手势移动时发生的触摸手势。
- 速度
- 拖动手势的移动速率和方向。以沿 X 和 Y 轴每毫秒的像素为单位。
- 抛开
- 用户在拖动手势达到特定速度后抬起手指时的拖动手势，此时可滚动内容仍继续移动。
- 跳动
- 拖动或抛开手势可以将可滚动组件的视口移至组件内容之外。然后，视口显示空白区域。当您释放手指或抛开速度达到零时，视口将跳跃回其静止点，并且视口有内容填充。移动随着视口接近静止点而减慢，因此能平稳停止。
移动设备应用程序中的滚动模式
可滚动组件（例如 List 和 Scroller）基于组件的 pageScrollingEnabled 和 scrollSnappingMode 属性设置支持不同类型的滚动。这些属性仅在 interactionMode 样式设置为 touch 时有效。
下表介绍了滚动模式：
|
pageScrollingEnabled |
scrollSnappingMode |
模式 |
|---|---|---|
|
false（默认值） |
无（默认值） |
默认情况下，滚动以像素为基础。最终的滚动位置基于拖动或抛开手势位于任何像素位置。例如，您滚动 List 控件。当您抬起手指时滚动即结束，即使仅部分 List 项可见也是如此。 |
|
false |
leadingEdge、center、trailingEdge |
滚动以像素为基础，但是内容基于 scrollSnappingMode 的值与最终位置对齐。 例如，可以通过将 scrollSnappingMode 设置为值 leadingEdge 来垂直滚动 List。List 控件与最终滚动位置对齐，其中顶部列表元素对齐到列表顶部。 |
|
true |
none |
滚动以页面为基础。可滚动组件的视口大小决定着页面大小。无论采用什么手势，一次只能滚动一个页面。 至少滚动组件可见区域的 50% 才能使该页面滚动到下一页。如果您滚动的区域少于 50%，则该组件仍保留在当前页面。或者，如果滚动速度足够高，会显示下一页。如果滚动速度不够高，组件仍保留在当前页面。 如果内容大小不是视口大小的整数倍，则会向最后一页中添加另外的内边距以使其完全适合视口的大小。 |
|
true |
leadingEdge、center、trailingEdge |
滚动以页面为基础，但是组件基于 scrollSnappingMode 的值与最终位置对齐。为确保遵守对齐模式，滚动距离始终都不能完全等于页面大小。 |
移动设备应用程序中的滚动示例
在以下示例中，使用 Scroller 组件将 Group 容器封装在移动设备应用程序中。Group 容器将包含较大图像的 Image 控件作为其子代。通过将 Group 容器封装在 Scroller 中，您可以滚动图像：
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileviewsSparkMobilePixelScrollerHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
<s:Scroller width="200" height="200">
<s:Group>
<s:Image width="300" height="400"
source="@Embed(source='../assets/logo.jpg')"/>
</s:Group>
</s:Scroller>
</s:View>
请注意，在该示例中，将忽略 pageScrollingEnabled 和 scrollSnappingMode 属性的任何设置。因此，该示例使用默认的像素滚动模式，并且您可以滚动到图像中的任何像素位置。
下一示例中显示的 List 控件将设置 pageScrollingEnabled 和 scrollSnappingMode 属性：
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileviewsSparkMobilePageScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Adobe Product List">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.ProductPricelView,myList.selectedItem);
}
]]>
</fx:Script>
<s:List id="myList" labelField="Product"
height="200" width="100%"
borderVisible="true"
scrollSnappingMode="leadingEdge"
pageScrollingEnabled="true"
change="myList_changeHandler(event);">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object Product="Adobe AIR" Price="11.99"/>
<fx:Object Product="Adobe BlazeDS" Price="11.99"/>
<fx:Object Product="Adobe ColdFusion" Price="11.99"/>
<fx:Object Product="Adobe Flash Player" Price="11.99"/>
<fx:Object Product="Adobe Flex" Price="Free"/>
<fx:Object Product="Adobe LiveCycleDS" Price="11.99"/>
<fx:Object Product="Adobe LiveCycle ES2" Price="11.99"/>
<fx:Object Product="Open Source Media Framework"/>
<fx:Object Product="Adobe Photoshop" Price="11.99"/>
<fx:Object Product="Adobe Illustrator" Price="11.99"/>
<fx:Object Product="Adobe Reader" Price="11.99"/>
<fx:Object Product="Adobe Acrobat" Price="11.99"/>
<fx:Object Product="Adobe InDesign" Price="Free"/>
<fx:Object Product="Adobe Connect" Price="11.99"/>
<fx:Object Product="Adobe Dreamweaver" Price="11.99"/>
<fx:Object Product="Open Framemaker"/>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
</s:View>
该示例使用具有 leadingEdge 对齐设置的页面滚动。因此，当您滚动 List 时，该 List 一次可以滚动一页。页面更改时，控件与最终滚动位置对齐，其中顶部列表元素对齐到列表顶部。
与 StageText 相关的滚动注意事项
StageText 允许您在移动设备应用程序中使用本机文本输入，但不允许使用标准文本字段控件。但是，可滚动的容器容纳不下使用 StageText 的文本输入控件，如 TextInput 或 TextArea 控件。因此，要在可滚动容器中使用文本输入控件，请重新设计控件外观，以使其不使用 StageText。
对于没有使用 StageText 的 TextInput 和 TextArea 控件，Flex 附带了一些外观。请在可滚动容器中对这些控件使用下列外观：
-
spark.skins.mobile.TextInputSkin 外观，用于不使用 StageText 的 TextInput。
-
spark.skins.mobile.TextAreaSkin 外观，用于不使用 StageText 的 TextArea。
下例显示了一个在可滚动容器中使用 TextInput 和 TextArea 控件的 View 容器：
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileSparkMobileStageTextScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<!-- Create CSS class selectors that reference the skins
that do not rely on StageText. -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
.myTextInputStyle {
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
}
.myTextAreaStyle {
skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}
</fx:Style>
<!-- Apply the class selectors to the TextInput and TextArea controls. -->
<s:Scroller width="100%" height="100%">
<s:VGroup height="250" width="100%"
paddingTop="10" paddingLeft="5" paddingRight="10">
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 1: "
fontWeight="bold"/>
<s:TextInput width="225"
styleName="myTextInputStyle"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 2: "
fontWeight="bold"/>
<s:TextInput width="225"
styleName="myTextInputStyle"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 3: "
fontWeight="bold"/>
<s:TextInput width="225"
styleName="myTextInputStyle"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 4: "
fontWeight="bold"/>
<s:TextInput width="225"
styleName="myTextInputStyle"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="TextArea 1: "
fontWeight="bold"/>
<s:TextArea width="225" height="100"
styleName="myTextAreaStyle "/>
</s:HGroup>
</s:VGroup>
</s:Scroller>
</s:View>
事件和滚动条
Flex 组件通过事件来指示已发生了用户交互。然后，组件可以更改其外观或执行其它操作，来对用户交互做出响应。
应用程序开发人员依赖事件来处理用户交互。例如，通常使用 Button 控件的 click 事件来运行事件处理函数，以对用户选择按钮做出响应。当用户选择 List 中的某一项时，使用 List 控件的 change 事件来运行事件处理函数。
Flex 滚动机制依赖于 mouseDown 事件。这意味着滚动机制会侦听 mouseDown 事件以确定是否要启动滚动操作。
将用户手势解释为滚动操作
应用程序在一个可滚动容器中包含多个 Button 控件：
-
使用手指按下 Button 控件。按钮将分派 mouseDown 事件。
-
Flex 将对用户交互的响应延迟预定义的时间段。通过延迟期，可以确保用户正在选择按钮而不是尝试滚动屏幕。
如果在延迟期间，您移动手指的量多于预定义量，则 Flex 将该手势解释为滚动操作。手指必须移动约 0.08 英寸的距离，该手势才会被解释为滚动。此距离大约相当于 252 DPI 设备上的 20 个像素。
由于您在延迟期结束前移动了手指，所以 Button 控件不会识别该交互。该按钮不会分派事件或更改其外观。
-
延迟期结束后，Button 控件将识别用户交互。该按钮将更改其外观，以指示其已被选定。
使用控件的 touchDelay 属性配置延迟的持续时间。默认值为 100 毫秒。如果将 touchDelay 属性设置为 0，则无延迟，且滚动会立即启动。
-
延迟期到期且 Flex 已分派鼠标事件后，移动手指的距离可以大于 20 像素。Button 控件将恢复为正常状态，并启动滚动操作。
在这种情况下，由于延迟期结束，因此按钮会更改其外观。但是，一旦移动手指的距离大于 20 像素，即使延迟期到期后，Flex 也会将手势解释为滚动操作。
处理滚动事件外观和项呈示器中的文本控件
要在滚动操作开始时发出信号，分派 mouseDown 事件的组件将分派冒泡的 touchInteractionStarting 事件。如果未取消该事件，组件将分派冒泡的 touchInteractionStart 事件。
当组件检测到 touchInteractionStart 事件时，不得尝试响应用户手势。例如，当 Button 控件检测到 touchInteractionStart 事件时，将关闭基于初始 mouseDown 事件而设置的任何可视指示符。
如果组件不希望启动滚动，组件可以在 touchInteractionStarting 事件的事件处理函数中调用 preventDefault() 方法。
完成滚动操作之后，分派 mouseDown 事件的组件将分派冒泡的 touchInteractionEnd 组件。
基于初始触摸点的滚动行为
下表说明了根据初始触摸点位置处理滚动的方式：
|
选定项 |
行为 |
|---|---|
|
空白空间、 不可编辑的文本、 不可选择的文本 |
所有组件都不识别该手势。直到用户移动触摸点的距离大于 20 个像素时，Scroller 才会启动滚动。 |
|
List 控件中的项 |
延迟期结束后，选定项的项呈示器将显示更改为选定状态。但是，只要用户移动的距离大于 20 像素，项就会将其外观更改为正常状态并启动滚动。 |
|
Button、 CheckBox、 RadioButton、 DropDownList |
延迟期结束后，将显示其 mouseDown 状态。但是，如果用户移动触摸点的距离大于 20 个像素，控件则将其外观更改为正常状态并启动滚动。 |
|
List 项呈示器中的 Button 组件 |
项呈示器从不加亮。Button 或 Scroller 处理手势，与正常的 Button 情况相同。 |
