Flutter Navigator&Router(导航与路由)

参考地址:https://www.jianshu.com/p/b9d6ec92926f

在我们Flutter中,页面之间的跳转与数据传递使用的是Navigator.pushNavigator.pop以及Router。也是比较简单的,我们一起来使用Navigator+Router看看如何实现下面的效果。

1.打开新页面并返回:

  • Navigator.push(打开页面)
  • Navigator.pop(退出当前页面)

Navigator.push(BuildContext context, Route<T> route)

可以将当前页面转换成Router,压入由Navigator管理的路由堆栈(the stack of routes)中

Navigator.pop(BuildContext context, [ T result ]),会将当前页面对应的RouterNavigator管理的路由堆栈中移除。

 

2.返回数据到上一级页面:

1)将要返回的数据放入到Navigator.pop

  

//退出当前页面,返回到上一级页面
void _backCurrentPage(BuildContext context) {
  print('执行了_backCurrentPage');
///只有执行了这个方法,上级页面才会收到返回的数据
  Navigator.pop(context, '我是来自SecondPage的数据');
}
  • 使用Navigator.push+async+await处理返回的数据
/// async关键字声明该函数内部有代码需要延迟执行
  ///  使用await会把延迟运算放入到延迟运算的队列(await)中。
  void _navigateSecondPage(BuildContext context) async {
    print('执行了_navigateSecondPage');
    final result =
        await Navigator.push(context, MaterialPageRoute(builder: (context) {
      return SecondPage();
    }));
    print('FirstPage收到数据:$result');
  }

 

3.替换当前路由,左上角没有返回了:

Navigator.of(context).pushReplacementNamed('/tabs');
posted @ 2019-10-15 19:24  生如逆旅,一苇以航  阅读(836)  评论(0编辑  收藏  举报