四种方式实现Flex页面跳转

在学习Flex的过程中,你可能会遇到Flex页面跳转的问题,本文和大家分享一下,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一层层的堆积,或者替换,但是为了好理解,还是称之为"页面跳转"。

Flex页面跳转

其实对于这个题目是不恰当的,因为flex中是没有页面这个概念的,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一层层的堆积,或者替换,但是为了好理解,还是称之为"页面跳转"。其实我们可以对比传统的C/S开发模式,没页面跳转,只有窗体和元件的显示和隐藏。

那么怎么实现Flex页面跳转呢,我总结了下,主要有一下几种方式:

1、使用ViewStack组件,具体代码如下所示:把要跳转的页新建成MXMLComponent,然后通过ViewStack组件把
这些页包含进来
 

 
 
  1. <mx:ViewStackidmx:ViewStackid="storeViews"width="100%"height="550"creationPolicy="all"> 
  2. <shouyeidshouyeid="homeView"label="首页"showEffect="WipeDown"hideEffect="WipeUp"/> 
  3. <leixingidleixingid="pView"label="模板类型"showEffect="WipeDown"hideEffect="WipeUp"/> 
  4. <makeidmakeid="supportView"label="立即制作"showEffect="WipeDown"hideEffect="WipeUp"/> 
  5. </mx:ViewStack> 

然后再用别的组件切换这些页,比如用Button
 

 
 
  1. <mx:Buttonclickmx:Buttonclick="storeViews.selectedChild=homeView;"/> 

2、使用navigateToURL,主要方式如下:

 
 
  1. varurl:String="http://localhost:8080/Flex_J2eeDemo/bin/Welcome.html";  
  2. varrequest:URLRequest=newURLRequest(url);  
  3. navigateToURL(request,"_blank"); 

但是这个方法很郁闷就是页面切换总是弹出新的页面,而不是只变换url

3、也是我采用的方法,就是引用flash中的importflash.external.ExternalInterface这个接口,他能提供像jsp中window.location.href方法一样方便,Flex页面跳转主要代码为:

 
 
  1. ExternalInterface.call("function()  
  2. {window.location.href='http://localhost:8080/Flex_J2eeDemo/bin/Welcome.html';}  
  3.  
  4. ");  

 

4、使用组件技术,把不通的页面做成component,然后通过TabNavigator等进行切换,通过使用state实现跳转。

最后总结下吧:在Flex中,根本就没有页面的概念,有的只有状态,Flex是通过改变不同的状态在我们的Application中实现不同页面的平滑变换。目前已有人提出使用"栈"的"后进先出"的思想等等方法来实现,当然还有其他的方法,但是都需要我们的不断探索、挖掘。

转载于:https://www.cnblogs.com/dynasty/archive/2012/02/25/2367564.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Expo 框架可以使用 React Navigation 库实现页面跳转。 1. 首先,在终端中使用以下命令安装 React Navigation 库: ``` npm install @react-navigation/native ``` 2. 安装所需的依赖: ``` expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view ``` 3. 接着,在 App.js 文件中引入所需的组件: ```javascript import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; ``` 4. 在 App.js 文件中创建 StackNavigator: ```javascript const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } ``` 5. 创建两个屏幕组件 HomeScreen 和 DetailsScreen: ```javascript function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); } function DetailsScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> <Button title="Go to Home" onPress={() => navigation.navigate('Home')} /> </View> ); } ``` 6. 在 HomeScreen 组件中添加一个按钮,点击后跳转到 DetailsScreen 组件,同时在 DetailsScreen 组件中添加一个按钮,点击后返回 HomeScreen 组件。 这样就可以使用 Expo 和 React Navigation 实现页面的跳转了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值