flutter Route路由基本用法

https://blog.csdn.net/senkai123/article/details/102948524

Flutter 命名路由、路由组、路由退出、路由堆栈

在flutter中需要进行页面跳转，也是需要用到路由Route，关键Navigator与Route，Navigator负责单元Route路由，压入和弹出，单元路由也就是我们需要跳转页面，比如HomePage（）

Navigator关键使用的4个属性

•initialRoute: 初始路由的，也就是进入APP，默认页面

•onGenerateRoute: 路由拦截器

•onUnknownRoute: 找不到页面，也就是404

•routes : 路由集合，也就在执行路由跳转的时候，会到路由集合里面的子路由进行匹配，如果匹配到那么就调整到指定页面

路由跳转方式：

1.通过路由名打开新路由页面

通过路由名称来打开新路由，可以使用Navigator 的pushNamed方法：

Future pushNamed(BuildContext context, String routeName,{Object arguments})

调用：

onPressed: () {

//不带参数

Navigator.pushNamed(context, "new_page");

//带参数，可以指定单个参数，或者多个, arguments: {}

Navigator.of(context).pushNamed("new_page", arguments: "hi");

页面承接带过来的参数

String tmp = ModalRoute.of(context).settings.arguments.toString();

2.匿名路由打开新路由页面

Navigator.push( context, MaterialPageRoute(builder: (context) {

return HomePage();

}));

传参：

final Map<String, WidgetBuilder> _routes = {

'/sign': (context, {arguments}) => SignPage(arguments: arguments),

};

接参：

class SignPage extends StatelessWidget {

final Map arguments;

SignPage({Key key, this.arguments}) : super(key: key) {

}

@override

Widget build(BuildContext context) {

String tmp2 = this.arguments.toString();

}

路由集合（路由表）与onGenerateRoute的关系

onGenerateRoute接受一个 Route 工厂函数

final RouteFactory onGenerateRoute;

路由拦截源码，从拦截到路由之后，首先从路由表中拿到路由的 builder，如果能够拿到 builder，则判断是否存在 RouteSettings，如果存在则直接通关构造函数的 arguments 传递给页面 Page Widget。本质就是按照路由名字匹配路由表，然后跳转到正确页面中

Route _routeGenerator(RouteSettings settings) {

final String name = settings.name;

final Function pageBuilder = this._routes[name];

if (pageBuilder != null) {

if (settings.arguments != null) {

// 如果透传了参数

return MaterialPageRoute(

builder: (context) =>

pageBuilder(context, arguments: settings.arguments));

} else {

// 没有透传参数

return MaterialPageRoute(builder: (context) => pageBuilder(context));

}

return MaterialPageRoute(builder: (context) => HomeContent());

}

路由的使用方式

第一个种，初始化执行路线，initialRoute -> onGenerateRoute -> onUnknownRoute，路由跳转Navigator.pushNamed(context, “secondPage”); ，之后会到onGenerateRoute ，进行路由拦截匹配，如果能正确匹配到，那么跳转到指定页面

例子：

import 'package:flutter/material.dart';

class NavigatorPage extends StatefulWidget {

@override

_NavigatorPageState createState() => _NavigatorPageState();

}

class _NavigatorPageState extends State<NavigatorPage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Navigator'),

body: Column(

children: <Widget>[

Text('Navigator的高度为infinity'),

Text('如果直接父级非最上级也是infinity会产生异常'),

Container(

height: 333,

color: Colors.amber.withAlpha(111),

child: Navigator( // Navigator

initialRoute: '/abc',

onGenerateRoute: (val) {

RoutePageBuilder builder;

switch (val.name) {

case '/abc':

builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Column(

// 并没有在 MaterialApp 中设定 /efg 路由

// 因为Navigator的特性使用nContext 可以跳转 /efg

children: <Widget>[

Text('呵呵呵'),

RaisedButton(

child: Text('去 /efg'),

onPressed: () {

Navigator.pushNamed(nContext, '/efg');

)

);

break;

case '/efg':

builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Row(

children: <Widget>[

RaisedButton(

child: Text('去 /hhh'),

onPressed: () {

Navigator.pushNamed(nContext, '/hhh');

)

);

break;

default:

builder = (BuildContext nContext, Animation<double> animation, Animation<double> secondaryAnimation) => Center(

child: RaisedButton(

child: Text('去 /abc'),

onPressed: () {

Navigator.pushNamed(nContext, '/abc');

)

);

}

return PageRouteBuilder(

pageBuilder: builder,

// transitionDuration: const Duration(milliseconds: 0),

);

onUnknownRoute: (val) {

print(val);

observers: <NavigatorObserver>[]

Text('Navigator执行寻找路由顺序'),

Text('initialRoute'),

Text('onGenerateRoute'),

Text('onUnknownRoute'),

);

}

第二个种，初始化执行路线，routes ->onUnknownRoute，路由跳转Navigator.pushNamed(context, “secondPage”);，之后会到routes 路由集合之后，能匹配到正确的路由子路由，那么就跳转到子路由中

例子：

import 'package:flutter/material.dart';

import 'package:flutter_routes/errorpage.dart';

import 'package:flutter_routes/homepage.dart';

import 'package:flutter_routes/navigator_with_result.dart';

import 'package:flutter_routes/page1.dart';

import 'package:flutter_routes/page2.dart';

import 'package:flutter_routes/page3.dart';

import 'package:flutter_routes/page4.dart';

import 'package:flutter_routes/page5.dart';

import 'package:flutter_routes/pageroutebuilderresult.dart';

import 'package:flutter_routes/splash.dart';

import 'package:flutter_routes/testpageroutebuilder.dart';

import 'package:flutter_routes/todo.dart';

import 'package:flutter_routes/welcome.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter路由',

theme: ThemeData(

primarySwatch: Colors.blue,

// 路由集合

routes: {

'/page1': (context) => Page1(),

'/page2': (context) => Page2(),

'/page3': (context) => Page3(),

'/page4': (context) => Page4(),

'/page5': (context) => Page5(),

'/todo': (context) => TodosScreen(),

'/splash': (context) => Splash(),

'/welcome': (context) => Welcome(),

'/homepage': (context) => HomePage(),

'/PageRouteBuilder': (context) => TestPageRouteBuilder(),

'/PageRouteBuilderResult': (context) => PageRouteBuilderResult(),

// 找不到路由，显示的错误页面

onUnknownRoute: (RouteSettings setting) {

String name = setting.name;

print("未匹配到路由:$name");

return new MaterialPageRoute(builder: (context) {

return new ErrorPage();

});

home: Page1(),

);

}

Page1 页面

import 'package:flutter/foundation.dart';

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {

Page1({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('page1'),

body: Center(

child: RaisedButton(

child: Text('跳转到Page2'),

onPressed: () {

// 路由跳转

Navigator.pushNamed(context, '/page2');

);

}

在实际开发过程中，建议用命名路由方式来跳转新的页面，便于维护，开发项目

路由堆栈的使用方式

1、在用这种方式路由跳转新页面的时候，是把页面放在堆栈里面，这个栈的特性就是，先进后出， Navigator.push 或者 pushNamed 实现的，每次都是把页面压入堆栈，在回退的时候会回退到上一跳页面

Navigator.of(context).pushNamed('/search');

2.如果需要清空堆栈，比如我需要直接返回首页，之前的所有路由全部干掉，堆栈清空

Navigator.of(context).pushNamedAndRemoveUntil

页面退出堆栈

Navigator.pop(context, "我是返回值"),

参考文章

https://blog.csdn.net/weixin_30512027/article/details/85334391

https://blog.csdn.net/weixin_34999505/article/details/86760606

————————————————

原文链接：https://blog.csdn.net/senkai123/java/article/details/102948524

flutter Route路由基本用法

相关推荐