学习 flutter 导航实现页面切换

路由管理：通过route和navigator来管理，route负责页面抽象，主要负责创建对应的页面，接收参数，响应navigator打开和关闭。navigator则会维护一个路由管理route，route打开即入栈，route关闭即出栈，还可以直接替换栈内某一个route。

一、基本路由

无需注册，在页面切换中自己构造页面实例。关键词MaterialPageRoute

Navigator.push(context, MaterialPageRoute(builder: (context) =>newPage()));

Navigator.pop(context);

简单灵活，适用于页面不太多的应用，不足之处就是需要开发者手动去创建MaterialPageRoute实例，需要push pop配合起来。

二、命名路由

需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由。

这里可以做一个优化，设定映射规则--路由表，可以使用navigator.pushName来打开对应的页面。但是这也带来了一些隐患，如果打开一个不存在路由怎么办？解决办法是做一个拦截，然后统一跳转到一个UnknownPage。也可以将参数传给对应的页面

这样做的目的是建立字符标识和各个页面之间的映射关系，使得各页面之间完全解耦，为后期模块化大号基础

参考demo

三、基于fluro三方进行导航实战

导入fluro: ^1.7.7

001 新建一个全局类application文件。

import 'package:fluro/fluro.dart';

//路由静态化
class Application {
  static FluroRouter router;
}

002 fluro_convert_utils.dart 文件 用来适配页面传参

import 'dart:convert';
 
/// fluro 参数编码解码工具类
class FluroConvertUtils {
  /// fluro 传递中文参数前，先转换，fluro 不支持中文传递
  static String fluroCnParamsEncode(String originalCn) {
    return jsonEncode(Utf8Encoder().convert(originalCn));
  }
 
  /// fluro 传递后取出参数，解析
  static String fluroCnParamsDecode(String encodeCn) {
    var list = List<int>();
 
    ///字符串解码
    jsonDecode(encodeCn).forEach(list.add);
    String value = Utf8Decoder().convert(list);
    return value;
  }
 
  /// string 转为 int
  static int string2int(String str) {
    return int.parse(str);
  }
 
  /// string 转为 double
  static double string2double(String str) {
    return double.parse(str);
  }
 
  /// string 转为 bool
  static bool string2bool(String str) {
    if (str == 'true') {
      return true;
    } else {
      return false;
    }
  }
 
  /// object 转为 string json
  static String object2string<T>(T t) {
    return fluroCnParamsEncode(jsonEncode(t));
  }
 
  /// string json 转为 map
  static Map<String, dynamic> string2map(String str) {
    return json.decode(fluroCnParamsDecode(str));
  }
}

003 建立路由映射表

import 'dart:convert';

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

import 'package:项目/路径1/my_page.dart';


class QDDRouters {
  static String myPage = '/my';

      static void configRouters(FluroRouter router) {
        
      router.define(myPage, handler: Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
          return MyPage();
        }));
    }
}

004 使用

 //跳转详情页
   Application.router.navigateTo(context, '${QDDRouters.myPage}',transition:   TransitionType.cupertino);