当前位置: > > > Flex手机项目 - 页面视图切换,及切换时过渡效果

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

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;

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0