flutter 路由插件fluro配置及其使用

本是古典何须时尚 2023-02-23 05:13 2阅读 0赞

### flutter 路由插件fluro配置及其使用 ###

`pubspec.yaml:`引入插件

dependencies:
      flutter:
        sdk: flutter
      fluro: "^1.6.3"

**1. 首先创建一个`router_handler.dart`文件，定义路由去到哪个部件，以及传递给该部件的参数：**

**router\_handler.dart**文件如下：

import 'pagckage:flutter/material.dart';
    //引入路由插件fluro 需要在pubspec.yaml文件中配置插件并下载才能引入
    import 'pagckage:fluro/fluro.dart';
    //引入路由跳转去到的部件
    import '../pages/user.dart';
    
    Handler userHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) { 
      //params是跳转路由url?后面传递的参数，我们需要参数里面的id值并传递给跳转到的部件内
      return User(params["id"][0]);
    });
    //下面还可以继续添加如上的路由跳转Handler
    ...

**2. 下面就是给路由命名的 `routes.dart` 文件**  
**routes.dart**文件如下：

import 'pagckage:flutter/material.dart';
    //引入路由插件fluro 需要在yml文件中配置插件并下载才能引入
    import 'pagckage:fluro/fluro.dart';
    //引入决定路由跳转去到而的部件router_handler
    import './router_handler.dart';
    //没有对应匹配路由时去的部件
    import './page_404.dart';
    
    class Routes { 
      static String root = '/';
      static String user = '/user';
      ...
      static void configureRoutes(Router router) { 
        //notFoundHandler是匹配不到路由时执行出发的
        router.notFoundHandler = new Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params)) { 
           //这是可以定义一个404页面部件
           return Page404();
        };
        //根路由时去homeHandler部件 当然router_handler.dart里我没定义homeHandler，可自行配置
        router.define(root, handler: homeHandler);
        //user路由时去userHandler部件
        router.define(user, handler: userHandler);
        //也可以直接写路由路径
        router.define('/user/:id', handler: userHandler);
      }
    }

**3. 静态化路由：** 目的：使路由静态化  
**application.dart** 文件如下：

import 'pagckage:fluro/fluro.dart';
    class Application{ 
      static Router router;
    }

**4. 在`main.dart` 内注入路由，相当于给全局注入路由**

...
    import './routers/application.dart';
    import './routers/routes.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget { 
      //注入路由
      final router = Router();
      Router.congigureRoutes(router);
      Application.router = router;
      
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          title: 'Flutter Demo',
          onGenerataRoute: Application.router.generator, //全局注入路由
    	  ...	
        );
      }
    }

**5. 使用路由：**

InkWell(
      onTap: (){ 
         //通过Application的路由就可以跳转页面啦
         Application.router.navigateTo(context, "/user?id=${userId}")
      },
      child: ...
    )