Flutter 路由

flutter 路由 页面跳转

在flutter中界面就是组件
Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。 并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

基本路由

//基本路由跳转页面，带参数的跳转跟调用普通组件的方式一样的
  return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("跳转搜索界面"),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (BuildContext context) {
              return SearchPage(
                title: "首页传递的数据",
              );
            }));
          },
        )
      ],
    );

//跳转界面 接收数据，自定义返回
class SearchPage extends StatelessWidget {
  String title;

  SearchPage({this.title = "搜索页面"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Text("我是搜索页面"),
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }
}

命名路由的系列用法 模板使用

抽离出来的route文件

import 'package:flutter/material.dart';
import 'package:flutter_demp/pages/ProductInfoPage.dart';
import 'package:flutter_demp/pages/ProductPage.dart';
import '../pages/Tabs.dart';

class RoutePage{
  static final String PRODUCT_PAGE = "/product";
  static final String MAIN_PAGE = "/";
  static final String PRODUCTINFO_PAGE = "/productinfo";
}

class RouteKey{
  static final String KEY_PID = "key_pid";
}

//配置路由
final routes={
  RoutePage.MAIN_PAGE:(context)=>Tabs(),
  RoutePage.PRODUCT_PAGE:(context)=>ProductPage(),
  RoutePage.PRODUCTINFO_PAGE:(context,{arguments})=>ProductInfoPage(arguments:arguments),

};


//固定写法
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 'package:flutter_demp/routes/Routes.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      title: "MaterialApp title",
      //home: Tabs(),
      initialRoute: RoutePage.MAIN_PAGE,
      onGenerateRoute: onGenerateRoute,
    );
  }
}

不带传值的跳转

  RaisedButton(
          child: Text("跳转商品界面"),
          onPressed: () {
            Navigator.pushNamed(context, RoutePage.PRODUCT_PAGE);
          },
        ),

带参数的跳转

RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, RoutePage.PRODUCTINFO_PAGE,
                arguments: {
                  RouteKey.KEY_PID: "20111515",
                });
          },
          child: Text("跳转商品详情"),
        )

接收命名路由的参数传值

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

class ProductInfoPage extends StatefulWidget {
  Map arguments;

  ProductInfoPage({this.arguments});

  @override
  ProductState createState() => ProductState(arguments: arguments);
}

class ProductState extends State<ProductInfoPage> {
  Map arguments;

  ProductState({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品详情页面"),
      ),
      body: Text(
          "商品pid = ${arguments != null ? arguments[RouteKey.KEY_PID] : 000}"),
    );
  }
}

路由返回

返回到上一级页面 pop

Navigator.of(context).pop();

替换路由 pushReplacementNamed

比如我们从用户中心页面跳转到了 registerFirst 页面，然后从 registerFirst 页面通过 pushReplacementNamed 跳转到了 registerSecond 页面。这个时候当我们点击 registerSecond 的返回按钮的时候它会直接返回到用户中心。
Navigator.of(context).pushReplacementNamed('/registerSecond');

返回到根路由 即清空所有上层路由，回到要跳转的路由

比如我们从用户中心跳转到 registerFirst 页面，然后从 registerFirst 页面跳转到 registerSecond 页面，然后从 registerSecond 跳转到了 registerThird 页面。这个时候我们想的是 registerThird 注册成功后返回到用户中心。 这个时候就用到了返回到根路由的方法。

   //返回根
                Navigator.of(context).pushAndRemoveUntil(
                    new MaterialPageRoute(
                        builder: (context) => new Tabs(index: 2)),
                    (route) => route == null);
              },