flutter 路由跳转的实现示例

路由

做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面。当然,可以自己去加一个中间层来实现这些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。

Flutter路由介绍

Flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递等等。flutter里面的路由可以分成两种,一种是直接注册,不能传递参数。另一种要自己构造实例,可以传递参数。我们暂时把它们规为静态路由和动态路由。

单页面路由跳转时注意不要有两个materialapp,因为导航是依赖于这个的,有两个,就会有两个导航

一、两种路由传参方法: DetailScreen跳转的路由组件

1.直接向路由子组件构造函数传参

Navigator.push(
  context,
  MaterialPageRoute(
     builder: (context) => DetailScreen(todo: todos[index]),
   ),
 );
1.通过RouteSettings传递参数
Navigator.push(
   context,
   MaterialPageRoute(
      builder: (context) => DetailScreen(),
      settings: RouteSettings(
        arguments: todos[index],
       ),
    ),
 );

二、定义路由:

1、在 MaterialApp 中添加属性:

 initialRoute 和 routes 来定义我们的路由
new MaterialApp(
   initialRoute: '/',
   routes: {
    '/': (context) => TodosScreen(todos: todos),
    '/detail': (context) => DetailScreen(),
   },
   title: 'ssss',
);

但要注意的是:当使用 initialRoute 时,需要确保你没有同时定义 home 属性。

2、 给特定的 route 传参:

1) 定义需要传递的参数

class ScreenArguments {
 final String title;
 final String message;
 ScreenArguments(this.title, this.message);
}

2) 创建组件来获取参数

class ExtractArgumentsScreen extends StatelessWidget {
 static const routeName = '/extractArguments';
 @override
 Widget build(BuildContext context) {
  final ScreenArguments args = ModalRoute.of(context).settings.arguments;
  return Scaffold(
  );
 }
}

3) 把组件注册到路由表中

MaterialApp(
 routes: {
  ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
 },
);

4) 导航到组件

RaisedButton(
 onPressed: () {
  Navigator.pushNamed(
   context,
   ExtractArgumentsScreen.routeName,
   arguments: ScreenArguments(
    'Extract Arguments Screen',
    'This message is extracted in the build method.',
   ),
  );
 },
),

5) onGenerateRoute 提取参数

MaterialApp(
 onGenerateRoute: (settings) {
  if (settings.name == PassArgumentsScreen.routeName) {
   final ScreenArguments args = settings.arguments;
   return MaterialPageRoute(
    builder: (context) {
     return PassArgumentsScreen(
      title: args.title,
      message: args.message,
     );
    },
   );
  }
 },
);

到此这篇关于flutter 路由跳转的实现示例的文章就介绍到这了,更多相关flutter 路由跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-08-21

Flutter路由的跳转、动画和传参详解(最简单)

路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

微信小程序 页面跳转传参详解

微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

Python中字符串的修改及传参详解

发现问题 最近在面试的时候遇到一个题目,选择用JavaScript或者Python实现字符串反转,我选择了Python,然后写出了代码(错误的): #!/usr/bin/env python #-*-coding:utf-8-*- __author__ = 'ZhangHe' def reverse(s): l = 0 r = len(s) - 1 while l < r: s[l],s[r] = s[r],s[l] l += 1 r -= 1 return s 然后面试官问了两个问题: (1)

通过字节码看java中this的隐式传参详解

前言 从字节码看java中 this 隐式传参具体体现(和python中的self如出一辙,但是比python中藏得更深),也发现了 static 与 非 static 方法的区别所在! static与非static方法都是存储java的方法区.在static 方法中,没有this引用,因此无法使用当前类中所定义的变量,而非static方法则会默认传入this. 概述 this关键字,是一个隐式参数,另外一个隐式参数是super. this用于方法里面,用于方法外面无意义. this关键字一般用

python中函数传参详解

一.参数传入规则 可变参数允许传入0个或任意个参数,在函数调用时自动组装成一个tuple: 关键字参数允许传入0个或任意个参数,在函数调用时自动组装成一个dict: 1. 传入可变参数: def calc(*numbers): sum = 0 for n in numbers: sum = sum + n * n return sum 以上定义函数,使用如下: 传入多个参数, calc(1, 2, 3, 4) 30 #函数返回值 传入一个列表, nums = [1, 2, 3] calc(*nu

Android 属性动画ValueAnimator与插值器详解

Android 属性动画ValueAnimator与插值器详解 一.ValueAnimator详解: ValueAnimator是整个动画的核心,ObjectAnimator即是继承自ValueAnimator来实现. ValueAnimator更像是一个数值发生器,用来产生具有一定规律的数字,从而让调动者来控制动画的实现过程. 1.ValueAnimator的使用: ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100); val

微信小程序 页面跳转事件绑定的实例详解

微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

基于Struts文件上传(FormFile)详解

Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 <form action="/StrutsFileUpAndDown/register.do" method="post" enctype="multipart/form-data"> 名字:<input type="text" name="name" /> 头像:<input type="f

Android属性动画之ValueAnimator代码详解

属性动画通过改变一个对象的属性值来进行动画,属性动画包含了以下几个特性: 1.持续时间(Duration) 主要用来定义动画的持续时间,默认值为300ms. 2.时间插值器(Time interpolation) 指定时间变化的百分比,就是当前流逝时间除以指定的持续时间,这个可以自定义,继承Interpolator,重写getInterpolation方法. 3.重复次数和行为(Repeat count and behavior) 指定动画的执行次数和动画的重复模式 4.动画集(Animator

微信小程序 跳转传参数与传对象详解及实例代码

微信小程序 跳转传参数 传对象 微信小程序跳转传参 一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {