Flutter 路由介绍

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

普通路由使用

比如我们现在想从 HomePage 组件跳转到 SearchPage 组件。

需要在HomPage中引入SearchPage.dart

import '../SearchPage.dart';

在 HomePage 中通过下面方法跳转

Center(
    child: ElevatedButton(
        onPressed: (){
            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context){
                        return const SearchPage();
                    }
                )
            );
        }, 
        child: const Text("跳转到搜索页面")
    ),
)

普通路由跳转传值

跳转传值和调用组件传值的实现方法是一样的

定义一个SearchPage接收传值

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
    final String title;
    const SearchPage({super.key,this.title="Search Page"});
    @override
    State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
                centerTitle: true,
            ),
            body: const Center(
                child: Text("组件居中"),
            ),
        );
    }
}

跳转页面实现传值

Center(
    child: ElevatedButton(
        onPressed: (){
            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context){
                        return const SearchPage(title: "搜索页面",);
                    }
                )
            );
        }, 
        child: const Text("跳转到搜索页面")
    ),
)

命名路由

main.dart 中配置路由

import 'package:flutter/material.dart';
import './pages/tabs.dart';
import './pages/search.dart';
import './pages/form.dart';

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

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner:false,
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
        // home:const Tabs() ,
            routes: {
            '/':(contxt)=>const Tabs(),
            '/search':(contxt) => const SearchPage(),
            '/form': (context) => const FormPage(),
            },
        ); // MaterialApp
    }
}

跳转路由

ElevatedButton(
    onPressed: () {
        Navigator.pushNamed(context, '/form');
    },
    child: const Text("跳转到form页面")
)

命名路由传值

官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

配置 onGenerateRoute

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 {
    //1、定义Map类型的routes
    Map routes = {
        '/': (contxt) => const Tabs(),
        '/search': (contxt) => const SearchPage(),
        '/form': (context, {arguments}) => FormPage(arguments: arguments),
    };

    MyApp({Key? key}) : super(key: key);
    // This widget is the root of your application.

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            initialRoute: '/',
            //2、调用onGenerateRoute处理
            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)
                            ); // MaterialPageRoute
                        return route;
                    } else {
                        final Route route = MaterialPageRoute(
                            builder: (context) => pageContentBuilder(context)
                        ); // MaterialPageRoute
                        return route;
                    }
                }
                return null;
            },
        ); // MaterialApp
    }
}

定义页面接收 arguments 传参

import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
    final Map arguments;
    const FormPage({super.key,required this.arguments});
    @override
    State<FormPage> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
    @override
    void initState() {
        // TODO: implement initState
        print(widget.arguments);
    }
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text("我是一个Form表单演示页面"),
            ),
        );
    }
}

跳转页面实现传参

ElevatedButton(
    onPressed: () {
        Navigator.pushNamed(context, '/form', 
            arguments: {
                "title": "搜索页面",
            }
        );
    },
    child: const Text("form")
)

命名路由单独抽离到一个文件

新建 routers/routers.dart 配置路由

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/search.dart';
import '../pages/form.dart';

// final 运行时赋值 并且只能赋值一次

final Map<String,Function> routes = {
    '/': (contxt) => const Tabs(),
    '/search': (contxt) => const SearchPage(),
    '/form': (context, {arguments}) => FormPage(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)
                ); // MaterialPageRoute
                return route;
            } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context)
            ); // MaterialPageRoute
            return route;
        }
    }
    return null;
};

修改 main.dart

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

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

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            initialRoute: '/',
            onGenerateRoute: onGenerateRoute,
        );
    }
}

实现页面跳转传值

ElevatedButton(
    onPressed: () {
        Navigator.pushNamed(context, '/form',
            arguments: {
                "title": "搜索页面",
            }
        );
    },
    child: const Text("form")
)

返回上一级路由

Navigator.of(context).pop();

替换路由

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

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

Flutter 返回到根路由

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

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(
        builder: (BuildContext context) {
            return const Tabs();
        }
    ),
    (route) => false
);

Flutter Android 和 Ios 使用同样风格的路由跳转

Material 组件库中提供了一个 MaterialPageRoute 组件，它可以使用和平台风格一致的路由切换动画，如在iOS上会左右滑动切换，而在 Android 上会上下滑动切换 , CupertinoPageRoute 是 Cupertino 组件库提供的 iOS 风格的路由切换组件如果在 Android 上也想使用左右切换风格，可以使用 CupertinoPageRoute 。

routers.dart 中引入 cupertino.dart

import 'package:flutter/cupertino.dart';

MaterialPageRoute 改为 CupertinoPageRoute

import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/shop.dart';
import '../pages/user/login.dart';
import '../pages/user/registerFirst.dart';
import '../pages/user/registerSecond.dart';
import '../pages/user/registerThird.dart';

3. 配置路由

Map routes = {
    "/": (contxt) => const Tabs(),
    "/login": (contxt) => const LoginPage(),
    "/registerFirst": (contxt) => const RegisterFirstPage(),
    "/registerSecond": (contxt) => const RegisterSecondPage(),
    "/registerThird": (contxt) => const RegisterThirdPage(),
    "/shop": (contxt, {arguments}) => ShopPage(arguments: arguments),
};

4. 配置 onGenerateRoute 固定写法 这个方法也相当于一个中间件，这里可以做权限判断

var onGenerateRoute = (RouteSettings settings) {
    final String? name = settings.name; // /news 或者 /search
    final Function? pageContentBuilder = routes[name]; //
    Function = (contxt) { 
        return const NewsPage()
    }
    
    if (pageContentBuilder != null) {
        if (settings.arguments != null) {
            final Route route = CupertinoPageRoute(
                builder: (context) => pageContentBuilder(context, 
                    arguments: settings.arguments
                ) // pageContentBuilder
            );
            return route;
        } else {
            final Route route = CupertinoPageRoute(
                builder: (context) => pageContentBuilder(context)
            ); // CupertinoPageRoute
            return route;
        }
    }
    return null;
};

全局配置主题

return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
        appBarTheme: const AppBarTheme(
            centerTitle: true,
        )
    ),
    initialRoute: "/",
    onGenerateRoute: onGenerateRoute,
);

Flutter 路由介绍

普通路由使用​

普通路由跳转传值​

命名路由​

命名路由传值​

配置 onGenerateRoute​

定义页面接收 arguments 传参​

跳转页面实现传参​

命名路由单独抽离到一个文件​

实现页面跳转传值​

返回上一级路由​

替换路由​

Flutter 返回到根路由​

Flutter Android 和 Ios 使用同样风格的路由跳转​