专栏首页小黑娃HenryFlutter(五)--Navigator&页面传值Flutter(五)--Navigator&页面传值

Flutter(五)--Navigator&页面传值Flutter(五)--Navigator&页面传值

和iOS的NavigationController原理相同,都是使用堆栈的原理来管理页面。

在组件里可以使用Navigator.of(content)来获得父组件里的导航器

有两种方式来实现路由跳转

1,构建路由跳转

  • 该builder方法中可以携带参数
  • push、pop都可以携带对象(参数、方法统称为对象),而pop所携带的参数类型是Future
  • push模式
Widget build(BuildContext context) {
      return Container(
        child: RaisedButton(
          child: Text('push'),
          onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (content) {
            return deee(str: 'demo');
          },
      )),
    ),
  );
}
    

class deee extends StatelessWidget {
  final Sting str;
  
  //带参数的组件初始化方式
  const _ListTodoDetail({Key key,@required this.str}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text('${this.str}'),
        ),
    );
  }
}
  • pop模式
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
              child: Text('push'),
//pop回来的值类型为Future,必须使用await来获取,而await必须在async异步线程中使用
              onPressed: () async {
                Future va = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => _PopPage()
                ));
          //输出:we are coming'
                print('$va');
            }),));
  }
}

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text('pop'),
        ),
      body: Center(
        child: Center(
          child: RaisedButton(
              child: Text('pop'),
              onPressed: () => Navigator.of(context).pop('we are coming'),
            ),)));
  }

2,命名路由跳转

  • 在MaterialApp中设置,一般做一些通用跳转,不能传一些动态的参数;
  • 可以在app中任意位置调用;
return MaterialApp(
      title: 'Demo',
      routes: {
        '/back': (context) => Navigator.of(context).pop(),
      }
)
//任意位置调用:
Navigator.pushNamed(context, '/back');
  • 在Navigation初始化时设置.
Navigator(
        key: _navigatorKey,
        initialRoute: 'signup/username',
        onGenerateRoute: (settings) {
          WidgetBuilder builder;
          switch (settings.name) {
            case 'signup/username':
              builder = (_) => _UsernamePage();
              break;
            case 'signup/password':
              builder = (_) => _PasswordPage();
              break;
    );
    }
       return MaterialPageRoute(builder: builder, settings: settings);
        },
    )
    //在当前navigation下任意位置调用:
    Navigator.of(context).pushNamed('signup/password')

如果有任何问题欢迎留言讨论。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter路由详解一、什么是路由二、Flutter路由的详细使用

    【声明:】本文是作者AWeiLoveAndroid原创,版权归作者 AWeiLoveAndroid 所有,侵权必究。本文首发在公众号Flutter那些事。如若转...

    AWeiLoveAndroid
  • 两分钟带你掌握Flutter的路由与导航

    在这篇文章中,将带着大家一起认识什么是Flutter的路由与导航,如何完成不同页面跳转?,如何获取路由跳转的返回记过?,以及如何跳转到其他APP?

    CrazyCodeBoy
  • 【技术创作101训练营】Flutter Routes 路由应用与封装小结

    因 PPT 超过最大允许上传大小,因此上传为 PDF 格式,同时为 PPT 中制作了一些 GIF 图,在演讲稿中展示;各位老师辛苦了!

    阿策小和尚
  • Flutter路由管理和页面参数的传递(源码分析)

    上一篇 Flutter路由管理和页面参数的传递(获取&返回) 文章中我们讲述了这么用代码实现 Flutter 中页面参数的传递,这一篇我们用源码分析一下 Nav...

    静默加载
  • Flutter开发-路由

    一个route是一个屏幕或页面的抽象,Navigator是管理route的Widget。

    剑行者
  • 从零开始的Flutter之旅: Navigator

    这篇文章是从零开始系列的第五期,前面我们讲到了Widget与结合数据共享的Provider处理。

    Rouse
  • 【Flutter 专题】78 图解 Android Native 集成 FlutterBoost 小尝试 (一)

    和尚前几天刚将历史项目升级至 AndroidX 并接入 Flitter Module,接下来和尚准备采用 flutter_boost 进行 Nati...

    阿策小和尚
  • 【Flutter 专题】09 页面间小跳转 (一)

    和尚最近在抽时间学习 Flutter,从零开始,一步一步走的都很艰难,前几天搭了一个基本的【登录】页面,现在学习下一步,页面之间的跳转;今天和尚整理...

    阿策小和尚
  • Flutter布局基础——页面导航和返回

    说到导航,最常见就是类似于iOS中导航控制器的push和pop效果,同样Flutter中也有类似的效果,使用的就是Navigator组件。

    莫空9081
  • Flutter开发之路由与导航的实现

    如果说构成视图元素的基本单位是组件,那么构成应用程序的基本单位就是页面。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,是技术框架需要考虑...

    砸漏
  • [译]Flutter学习笔记:BottomNavigationBar实现多个Navigation

    最近我研究了一下Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮时,Flutter会重新build,从而导...

    JarvanMo
  • Flutter中如何实现无Context跳转详解

    在日常的项目开发中,我们一般push一个新页面是用上面的方法的,利用Navigator.of(context)来进行push或者pop操作。

    砸漏
  • 【Flutter 专题】10 页面间小跳转 (二)

    和尚前两天尝试了一下 Flutter 中的页面跳转,主要时通过 Navigator 相关的 push 和 pop 方法进行页面跳转和基本传参,很方便...

    阿策小和尚
  • 再谈路由与导航,详谈Flutter是如何实现页面切换的

    如果说 UI 框架的视图元素的基本单位是组件,那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,我们需要有一...

    拉维
  • Flutter “跳转页面”(一)

    “跳转页面”为啥加双引号,其实所谓的跳转页面可能和以前认识的不太一样。因为在Flutter里,所有能看到的东西一般都是widget,但是,没有说那个app是由一...

    坑吭吭
  • Flutter中的路由与跳转

    在前一篇的文章我们学习了ListView和GridView的用法,我们可以使用new 方式和ListView.builder()、ListView.custom...

    flyou
  • Flutter 1.22 正式发布

    我们很高兴推出最新版本的Flutter,它广泛支持iOS 14和Android11。Flutter 1.22在以前版本的基础上构建,使开发人员能够从一个代码库为...

    老孟Flutter
  • Flutter中如何使用WillPopScope

    老孟导读:在Flutter中如何实现点击2次Back按钮退出App,如何实现App中多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你...

    老孟Flutter
  • Flutter中如何使用WillPopScope的示例代码

    WillPopScope用于处理是否离开当前页面,在Flutter中有多种方式可以离开当前页面,比如AppBar、CupertinoNavigationBar上...

    砸漏

扫码关注云+社区

领取腾讯云代金券