路由与路由管理、fluro
路由管理概念
-
路由 router 就是路由页面,在移动开发中通常指页面(Page), Route 在 Android 中通常指一个 Activity, 在 iOS 中指一个 ViewController。
-
所谓路由管理,就是管理页面之间如何跳转,通常也可被成为导航管理。Flutter 中的路由管理和原生开发类似,无论是 Android 还是 iOS, 导航管理都会维护一个路由栈。路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作,而路由管理主要是指如何来管理路由栈。
flutter原生路由管理
1、PageRoute、MaterialPageRoute
- PageRoute 类是一个抽象类,表示占有整个屏幕空间的一个模态路由页面。它还定义了路由以及路由构建以及切换时过度动画的相关接口和属性。
- MaterialPageRoute 继承自 PageRoute 类, materialPageRoute 是 Material组件库提供的组件,它可以针对不同平台,实现与平台页面切换动画风格一致的路由切换动画。
- 如果以想自定义路由切换动画,可以自己继承 PageRoute 来实现。
MaterialPageRoute 的常见属性:
MaterialPageRoute( {
//1、builder: 是一个 WidgetBuilder 类型的回调函数,它的作用是构建路由页面的具体内容,返回值是一个widget。我们通常要实现此回调,返回新路由的实例。
WidgetBuild builder,
//2、setting: 包含路由的配置信息,比如路由名称、是否初始路由(首页)
RouteSettings settings,
//3、maintainState: 默认情况下,当入栈一个新路由时,原来的路由仍然会保存在内存中,如果想在路由没用的时候释放其所占用的所有资源,可以设置 maintainState 为 false。
bool maintainState = true,
//4、fullscreenDialog 表示新的路由页面是否是一个全屏的模态对话框。
// iOS中,如果 fullscreenDialog 为 true, 新页面将会从屏幕底部划入(不是水平方向)。
bool fullscreenDialog = false
} )
2、Navigator
1、Navigator 是一个路由管理的组件,它提供了打开和退出路由页面的方法。
2、Navigator 通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。
3、Navigator 提供了一系列方法来管理路由栈,常用方法如下:
(1) Future push( BuildContext context, Route route ) ===> 将给定的路由入栈(打开新页面),返回值是一个 Future 对象,用以接受新路由出栈(关闭)时的返回数据。
(2)bool pop( BuildContext context, [result] ) ===> 将栈顶路由出栈, result 为页面关闭时返回给上一个页面的数据。
(3) Navigator 还有许多其他方法,如 Navigator.replace、Navigator.popUntil 等Navigator.push(BuildContext context, Route route) 等价于 Navigator.of(context).push(Route route)。
# 跳转到新的路由页面
Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewRoute();
}));
# 从新的路由页面跳出
Navigator,pop(result);
2、普通路由跳转以及路由传值
1、普通路由跳转新页面
# 跳转到新的路由页面, 第二个参数就是路由页面对象。
Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewRoute();
}));
2、普通路由回退
# 从新的路由页面跳出
Navigator,pop(); # Navigator.of(context).pop();
3、入栈时路由传值
# 通过给新的路由页面直接赋值的方式传参即可。
Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewRoute( id: 1, name: 'zhangsan' );
}));
4、出栈时路由传值
(1) 需要先获得入栈是否的返回值对象。
var result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewRoute( id: 1, name: 'zhangsan' );
}));
(2)通过 await 获取到页面退出时候携带的参数。
print('路由返回携带的参数值: $result');
代码实现:
#测试代码
# main.dart 实现路由跳转到 secondController 页面
/*
* @Description:
* @Version: 1.0
* @Autor: in hengqi by mengze
* @Date: 2021-05-12 10:18:23
* @LastEditors: in hengqi by mengze
* @LastEditTime: 2021-05-13 15:02:21
*/
import "package:flutter/material.dart";
import 'package:hello_flutter/SecondController.dart';
void main() {