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<String, dynamic> params) {
  return HomePage();
});

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



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


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

// 最后一个页面 - 示例：传多个model参数
var lastHandler =
    Handler(handlerFunc: (BuildContext context, Map<String, dynamic> 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<String, dynamic> 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<String, dynamic> 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<HomePage> {
  @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<String,dynamic> 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<WebViewUrlPage> {
  @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<ThirdPage> {
  @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<Settings> {
  @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<String,dynamic> 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<LastPage> {
  @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<String, dynamic> json) {
    msg = json['msg'];
    code = json['code'];
    ts = json['ts'];
  }

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

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


gif5新文件.gif

结尾

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349