Flutter路由导航

时间: 2020-02-23阅读: 14标签: 路由

我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。

在之前的案例(豆瓣)中,我们通过IndexedStack来管理了首页中的Page切换:

首页-书影音-小组-市集-我的

通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换

除了上面这种管理页面的方式,我们还需要实现其它功能的页面跳转:比如点击一个商品跳转到详情页,某个按钮跳转到发送朋友圈、微博的编辑页面。

这种页面的管理和导航,我们通常会使用路由进行统一管理。


一. 路由管理

1.1. 认识Flutter路由

路由的概念由来已久,包括 网络路由 、 后端路由 ,到现在广为流行的 前端路由 。

  • 无论路由的概念如何应用,它的核心是一个 路由映射表
  • 比如:名字 detail 映射到 DetailPage 页面等
  • 有了这个映射表之后,我们就可以方便的根据名字来完成路由的转发(在前端表现出来的就是页面跳转)

在Flutter中,路由管理主要有两个类:Route和Navigator

1.2. Route

Route:一个页面要想被路由统一管理,必须包装为一个Route

  • 官方的说法很清晰:An abstraction for an entry managed by a Navigator.

但是Route是一个抽象类,所以它是不能实例化的

  • 在上面有一段注释,让我们查看MaterialPageRoute来使用

/// See [MaterialPageRoute] for a route that replaces the
/// entire screen with a platform-adaptive transition.
abstract class Route<T> {
}

事实上MaterialPageRoute并不是Route的直接子类:

  • MaterialPageRoute在不同的平台有不同的表现

  • 对Android平台,打开一个页面会从屏幕底部滑动到屏幕的顶部,关闭页面时从顶部滑动到底部消失

  • 对iOS平台,打开一个页面会从屏幕右侧滑动到屏幕的左侧,关闭页面时从左侧滑动到右侧消失

  • 当然,iOS平台我们也可以使用CupertinoPageRoute

MaterialPageRoute -> PageRoute -> ModalRoute -> TransitionRoute -> OverlayRoute -> Route

1.3. Navigator

Navigator:管理所有的Route的Widget,通过一个Stack来进行管理的

  • 官方的说法也很清晰:A widget that manages a set of child widgets with a stack discipline.

那么我们开发中需要手动去创建一个Navigator吗?

  • 并不需要,我们开发中使用的MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的

  • 所以,我们在需要的时候,只需要直接使用即可

Navigator.of(context)

Navigator有几个最常见的方法:

// 路由跳转:传入一个路由对象
Future<T> push<T extends Object>(Route<T> route)

// 路由跳转:传入一个名称(命名路由)
Future<T> pushNamed<T extends Object>(
  String routeName, {
    Object arguments,
  })

// 路由返回:可以传入一个参数
bool pop<T extends Object>([ T result ])


二. 路由基本使用

1.1. 基本跳转

我们来实现一个最基本跳转:

  • 创建首页页面,中间添加一个按钮,点击按钮跳转到详情页面

  • 创建详情页面,中间添加一个按钮,点击按钮返回到首页页面

核心的跳转代码如下(首页中代码):

// RaisedButton代码(只贴出核心代码)
RaisedButton(
  child: Text("打开详情页"),
  onPressed: () => _onPushTap(context),
),

// 按钮点击执行的代码
_onPushTap(BuildContext context) {
  Navigator.of(context).push(MaterialPageRoute(
    builder: (ctx) {
      return DetailPage();
    }
  ));
}

核心的返回代码如下(详情页中代码):

// RaisedButton代码(只贴出核心代码)
RaisedButton(
  child: Text("返回首页"),
  onPressed: () => _onBackTap(context),
)
// 按钮点击执行的代码
_onBackTap(BuildContext context) {
  Navigator.of(context).pop();
}

1.2. 参数传递

在跳转过程中,我们通常可能会携带一些参数,比如

  • 首页跳到详情页,携带一条信息:a home message

  • 详情页返回首页,携带一条信息:a detail message

首页跳转核心代码:

  • 在页面跳转时,会返回一个Future

  • 该Future会在详情页面调用pop时,回调对应的then函数,并且会携带结果

_onPushTap(BuildContext context) {
  // 1.跳转代码
  final future = Navigator.of(context).push(MaterialPageRoute(
    builder: (ctx) {
      return DetailPage("a home message");
    }
  ));

  // 2.获取结果
  future.then((res) {
    setState(() {
      _message = res;
    });
  });
}

详情页返回核心代码:

_onBackTap(BuildContext context) {
  Navigator.of(context).pop("a detail message");
}

1.3. 返回细节

但是这里有一个问题,如果用户是点击右上角的返回按钮,如何监听呢?

方法一:自定义返回的按钮(在详情页中修改Scaffold的appBar)

appBar: AppBar(
  title: Text("详情页"),
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      Navigator.of(context).pop("a back detail message");
    },
  ),
),

方法二:监听返回按钮的点击(给Scaffold包裹一个WillPopScope)

  • WillPopScope有一个onWillPop的回调函数,当我们点击返回按钮时会执行

  • 这个函数要求有一个Future的返回值:

    • true:那么系统会自动帮我们执行pop操作

    • false:系统不再执行pop操作,需要我们自己来执行

return WillPopScope(
  onWillPop: () {
    Navigator.of(context).pop("a back detail message");
    return Future.value(false);
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text("详情页"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text("返回首页"),
            onPressed: () => _onBackTap(context),
          ),
          Text(_message, style: TextStyle(fontSize: 20, color: Colors.red),)
        ],
      ),
    ),
  ),
);


三. 命名路由使用

3.1. 基本跳转

