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

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

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

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

1,构建路由跳转

该builder方法中可以携带参数

push、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 {
                final va = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => _PopPage()
                ));
                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,命名路由跳转


//在app最顶端的组件MaterialApp中设置,一般做一些通用跳转,不能传一些动态的参数
return MaterialApp(
      title: 'Demo',
      routes: {
        '/back': (context) => Navigator.of(context).pop(),
      }
)
//任意位置调用:
Navigator.pushNamed(context, '/back');
    
    原文作者:刘恒_8ce6
    原文地址: https://www.jianshu.com/p/66d3d6c5c473
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