八、Flutter路由

目录
一、基本路由
二、基本路由传参
三、命名路由
四、命名路由传参
五、替换路由
六、返回到根路由

一、基本路由

跳转到Detail页面

  Navigator.of(context)
              .push(MaterialPageRoute(builder: (BuildContext context) {
            return Detail();
          }));

返回上一页面

 Navigator.of(context).pop();

二、基本路由传参

跳转到Detail页面，传参ID="88"

  Navigator.of(context)
              .push(MaterialPageRoute(builder: (BuildContext context) {
            return Detail(ID:"88");
          }));

返回上一页面

 Navigator.of(context).pop();

三、命名路由

初始化路由

import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/Detail.dart';
import 'IndexPage.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title:'路由',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.pink,
        ),
        initialRoute: '/',
        routes: {
          '/':(context)=>IndexPage(),
          '/detail':(context)=>Detail()
        },
      ),
    );
  }
}

跳转到Detail页面

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

返回上一页面

 Navigator.of(context).pop();

四、命名路由传参

定义全局路由

import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/Detail.dart';
import 'package:flutter_shop/IndexPage.dart';
 

final Map<String, Function> routes = {
  '/': (context) => IndexPage(),
  '/detail': (context) => Detail()
};

var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

初始化路由

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

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title:'路由',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.pink,
        ),
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute
      ),
    );
  }
}

跳转到Detail页面

 Navigator.pushNamed(context, '/detail', arguments: {"id": 20});

返回上一页面

 Navigator.of(context).pop();

五、路由替换

比如我们从A页面跳转到了B 页面,然后B页面通过pushReplacementNamed跳转到了C页面。这个时候当我们点击C页面的返回按钮，就会跳转回A页面。

Navigator.of(context).pushReplacementNamed('/C');

六、返回根路由

比如我们从A页面跳转到了B页面，然后从B页面跳转到了C页面，然后从C跳转到了D页面。这个时候我们想的是D返回到A页面。 这个时候就用到了返回到根路由的方法。

Navigator.of(context).pushAndRemoveUntil(
   new MaterialPageRoute(builder: (context) => new Tabs(index:1)),
   (route) => route == null
);

路由.png