fluro(带参数传递等) 使用看这篇文章就可以了

---

话不多说,这篇文章将会涉及技术面如下:

1. 基本配置
2. 简单的push
3. 带多个字符串参数的push,及接收参数
4. 带多个Model参数的push,及接收参数
5. 简单的pop
6. 带参数的pop
7. 多级pop
8. 指定界面的pop
9. pop到根界面

使用Fluro之前需要先在pubspec.yaml文件中添加Fluro依赖，如下所示。

dependencies:
 fluro: "^1.6.3"

成功添加Fluro库依赖后，就可以使用Fluro进行应用的路由管理与导航开发了。为了方便对路由进行统一的管理，首先需要新建一个路由映射文件，用来对每个路由进行管理。如下所示，是路由配置文件route_handles.dart的示例代码。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_app_fluro/LastPage.dart';
import 'package:flutter_app_fluro/ThirdPage.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';
import 'dart:convert' as convert;
import 'HomePage.dart';
import 'Settings.dart';
import 'WebViewUrlPage.dart';

// 根目录
var rootHandler =
    Handler(handlerFunc: (BuildContext context, Map params) {
  return HomePage();
});

// 网页加载 - 示例：传多个字符串参数
var webViewHandler =
    Handler(handlerFunc: (BuildContext context, Map params) {
  String title = params['title']?.first;
  String url = params['url']?.first;
  return WebViewUrlPage(
    title: title,
    url: url,
  );
});



var thirdHandler =
    Handler(handlerFunc: (BuildContext context, Map params) {
  return ThirdPage();
});


// 设置页 - 示例：不传参数
var settingHandler =
Handler(handlerFunc: (BuildContext context, Map params) {
  return Settings();
});

// 最后一个页面 - 示例：传多个model参数
var lastHandler =
    Handler(handlerFunc: (BuildContext context, Map params) {
  LoginModelEntity model1 =
      LoginModelEntity.fromJson(convert.jsonDecode(params['model1'][0]));
  LoginModelEntity model2 =
      LoginModelEntity.fromJson(convert.jsonDecode(params['model2'][0]));

  return LastPage(model1: model1, model2: model2);
});

完成基本的路由配置后，还需要一个静态的路由总体配置文件，方便我们在路由页面中使用。如下所示，是路由总体配置文件Routes.dart的示例代码。

// 配置路径Route
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_app_fluro/NoRoutePage.dart';
import 'route_handler.dart';

class Routes {
  // 路由管理
  static Router router;

  static String root = '/'; // 根目录
  static String setting = '/setting'; // 设置页
  static String webView = '/webView'; // 网页加载
  static String wxSharePay = '/wxSharePay'; // 测试model传参
  static String third = '/thirdPage'; // 测试model传参
  static String last = '/lastPage'; // 测试model传参

  // 配置route
  static void configureRoutes(Router router) {
    // 未发现对应route
    router.notFoundHandler = Handler(handlerFunc: (BuildContext context, Map params) {
      print('!!!!!!!!route not found!!!!!!!!!');
      return NoRoutePage();
    });

    router.define(root, handler: rootHandler); // 根目录
    router.define(setting, handler: settingHandler); // 设置
    router.define(webView, handler: webViewHandler); // 网页加载
//    router.define(wxSharePay, handler: wxSharePayHandler); // 测试model传参
    router.define(third, handler: thirdHandler); // 第三页
    router.define(last, handler: lastHandler); // 最后一页

  }

  // 对参数进行encode，解决参数中有特殊字符，影响fluro路由匹配
  static Future navigateTo(BuildContext context, String path, {Map params, TransitionType transition = TransitionType.native}) {
    String query =  "";
    if (params != null) {
      int index = 0;
      for (var key in params.keys) {
        var value = Uri.encodeComponent(params[key]);
        if (index == 0) {
          query = "?";
        } else {
          query = query + "\&";
        }
        query += "$key=$value";
        index++;
      }
    }
    print('我是navigateTo传递的参数：$query');

    path = path + query;
    return router.navigateTo(context, path, transition:transition);
  }
}

