Flex手机项目 - 页面视图切换，及切换时过渡效果

2014-12-22 发布：hangge 阅读：596

ViewNavigator类负责管理移动应用程序的每一个视图容器，其内部是一种基于栈的历史机制，由于在任何给定时间只在内存中保留一个视图，所以可以节省应用程序所使用的内存。

在手机移动项目开发时，主应用文件页面<s:ViewNavigatorApplication>的firstView设置了主页视图。

1，如果想要切换视图，可以使用navigator实现：

（1）navigator.pushView(View2, myObj); 这个将程序导航到一个新视图

第一个参数为新视图类，第二个事传递的数据（可选，新视图里使用data获取）

（2）navigator.popView(); 返回到前一个视图

（3）navigator.popToFirstView(); 返回到第一个视图

（4）navigator.replaceView(View2); 将导航堆栈的顶部视图替换为新视图。替换堆栈上当前视图的视图成为当前视图。

2，视图过渡效果可以使用如下四个视图过渡类：

（1）SlideViewTransiton：默认效果，新视图滑入，现有视图滑出

（2）FlipViewTransition：新视图显示出时现有视图翻出屏幕

（3）CrossFadeViewTransition：新视图显示出时现有视图淡出屏幕

（4）ZoomViewTransition：新视图显示时现有视图缩小至消失，或新视图在现有视图上放大

示例如下：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图">
	
	<fx:Script>
		<![CDATA[
			import spark.transitions.ZoomViewTransition;
			protected function btnclickHandler(event:MouseEvent):void
			{
				var zoom:ZoomViewTransition = new ZoomViewTransition();
				zoom.duration = 250;
				navigator.pushView(View2, null, null, zoom);
			}
		]]>
	</fx:Script>
	
	<s:Button label="去视图2" click="btnclickHandler(event)"/>
</s:View>

注意：

（1）每一种视图过渡都有许多属性定义动画效果，包括direction，duration和mode。

（2）除了上述的例子，对每一个视图切换单独设置效果。还可以给navigator设置统一的切换效果，代码如下：

navigator.defaultPushTransition = slide;
navigator.defaultPopTransition = zoom;