首页 > 建站教程 > APP开发,混合APP >  Flutter笔记65:Fluro路由组件的简单使用正文

Flutter笔记65:Fluro路由组件的简单使用

这里是根据教程来的,Flutter Fluro路由组件的简单使用:

1、在pubspec.yaml引入Fluro组件:
dependencies:
  flutter:
    sdk: flutter
  fluro: ^1.7.6
2、在lib目录建立routers文件夹,同时在里面新建三个文件:application.dart、router_handler.dart、routers.dart

    application.dart静态化FluroRouter,调用FluroRouter更加方便:
import 'package:fluro/fluro.dart';

//静态化,然后就可以用Application.router来引用 FluroRouter 对象,注意  1.5版本时Router,现在改成了FluroRouter
class Application{
  static FluroRouter router;
}
    router_handler.dart处理路由传参:
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
//页面
import '../pages/second_page.dart';

Handler secondPageHandler = Handler(
  handlerFunc: (BuildContext context, Map<String,List<String>> params){
    String goodsId = params['goodsId'].first;
    return SecondPage(goodsId);
  }
);
    routers.dart是所有路由集合:
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'router_handler.dart';

class Routes{
  //根路径
  static String root = '/';

  static String secondPage = '/secondPage';

  //配置路由对象,所有的路由都在这里面
  static void configureRoutes(FluroRouter router){
    //404页面
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context, Map<String,List<String>> params){
        print('error:没有找到');
      }
    );
    router.define(secondPage, handler: secondPageHandler);
  }
}
3、再在lib目录下新建pages目录,放所有的页面,这里以两个页面为由:first_page.dart为首页,second_page.dart为跳转页面:
    first_page.dart代码,里面有Fluro跳转示例,并且还接收了跳转后的页面关闭时回传的参数:
import 'package:flutter/material.dart';
import '../routers/application.dart';
import 'package:fluro/fluro.dart';

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个页面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('进入第二个页面'),
          onPressed: (){
            _goToNextPage(context);
          },
        ),
      ),
    );
  }

    _goToNextPage(BuildContext context) async{
    String goodsId = '001';
    //Fluro跳转页面
    Application.router.navigateTo(context, '/secondPage?goodsId=$goodsId',transition: TransitionType.fadeIn).then((value){
      //从第二个页面返回传递的参数
      if(value != null){
        print(value);
      }
    });
  }
}
    second_page.dart接收了从首页传过来的参数,在关闭本页时,还回传了参数:
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import '../routers/application.dart';

class SecondPage extends StatelessWidget{

  final String goodsId;

  SecondPage(this.goodsId);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('接收到的参数:$goodsId',style: TextStyle(fontSize: 28.0, color: Colors.red),),
            RaisedButton(
              child: Text('返回上一页'),
              onPressed: (){
                Navigator.pop(context,'第二个页面返回的id:$goodsId');
              },
            )
          ],
        ),
      ),
    );
  }
}
4、main.dart利用onGenerateRoute注入路由:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import './routers/application.dart';
import './routers/routers.dart';
import './pages/first_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final router = FluroRouter();
    //给routers.dart里面的传递FluroRouter传递router实例对象
    Routes.configureRoutes(router);
    //给Application的router赋值router实例对象
    Application.router = router;

    return Container(
      child: MaterialApp(
        title: 'Fluro路由导航',
        debugShowCheckedModeBanner: false,
        //generator生成的意思,生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成路由
        onGenerateRoute: Application.router.generator,
        home: FirstPage(),
      ),
    );
  }
}