上面代码中用到了几个页面,如下:

HomePage
WebViewUrlPage
ThirdPage
Settings
LastPage

这些界面建起来,也是为了测试用的,流程如下

image.png

HomePage 代码如下

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

import 'Routes.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("home"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            String title = "我是测试网页";
            String url = "www.apple.com";
            Map params = Map();
            params['title'] = title;
            params['url'] = url;
//            Routes.navigateTo(context, Routes.third);
            Routes.navigateTo(context, Routes.webView,params: params);
          },
          child: Text("home"),
        ),
      ),
    );
  }
}

WebViewUrlPage 代码如下

import 'package:flutter/material.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';
import 'dart:convert' as convert;
import 'Routes.dart';
class WebViewUrlPage extends StatefulWidget {
  String title;
  String url;
  WebViewUrlPage({this.title,this.url});


  @override
  _WebViewUrlPageState createState() => _WebViewUrlPageState();
}

class _WebViewUrlPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){


            Routes.navigateTo(context, Routes.third);

          },
          child: Text(widget.url),
        ),
      ),
    );
  }
}

ThirdPage 代码如下

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

import 'Routes.dart';
class ThirdPage extends StatefulWidget {
  @override
  _ThirdPageState createState() => _ThirdPageState();
}

class _ThirdPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("third"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            Routes.navigateTo(context, Routes.setting).then((value) => print("third page value is $value"));
          },
          child: Text("third Page"),
        ),
      ),
    );
  }
}

Settings 代码如下

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'dart:convert' as convert;
import 'Routes.dart';
import 'login_model_entity.dart';
class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("setting"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            LoginModelEntity modelEntity1 = LoginModelEntity();
            modelEntity1.code = "100";
            modelEntity1.ts = "11111";
            modelEntity1.msg = "success";

            LoginModelEntity modelEntity2 = LoginModelEntity();
            modelEntity2.code = "400";
            modelEntity2.ts = "22222";
            modelEntity2.msg = "错误";


            String jsonString1 = convert.jsonEncode(modelEntity1);
            String jsonString2 = convert.jsonEncode(modelEntity2);


            Map params = Map();
            params["model1"] = jsonString1;
            params['model2'] = jsonString2;

            Routes.navigateTo(context, Routes.last,params: params).then((value) => print("value is $value"));

          },
          child: Text("setting"),
        ),
      ),
    );
  }
}

LastPage 代码如下

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';

import 'Routes.dart';
class LastPage extends StatefulWidget {
  LoginModelEntity model1;
  LoginModelEntity model2;
  LastPage({this.model1,this.model2});
  @override
  _LastPageState createState() => _LastPageState();
}

class _LastPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${widget.model1.msg} + ${widget.model1.code} + ${widget.model1.ts}"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
//            Navigator.of(context)..pop(100)
//              ..pop(200)
//              ..pop();


//            Navigator.of(context).popUntil(ModalRoute.withName(Routes.webView));//这个会报错
//            Navigator.of(context).popUntil(ModalRoute.withName(Routes.setting));
//            Navigator.of(context).popUntil(ModalRoute.withName(Routes.third));
            Navigator.of(context).popUntil(ModalRoute.withName(Routes.root));

          },
          child: Text("${widget.model2.msg} + ${widget.model2.code} + ${widget.model2.ts}"),
        ),
      ),
    );
  }
}

对应该的还有model代码,如下

class LoginModelEntity {
  String msg;
  String code;
  String ts;

  LoginModelEntity({this.msg, this.code, this.ts});

  LoginModelEntity.fromJson(Map json) {
    msg = json['msg'];
    code = json['code'];
    ts = json['ts'];
  }

  Map toJson() {
    final Map data = new Map();
    data['msg'] = this.msg;
    data['code'] = this.code;
    data['ts'] = this.ts;
    return data;
  }
}

现在可以开心的测试了,效果如下:

gif5新文件.gif

结尾

需要源码的话，请留言吧,觉得有点帮助的,请点个赞吧~~