Flutter中的路由使用

Flutter中提供了两种配置路由跳转的方式：1、基本路由；2、命名路由

一、基本路由

1.引入将要跳转的页面

import 'package:flutter_learn/search.dart';

2.点击按钮跳转

Navigator.of(context)
  .push(MaterialPageRoute(builder: (context) => SearchPage()));

3.如果需要传值，在SearchPage里面新写构造方法，在跳转时进行传值

//search页面
import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
  String title;
  SearchPage({this.title = "搜索"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Container(
        child: Text("搜索页面内容区域"),
      ),
    );
  }
}
//跳转方法
Navigator.of(context).push(MaterialPageRoute(
   builder: (context) => SearchPage(title: "搜索页面",))
);

4.返回上一级页面

//返回上一级
Navigator.of(context).pop();

二、命名路由

为了在项目中可以统一管理跳转，可以使用Flutter提供的命名路由
1.配置路由，命名路由需要定义在根组件里面

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
      home: Tabs(),
      //配置命名路由
      routes: {
        '/search': (context)=>SearchPage()
      },
    );
  }
}

2.跳转下一个页面

//命名路由跳转，/search必须与根组件中配置命名路由的名称一致
Navigator.pushNamed(context, '/search');

三、命名路由的跳转传值

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

class MyApp extends StatelessWidget {
  final routes = {
    '/search': (context)=>SearchPage()
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
      home: Tabs(),
      //命名路由的跳转传值
      onGenerateRoute: (RouteSettings settings) {
        final String name = settings.name;
        final Function pageContentBuilder = this.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;
          }
        } else {
          final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context)
          );
          return route;
        }
      },
    );
  }
}
//跳转页面并传值
Navigator.pushNamed(context, '/search', arguments: {"title" : "11111"});
//接收页面接收传递参数
import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
  final arguments;
  SearchPage({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.arguments != null ? this.arguments["title"] : "搜索111"),
      ),
      body: Container(
        child: Text("搜索页面内容区域"),
      ),
    );
  }
}

优化

将onGenerateRoute抽离出一个单独的路由配置文件，方便统一管理
1、新建routes.dart文件

import 'package:citylifeflutter/search.dart';
import 'package:flutter/material.dart';

final routes = {
  '/search': (context, {arguments})=>SearchPage(arguments: arguments)
};

dynamic 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;
    }
  } else {
    final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context)
    );
    return route;
  }
};

2、修改main.dart文件，引入routes

class MyApp extends StatelessWidget {
  final routes = {
    '/': (context)=>Tabs(),//tab栏切换
//不需要传值
    '/shop': (context)=>ShopPage(),
//需要传值
    '/search': (context, {arguments})=>SearchPage(arguments: arguments)
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
//      home: Tabs(),
      initialRoute: '/',//配置根路由
      //命名路由的跳转传值
      onGenerateRoute: onGenerateRoute
    );
  }
}

替换路由

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

返回根路由

1、替换路由实现
2、系统方法(pushAndRemoveUntil)，将route置为null

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) {
  return Tabs(index:1);
 }), (route) {
  return route == null;
});