Flutter实现页面路由及404路由拦截

为什么要使用路由

在之前我们的代码中,页面跳转使用的代码如下所示:

 Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => LoginPage()),
);

在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷:

  • 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式。
  • 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变。
  • 权限控制不方便:假设某些页面需要授权后才可以访问,需要在各个地方插入权限判断。

Flutter路由介绍

首先说一下,本篇的路由介绍是 Flutter 1.0的实现方式,Flutter 2.0对路由做了很大的改动,使用了声明式方式重构了路由,使用起来会更为复杂。在 Flutter 的 MaterialApp提供了路由配置参数,当使用路由配置后,MaterialApp 的构造形式如下所示:

return MaterialApp(
  //其他参数...
  navigatorKey: //全局导航状态Key,
  onGenerateRoute: //路由改变响应方法,
  initialRoute: //初始化路由路径,
);
  • navigatorKey是一个GlobalKey<NavigatorState>对象,用于全局存储导航的状态。
  • onGenerateRoute为一个路由拦截器,当路由发生改变时,该方法会被调用,从而可以根据路由参数返回不同的页面,或者进行路由拦截。
  • initialRoute为初始化路由路径,一般为启动页或首页的路径。

页面结构与逻辑

为了演示路由的使用,我们使用了四个页面:

  • AppHomePage :首页,与之前的章节的页面框架一样,路由路径为“/”;
  • Splash:启动页,只有一个图片,实际使用过程可以用于加载引导页,广告或其他用途。页面停留2秒后切换到首页。
  • LoginPage:登录页,用于演示点击登录按钮通过路由切换到登录页。
  • NotFound:即404页面,当路由表中没有匹配的路径时,跳转到404页面。

这里的路由跳转分为了两种,一是从启动页跳转到首页,这种跳转不可返回的;二是正常的调整,可以点击返回按钮返回到上一级。在 Flutter 中提供不同的方法应对这两种情况。

实现关键代码

首先是路由表和路由拦截响应的实现,在 routers文件夹新建 router_table.dart 文件,代码如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../app.dart';
import '../login.dart';
import '../not_found.dart';
import '../splash.dart';

class RouterTable {
  static String splashPath = 'splash';
  static String loginPath = 'login';
  static String homePath = '/';
  static String notFoundPath = '404';

  static Map<String, WidgetBuilder> routeTables = {
    //404页面
    notFoundPath: (context) => NotFound(),
    //启动页
    splashPath: (context) => Splash(),
    //登录
    loginPath: (context) => LoginPage(),
    //首页
    homePath: (context) => AppHomePage(),
  };

  ///路由拦截
  static Route onGenerateRoute<T extends Object>(RouteSettings settings) {
    return CupertinoPageRoute<T>(
      settings: settings,
      builder: (context) {
        String name = settings.name;
        if (routeTables[name] == null) {
          name = notFoundPath;
        }

        Widget widget = routeTables[name](context);

        return widget;
      },
    );
  }
}

这里全部使用了静态属性和静态方法,是为了可以直接从过类名访问属性和方法,而无需反复构建对象。这样,路由访问的时候也可以通过类名的静态属性直接访问,可以避免拼写错误。有了这个类了后,App 的所有页面都可以通过这个类集中管理,从而避免多处维护了。

这里关键的是onGenerateRoute方法,该方法接收了一个 RouteSettings 对象,该对象会有个 name 属性包含路由路径名称,同时还有个 arguments 用于携带路由参数。可以通过这个属性来与路由表的页面进行匹配。若匹配到则返回相应的页面;若没有匹配到,则路由到404页面。同时,若需要做权限控制,也可以在这里拦截,比如定位到403页面或直接提醒无访问权限。

接下来就是改造 main.dart 文件,在构建 MaterialApp 时使用对应的理由配置:

import 'package:flutter/material.dart';
import 'routers/router_table.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GlobalKey navigationKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigationKey,
      onGenerateRoute: RouterTable.onGenerateRoute,
      initialRoute: RouterTable.splashPath,
    );
  }
}

这里会发现在 main.dart中我们无需再通过 import引入相关的页面 了,而是直接配置路由的配置属性即可。

页面路由跳转

