Flutter 08:fluro路由的使用

1,171 阅读1分钟

官网github地址

配置Routes

新建routes.dart文件,把路由的配置都放在这里

import 'package:fluro/fluro.dart';
import 'package:flutter_bee/routes/router_handler.dart';

class Routes{
  //根目录
  static const String root = '/';
  //文章详情页
  static const String articleDetail = '/articleDetail';
  
  //配置
  static void configureRoutes(Router router){
    //404情况
    router.notFoundHandler = page404Handler;
    //文章详情页
    router.define(articleDetail, handler: articleDetailHandler);
  }
} 

配置handler

新建router_handler.dart文件,把路由的handler都放这里,各个页面需要的参数添加上,分发到对应的页面上

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_bee/pages/404_page.dart';
import 'package:flutter_bee/pages/article_detail_page.dart';

//文章详情页
Handler page404Handler =  Handler(
  handlerFunc:(BuildContext context, Map<String,List<String>> params){
    //print('ERROR====>ROUTE WAS NOT FONUND!!!');
    return Page404();
  }
);
//文章详情页
Handler articleDetailHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params){
    String title = params['title'].first;
    String url = params['url'].first;
    return ArticleDetailPage(title: title, url: url);
  }
);

定义总的router

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

main中添加上router

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

class BeeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    //配置路由
    final router = Router();
    Routes.configureRoutes(router);
    Application.router = router;
    
    return Container(
      child: MaterialApp(
        title: '路由学习',
        debugShowCheckedModeBanner: true,
        //路由
        onGenerateRoute: Application.router.generator, 
        home: IndexPage(),
      ),
    );
  }
}

调用的地方

Application.router.navigateTo(
    context, 
    '/articleDetail?title=${Uri.encodeComponent('点个Star')}&url=${Uri.encodeComponent(YStrings.github)}',
    transition: TransitionType.inFromRight
);

注意:参数使用Uri.encodeComponent处理一下。页面的动画可以使用transition设置一下,不然安卓是从下面出来的