Flutter中的路由

Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop

Flutter中给我们提供了两种配置路由跳转的方式：基本路由和命名路由。

Flutter中的基本路由使用

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

Flutter中的基本路由跳转传值

Navigator.of(context).push(MaterialPageRoute(builder: (context) => FormPage(title: '我是跳转传值')));

Flutter中的命名路由

1. 配置路由

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (contxt) => Tabs(),
        '/search': (contxt) => SearchPage(),
        '/form': (context) => FormPage(),
      },
    );
  }
}

2. 路由跳转
   Navigator.pushNamed(context, '/search');

Flutter中的命名路由跳转传值

1. 配置路由

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

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

class MyApp extends StatelessWidget {
  final Map<String, Function> routes = {
    '/': (contxt) => Tabs(),
    '/search': (contxt) => SearchPage(),
    '/form': (context, {arguments}) => FormPage(arguments: arguments),
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        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;
            }
          }
        });
  }
}

2. 跳转传值
   Navigator.pushNamed(context, '/form', arguments: {"id": 20});
3. 接收参数

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {
  final Map arguments;
  FormPage({required this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("搜索"),
        ),
        body: Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}"));
  }
}

官方文档链接

Flutter中的命名路单独抽离到一 个文件

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

//配置路由,定义 Map 类型的 routes,Key 为 String 类型，Value 为 Function 类型
final Map<String, Function> routes = {
  '/': (context) => Tabs(),
  '/form': (context) => FormPage(),
  '/product': (context) => ProductPage(),
  '/productinfo': (context, {arguments}) =>
      ProductInfoPage(arguments: arguments),
  '/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;
    }
  }
};

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // home:Tabs(),
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute);
  }
}

Flutter 中返回到上一级页面

Navigator.of(context).pop();

Flutter 中替换路由

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

Flutter 返回到根路由

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (context) => Tabs()),
);