前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter(五)--Navigator&页面传值Flutter(五)--Navigator&页面传值

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

作者头像
用户8893176
发布2021-08-09 14:16:57
2.2K0
发布2021-08-09 14:16:57
举报
文章被收录于专栏:小黑娃Henry小黑娃Henry

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

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

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

1,构建路由跳转

  • 该builder方法中可以携带参数
  • push、pop都可以携带对象(参数、方法统称为对象),而pop所携带的参数类型是Future
  • push模式
代码语言:javascript
复制
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模式
代码语言:javascript
复制
  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中任意位置调用;
代码语言:javascript
复制
return MaterialApp(
      title: 'Demo',
      routes: {
        '/back': (context) => Navigator.of(context).pop(),
      }
)
//任意位置调用:
Navigator.pushNamed(context, '/back');
  • 在Navigation初始化时设置.
代码语言:javascript
复制
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')

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019/4/28 下,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 和iOS的NavigationController原理相同,都是使用堆栈的原理来管理页面。
  • 在组件里可以使用Navigator.of(content)来获得父组件里的导航器
  • 有两种方式来实现路由跳转
    • 1,构建路由跳转
      • 2,命名路由跳转
        • 如果有任何问题欢迎留言讨论。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档