8 Flutter UI 之 路由

一 基本路由

路由就是页面的跳转，通过Navigator组件管理路由导航

Flutter 提供了两种方式 基本路由和命名路由

 Container(
      child: Center(
          child: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                // 跳转到购物车界面
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
                  return SearchPage();
                }));
              },
              child: Text("Jump to Search Page")),
          ElevatedButton(
              onPressed: () {
                // 跳转到购物车界面并且传值
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
                  return FormPage(title: "title from home");
                }));
              },
              child: Text("Jump to Search Page with Parameters"))
        ],
      )),
    )

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页面")),
      body: Center(
        child: Text("SearchPage"),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {
  // 接收传递过来的值
  String title;
  FormPage({this.title = "Form"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("This is form page"),
      ),
      body: Text(title),
      // 返回的操作
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text("Back"),
      ),
    );
  }
}

二 命名路由基本使用

在大项目中统一管理路由，

在main 文件中统一去配置路由

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Tabs(title: "这是一首简单的小情歌"),
      // map类型
      routes: {
        '/form': (context) => FormPage(),
        '/search': (context) => SearchPage()
      },
    );

ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/search");
              },
              child: Text("Jump to Search Page")),
          ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/form");
              },
              child: Text("Jump to Search Page with Parameters"))

三 路由传递参数的基本使用

1  首先在main 中配置好路由

其中  onGenerateRoute 为固定的写法

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final routes = {
    "/form": (context) => FormPage(),
    "/search": (context, {arguments}) => SearchPage(arguments: arguments)
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Tabs(title: "title"),
      // map类型
      // initialRoute: '/',
      // 路由传值
      onGenerateRoute: (RouteSettings settings) {
        //String? 表示name为可空类型
        final String? name = settings.name;
        //Function? 表示pageContentBuilder为可空类型
        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;
          }
        }
      },
    );
  }
}

2 在对应的页面写好接收的参数

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  final arguments;
  SearchPage({this.arguments});
  @override
  State<SearchPage> createState() => _SearchPageState(arguments: arguments);
}

class _SearchPageState extends State<SearchPage> {
  final arguments;
  _SearchPageState({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("搜索页面")),
      body: Center(
        child: Text(
            "SearchPage + ${this.arguments != null ? this.arguments["id"] : "emptyBoy"}"),
      ),
    );
  }
}

3  跳转操作

ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/search", arguments: {"id": 123});
              },
              child: Text("Jump to Search Page")),

四 路由文件的抽取配置

1 单独新建一个Routes.dart ，专门配置路由 

import 'package:flutter/material.dart';
import '../pages/tabs/Form.dart';
import '../pages/tabs/Search.dart';
import '../pages/tabs/Tabs.dart';

//配置路由,定义Map类型的routes,Key为String类型，Value为Function类型
final Map<String, Function> routes = {
  '/': (context) => Tabs(),
  '/form': (context) => FormPage(),
  '/search': (context, {arguments}) => SearchPage(arguments: arguments),
};

//固定写法
var onGenerateRoute = (RouteSettings settings) {
  //String? 表示name为可空类型
  final String? name = settings.name;
  //Function? 表示pageContentBuilder为可空类型
  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;
    }
  }
};

2 在main 中进行引入并且调用 

import 'routes/Routes.dart';


MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Tabs(),
      // map类型
      initialRoute: '/',
      // 路由传值
      onGenerateRoute: onGenerateRoute,
    );

五  替换路由

这样的示例，从首页跳转到登录页面，从登录页面跳转到注册页面1，从注册页面跳转到注册页面2，完成之后返回首页。这时候要用到替换路由的方式push

ElevatedButton(
        onPressed: () {
          Navigator.of(context).pushReplacementNamed("/registerFirst");
        },
        child: Text("下一步"),
      )

六 返回到跟路由

使用上面的替换路由可以实现返回到根路由，如果不适用的话，用以下的方式进行实现返回到跟路由。

代码的意思是移除所有的路由 创建一个新的路由

ElevatedButton(
                child: Text("返回首页"),
                onPressed: () {
                  Navigator.of(context).pushAndRemoveUntil(
                      new MaterialPageRoute(builder: (context) => Tabs()),
                      (route) => false);
                })