我们可以通过创建一个新的Route,使用Navigator来导航到一个新的页面,但是如果在应用中很多地方都需要导航到同一个页面(比如在开发中,首页、推荐、分类页都可能会跳到详情页),那么就会存在很多重复的代码。

在这种情况下,我们可以使用 命名路由(named route)

  • 命名路由是将名字和路由的映射关系,在一个地方进行统一的管理

  • 有了命名路由,我们可以通过 Navigator.pushNamed() 方法来跳转到新的页面

命名路由在哪里管理呢?可以放在MaterialApp的 initialRoute 和 routes 中

  • initialRoute :设置应用程序从哪一个路由开始启动,设置了该属性,就不需要再设置 home 属性了
  • routes :定义名称和路由之间的映射关系,类型为Map<String, WidgetBuilder>

修改MaterialApp中的代码:

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue, splashColor: Colors.transparent
  ),
  initialRoute: "/",
  routes: {
    "/home": (ctx) => HYHomePage(),
    "/detail": (ctx) => HYDetailPage()
  },
);

修改跳转的代码:

_onPushTap(BuildContext context) {
  Navigator.of(context).pushNamed("/detail");
}

在开发中,为了让每个页面对应的routeName统一,我们通常会在每个页面中定义一个路由的常量来使用:

class HYHomePage extends StatefulWidget {
  static const String routeName = "/home";
}

class HYDetailPage extends StatelessWidget {
  static const String routeName = "/detail";
}

修改MaterialApp中routes的key

initialRoute: HYHomePage.routeName,
routes: {
  HYHomePage.routeName: (ctx) => HYHomePage(),
  HYDetailPage.routeName: (ctx) => HYDetailPage()
},

3.2. 参数传递

因为通常命名路由,我们会在定义路由时,直接创建好对象,比如HYDetailPage()

那么,命名路由如果有参数需要传递呢?

pushNamed时,如何传递参数:

_onPushTap(BuildContext context) {
  Navigator.of(context).pushNamed(HYDetailPage.routeName, arguments: "a home message of naned route");
}

在HYDetailPage中,如何获取到参数呢?

  • 在build方法中ModalRoute.of(context)可以获取到传递的参数

Widget build(BuildContext context) {
    // 1.获取数据
    final message = ModalRoute.of(context).settings.arguments;
  }

3.3. 路由钩子

3.3.1. onGenerateRoute

假如我们有一个HYAboutPage,也希望在跳转时,传入对应的参数message,并且已经有一个对应的构造方法

在HYHomePage中添加跳转的代码:

RaisedButton(
  child: Text("打开关于页"),
  onPressed: () {
    Navigator.of(context).pushNamed(HYAboutPage.routeName, arguments: "a home message");
  },
)

HYAboutPage的代码:

class HYAboutPage extends StatelessWidget {
  static const String routeName = "/about";
  final String message;

  HYAboutPage(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("关于页面"),
      ),
      body: Center(
        child: Text(message, style: TextStyle(fontSize: 30, color: Colors.red),),
      ),
    );
  }
}

但是我们继续使用routes中的映射关系,就不好进行配置了,因为HYAboutPage必须要求传入一个参数;

这个时候我们可以使用onGenerateRoute的钩子函数:

  • 当我们通过pushNamed进行跳转,但是对应的name没有在routes中有映射关系,那么就会执行onGenerateRoute钩子函数;

  • 我们可以在该函数中,手动创建对应的Route进行返回;

  • 该函数有一个参数RouteSettings,该类有两个常用的属性:

    • name: 跳转的路径名称

    • arguments:跳转时携带的参数

onGenerateRoute: (settings) {
  if (settings.name == "/about") {
    return MaterialPageRoute(
      builder: (ctx) {
        return HYAboutPage(settings.arguments);
      }
    );
  }
  return null;
},

3.3.2. onUnknownRoute

如果我们打开的一个路由名称是根本不存在,这个时候我们希望跳转到一个统一的错误页面。

比如下面的abc是不存在有对应的页面的

  • 如果没有进行特殊的处理,那么Flutter会报错。

RaisedButton(
  child: Text("打开未知页面"),
  onPressed: () {
    Navigator.of(context).pushNamed("/abc");
  },
)

我们可以创建一个错误的页面:

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("错误页面"),
      ),
      body: Container(
        child: Center(
          child: Text("页面跳转错误"),
        ),
      ),
    );
  }
}

并且设置onUnknownRoute

onUnknownRoute: (settings) {
  return MaterialPageRoute(
    builder: (ctx) {
      return UnknownPage();
    }
  );
},
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8346

JS是如何实现前端路由的 JS实现原生路由

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。

vue-router的简易实现

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。

vue 路由过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

前端路由Hash与History模式

现代前端项目多为单页Web应用(SPA),在单页Web应用中路由是其中的重要环节。SPA 是 single page web application 的简称,译为单页Web应用。简单的说 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成

react-router 在路由切换时进行提示

在有正在编辑的内容未保存时,发生了路由切换,此时需要给出一些提示,并由用户控制是否进行跳转。在react-router进行路由管理时,可以使用 Prompt 组件实现此功能

Flutter页面切换(命名路由)

使用基本路由相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由,会导致大量的重复代码,此时使用命名路由会非常方便

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

优化vue-router路由管理

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理化繁为简、逐渐自动化的一个过程,希望能引发大家的思考;

Flutter 如何在切换页面的时候,把参数传到下一个页面?

讲解Flutter 路由传递,这是一个大的概述图。当 app 的页面变多的时候,就需要考虑页面传值的问题,在第一个页面如何把数据传递到 另外一个页面?最最基本的方法是在打开新页面,传递参数过去。但当 app 变得很大或者功能变多

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广