美文网首页
Flutter十四:路由及导航

Flutter十四:路由及导航

作者: Anwfly | 来源:发表于2020-06-03 11:30 被阅读0次

一、路由管理及相关概念

1. 路由

路由(Route)在移动开发中通常指页面(Page)或者屏幕(Screen),Route在Android中通常指一个Activity,在iOS中指一个ViewController。

2. 路由管理

路由管理是管理页面之间如何跳转,通常也可被称为导航管理。Flutter中的路由管理和原生开发类似,无论是Android还是iOS,导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作,而路由管理主要是指如何来管理路由栈。

二、路由基本使用

1. 页面跳转

Navigator.push将一个页面插入到栈的顶部,如下案例是点击条目跳转到WebScreen界面:

return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return WebViewScreen()
        }));
//或者
 Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return WebViewScreen();
          }));
      },
  • 跳转并关闭:
Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => MainScreen()),
        (route) => route == null);

2.页面跳转传值

页面跳转有时是要传递数据,比如点击条目跳转到WebScreen需要带标题和地址过去,或者条目跳转到商品详情页需要带id过去,通过构造函数传值过去:

return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return WebViewScreen(title: item.title, url: item.link);
        }));
      },

3. 页面跳转回传值

类似安卓中的activity回传数据
①跳转并等待接收数据

class _AnflyScreen extends State<AnflyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _navigationToBigflyScreen(context);
          },
          child: Text('跳转到Bigfly界面'),
        ),
      ),
    );
  }

  //跳转到第二个界面,必须声明为一个异步方法,因为我们要等待接收返回的数据
  void _navigationToBigflyScreen(BuildContext context) async {
    //压栈操作并等待返回数九
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => BigflyScreen()));
    //读取并显示返回值
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('$result'),
    ));
  }
}

②第二个页面带上参数出栈

class _BigflyScreen extends State<BigflyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BigflyScreen"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('点我退出'),
          onPressed: () {
            Navigator.pop(context, "我是来自BigFly界面数据");
          },
        ),
      ),
    );
  }
}

三、三方路由框架Fluro

相关文章

  • Flutter十四:路由及导航

    一、路由管理及相关概念 1. 路由 路由(Route)在移动开发中通常指页面(Page)或者屏幕(Screen),...

  • flutter 导航以及传参方式

    flutter 导航方式有基本路由和命名路由1、基本路由 ============================...

  • Flutter 简单易用的路由管理插件 fluro 简介

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可...

  • Flutter—— 路由(Route)和导航(Navigator

    Flutter的页面,怎么进行跳转的呢?通过路由和导航呢。 一、路由和导航,初认识 言简意赅! 路由(Route)...

  • 8. 【文档讲解】路由与导航

    3-14 【文档讲解】路由与导航 路由与导航 Flutter中Intent等价于什么?(Android) 在Flu...

  • flutter_boost

    混合开发要点 flutter engine复用 flutter路由和原生导航同步 flutter和原生数据传输->...

  • flutter路由

    在Flutter中,导航器管理应用程序的路由栈。将路由推入(push)到导航器的栈中,将会显示更新为该路由页面。 ...

  • Flutter路由,跳转传值

    路由 Flutter 中的路由就是页面跳转。通过 Navigator 组件管理路由导航。并提供了管理堆栈的方法。 ...

  • Flutter 路由导航

    MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget...

  • Flutter路由导航

    路由导航用来管理所有页面的跳转,需要在入口函数中定义跳转名称对应的目标页面,方法如下:class MyApp ex...

网友评论

      本文标题:Flutter十四:路由及导航

      本文链接:https://www.haomeiwen.com/subject/brhynctx.html