使用Fluro实现Flutter界面跳转

练习界面跳转以及回传值

---

  这个Fluro的使用文章有不少，但是说实话看不懂。不知道在说什么，看完了也不知道怎么用。还好人家作者提供了示例。theyakka/fluro的Github地址，下个示例耽误不了多长时间，就知道咋使用了。而且人家跳转动画都是给写好的，这点挺好的省的自己研究去写了。

说明

  整个练习总共就下面就四个文件，因为dart的静态变量不知道啥原因取不到值。所以这里参考示例将路由的配置单独拎出个文件。

文件名	作用
main.dart	用来启动程序和初始化路由配置
page_one.dart	第一个界面
page_two.dart	第二个界面
routes.dart	路由的配置类

配置路由

  在routes.dart文件中配置路由，这里需要注意的事首页一定要用“/”配置，其它页无所谓。

import 'package:fluro/fluro.dart';
import 'package:ui_test_no4/page_one.dart';
import 'package:ui_test_no4/page_two.dart';

class Routes {
  static Router router;
  static String page1 = '/';
  static String page2 = '/page2';

  static void configureRoutes(Router router) {
    router.define(
        page1, handler: Handler(handlerFunc: (context, params) => Page1()));
    router.define(
        page2, handler: Handler(handlerFunc: (context, params) {
      var message = params['message']?.first;//取出传参
      return Page2(message);
    }));
    Routes.router = router;
  }
}

  router.define作用相当于注册页面，这个方法有两个参数：

参数	作用
routePath	相当于跳转的链接
handler	用来获取传参和创建界面

  在上面配置路由的代码中，有这么一段代码var message = params['message']?.first;，这块是固定写法，取参数就这么取就对了。这个代码在练习里的作用就是，第一个界面传递一个参数名为message的参数给第二个界面。

设置第一个界面

  这个界面用来传递一个值给第二个界面，当从第二个界面返回时显示回传值。page_one.dart中的代码如下：

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:ui_test_no4/routes.dart';
import 'dart:convert';

///第一个界面
class Page1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => Page1State();
}

class Page1State extends State<Page1> {
  String message = '一';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个页面'),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.chevron_right),
              onPressed: () => intentTo(context)
          )
        ],
      ),
      body: Center(
          child: Text(message)
      ),
    );
  }

  ///跳转到第二个界面
  intentTo(BuildContext context) {
    ///字符串编码
    var json = jsonEncode(Utf8Encoder().convert('来自第一个界面'));
    Routes.router.navigateTo(
        context, '${Routes.page2}?message=$json',//跳转路径
        transition: TransitionType.inFromRight//过场效果
    ).then((result) {//回传值
      if (result != null) {
        message = result;
      }
    });
  }
}

  跳转这很容易理解，请看intentTo这个方法。为了看的清晰我把跳转的功能代码单独放到了这个方法中。参数转码的原因是这个库在拼接链接的时候不支持中文字符（除了数字字母挺多都不支持）。

设置第二个界面

  第二个界面就一个文本加一个按钮，文本显示传递过来的值。点击按钮返回到上一个界面，并向第一个界面返回一条文字。page_two.dart代码如下：

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

///第二个界面
class Page2 extends StatelessWidget {
  final String message;

  const Page2(this.message);

  @override
  Widget build(BuildContext context) {
    var list = List<int>();
    ///字符串解码
    jsonDecode(message).forEach(list.add);
    final String value = Utf8Decoder().convert(list);
    return Scaffold(
        appBar: AppBar(
          title: Text('第二个页面'),
        ),
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(value),
                RaisedButton(
                    onPressed: () => Navigator.pop(context, '来自第二个界面'),
                    child: Text('返回上一个界面')
                )
              ],
            )
        )
    );
  }
}

设置启动

  在主函数初始化路由的配置。main.dart代码如下：

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

///启动
void main() {
  ///初始化并配置路由
  final router = new Router();
  Routes.configureRoutes(router);
  runApp(
      MaterialApp(
          onGenerateRoute: Routes.router.generator
      )
  );
}

运行效果

  最后运行就是下面这个效果。