页面路由跳转更为简便,在 Flutter 中的 NavigatorState 中分别提供了 pushNamed 方法和pushReplacementNamed 方法,前者会在导航栏有返回按钮,后者是使用路由后的页面直接替换当前页面,适用于启动页的调整。
在启动页中未来停留几秒,使用了一个定时器,在2秒后再进行跳转,实际可以用于做一些预加载资源的提示或者广告展示。

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  if (!_initialized) {
    _initialized = true;
    Timer(const Duration(milliseconds: 2000), () {
      Navigator.of(context).pushReplacementNamed(RouterTable.homePath);
    });
  }
}

普通页面的跳转直接使用 pushNamed 即可,若要返回上一级,则使用 pop 方法。pushpop方法均可以携带参数,下一篇我们再来介绍如何处理路由参数。这里我们特意加了一个错误的路由演示404跳转:

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ButtonUtil.primaryTextButton('登录', () {
        Navigator.of(context).pushNamed(RouterTable.loginPath);
      }, context),
      SizedBox(
        height: 10,
      ),
      ButtonUtil.primaryTextButton('404', () {
        Navigator.of(context).pushNamed('errorRoute');
      }, context),
    ],
  ),
),

最终运行效果如下图所示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter 路由跳转的实现示例

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • flutter 路由机制的实现

    目录 实现基础 _routeNamed _flushHistoryUpdates add push pop remove 总结 整个 flutter 应用的运行都只是基于原生应用中的一个 view,比如 android 中的 FlutterView,flutter 中的页面切换依赖于它的路由机制,也就是以 Navigator 为中心的一套路由功能,使得它能够完成与原生类似且能够自定义的页面切换效果. 下面将介绍 flutter 中的路由实现原理,包括初始化时的页面加载.切换页面的底层机制等. 实

  • Flutter路由传递参数及解析实现

    上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截.在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据.同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新.本篇将介绍这两种情形的实现. Navigator 的 push 和 pop方法 Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传

  • Flutter路由的跳转、动画和传参详解(最简单)

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter实现页面路由及404路由拦截

    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builder: (context) => LoginPage()), ); 在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷: 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式. 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变. 权限控制不方便:假设某些页面需

  • Flutter app页面路由以及路由拦截的实现

    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builder: (context) => LoginPage()), ); 在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷: 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式. 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变. 权限控制不方便:假设某些页面需

  • vue中路由验证和相应拦截的使用详解

    在web项目中,经常需要根据是否登录进行路由的验证和相应的拦截. 首先,在vuex里的store.js里边写一个存放登录状态,代码如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: false }, mutations: { // 登录 login (state, user) { state.user = user }, // 退

  • vue嵌套路由与404重定向实现方法分析

    本文实例讲述了vue嵌套路由与404重定向实现方法.分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的

  • react实现同页面三级跳转路由布局

    本文实例为大家分享了react实现同页面三级跳转路由布局的具体代码,供大家参考,具体内容如下 一级路由+布局组件: //嵌套路由小案例 布局页面一级路由 import React from 'react' import {BrowserRouter as Router, Route, Link} from 'react-router-dom' //引入路由要用的组件 import Index from './Index' //二级路由 首页 import Video from './Video'

  • Flutter使用push pop方法及路由进行导航详解

    目录 正文 准备工作 第一种导航方式 第二种导航方式 正文 在 Web/Mobile 应用程序中,导航是一个很重要的特性,因为它允许你从一个页面跳转到另一个页面. 在 flutter 应用程序中,我们可以使用 push(), pop() 方法实现导航,或者编写我们自己的路由. 准备工作 我们假设 FirstScreen 和 SecondScreen 是两个不同的类,分别在各自的 FirstScreen.dart 和 SecondScreen.dart 文件内. FirstScreen.dart

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)

    需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册或登录页面 解决 在这里通过Angular的路由守卫来实现该功能. 1. 配置路由信息 const routes = [ { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent },

  • Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • Android Flutter实现页面切换转场动画效果

    目录 前言 Hero 动画过程 Hero 基础示例 总结 前言 写了一篇基础的性能优化的内容,继续我们的动画相关的介绍.今天的主角是英雄 —— Hero 组件.Hero 组件非常适合从列表.概览页切换到详情页转场动画场合.因为可以将两个页面的组件串起来动画,体验上会觉得整个操作的连贯性非常好.下面是我们这篇要做的一个效果. 屏幕录制2021-11-09 下午9.39.49.gif Hero 动画过程 Hero 本质是是在不同的路由页面做了一个中转层,然后通过动画完成过渡,下面用4张图是官方演示的

随机推荐