路由管理:通过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。也可以将参数传给对应的页面
这样做的目的是建立字符标识和各个页面之间的映射关系,使得各页面之间完全解耦,为后期模块化大号基础
三、基于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);