Flutter 命名路由

我们可以通过创建一个新的Route，使用Navigator来导航到一个新的页面，但是如果在应用中很多地方都需要导航到同一个页面（比如在开发中，首页、推荐、分类页都可能会跳到详情页），那么就会存在很多重复的代码。在这种情况下，我们就可以使用命名路由。
优点：

名称路由是将名字和路由的映射关系，在一个地方进行统一管理
有了命名路由，我们可以通过Navigator.pushNamed() 方法来跳转到新的页面

命名路由怎么使用？
1、可以放在MaterialApp的 initialRoute 和 routes 中
initialRoute : 设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home 属性了
2、routes：定义名称和路由之间的映射关系，类型为 Map<String, WidgetBuilder>

基本代码如下：

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";
}

为了更好的管理路由映射，则单独创建一个文件进行管理
管理路由文件代码如下：

import 'package:flutter/material.dart';
import 'package:list/douban/Data/my_provider_demo.dart';
import '../Page/detail.dart';
import '../Page/about.dart';
import '../Page/un_known.dart';
import 'package:list/douban/main.dart';

class HYRouter {
    
    

  static final Map<String, WidgetBuilder> routes = {
    
    
    MyHomePage1.routeName:(context) => MyHomePage1(),// 默认界面
    Deatail.routeName:(context) => Deatail(),
    AboutPage.routeName:(context) => AboutPage(),
};
// 默认界面
  static final String initialRoute = MyHomePage1.routeName;

  // 钩子函数
static final RouteFactory generateRoute = (settings) {
    
    
  if (settings.name == Deatail.routeName){
    
    
    return MaterialPageRoute(builder: (context){
    
    
      // settings.arguments
      return Deatail();
    }
    );
  }
  return null;
};

// 错误界面
static final RouteFactory unKnownRoute = (settings)  {
    
    
  return MaterialPageRoute(builder: (context) {
    
    
    return UnknownPage();
  });
};

}

则，MaterialApp 代码也需要优化

Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: HYRouter.routes,
      onGenerateRoute:HYRouter.unKnownRoute,
      onUnknownRoute: HYRouter.unKnownRoute,
      initialRoute: HYRouter.initialRoute,
    );

跳转

 TextButton(child: Text("打开详情"),
                  onPressed: () {
    
    
                  print("点击打开详情");
                 final result = Navigator.of(context).pushNamed(Deatail.routeName,arguments: "去详情界面的数据");
                 result.then((value) {
    
    
                   print("${
      
      value}");
                 });
                  },
                )

在跳转的界面接受参数

Widget build(BuildContext context) {
    
    

    final message = ModalRoute.of(context)?.settings.arguments as String;
    }

上述就完成最基本的命名路由的注册，映射关系，以及跳转。

路由钩子 onGenerateRoute的钩子函数
加入我们有一个界面已经创建好，并且传入对应的参数message，并且已经有一个对应的构造方法，此时如果将其放到路由映射表中则不合适。因为该界面必需要求传入一个参数，这时候我们就可以使用onGenerateRoute的钩子函数
当我们通过pushNamed进行跳转，但是对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute钩子函数；
我们可以在该函数中，手动创建对应的Route进行返回；
该函数有一个参数RouteSettings，该类有两个常用的属性：
- name: 跳转的路径名称
- arguments：跳转时携带的参数

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

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

onUnknownRoute: (settings) {
    
    
  return MaterialPageRoute(
    builder: (ctx) {
    
    
      return UnknownPage();
    }
  );
},

猜你喜欢