Flutter 路由跳转 fluro

网上很多讲解fluro的，但是由于版本的更替多多少少都有点变化，本人记录的fluro版本为：

fluro: ^1.7.8

1.新建application.dart

import 'package:fluro/fluro.dart';

class Application{
  static FluroRouter  router;
}

2.新建route_handlers.dart文件

//不传参
var rootHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return LoginPage();//跳转界面
});

//传参
var secondHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
//暂时挖坑 参数从何而来 后面添上
  String goodsId = params['goodsId'].first;
  String goodsName = params['goodsName'].first;
  String mList = params['goodsList'].first;
  return SecondPage(
    id: goodsId,
    name: goodsName,
    goodsList: mList,
  );
})

3.新建routes.dart

//名称路径随便写前提是是要自己要懂

class Routes { //配置类
  static String root = '/'; //根目录
  static String secondPage = '/pages/second'; //详情页面
  //静态方法
  static void configureRoutes(FluroRouter router){//路由配置
    //找不到路由
    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext context,Map<String,List<String>> params){
          print('ERROR====>ROUTE WAS NOT FONUND!!!');
        }
    );
    //整体配置
    router.define(root, handler: rootHandler);
    router.define(secondPage, handler: secondHandler);
  }

}

4.初始化配置

main.dart中代码

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

AppComponent中代码

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_renting/routers/application.dart';
import 'package:flutter_renting/routes.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AppComponent extends StatefulWidget {
  @override
  _AppComponentState createState() => _AppComponentState();
}

class _AppComponentState extends State<AppComponent> {
  _AppComponentState() {
    final router = FluroRouter(); //路由初始化
    Routes.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return  MaterialApp( title: "title", 
        theme: ThemeData( primarySwatch: Colors.green, ),
       onGenerateRoute: Application.router.generator, );//这一步是重点 配置上
  }
}

如何使用

1. 无参数跳转

Application.router.navigateTo(context, Routes.secondPage);

//Routes.secondPage 是第二步里面的东西

2. 有参数跳转填坑

Application.router.navigateTo(context,
    +"${Routes.secondPage}?goodsId=id00303"
        "&goodsName=${Uri.encodeComponent('黄瓜')}"
//额外知识 如果要穿的内容是汉字 需要这样传 Uri.encodeComponent('黄瓜')
        "&goodsList=${convert.jsonEncode(date)}");

暂时只用到这些，后面会后续补充，有问题还需大家指教。

Flutter 路由跳转 fluro

猜你喜欢