【Flutter 工程】006-路由跳转：go_router

【Flutter 工程】006-路由跳转：go_router

一、概述

1、简介

GoRouter是一个用于Flutter应用程序的导航库，它提供了一种简单而强大的方式来管理应用程序的导航栈和路由。它可以帮助你组织和管理Flutter应用程序中的页面导航，使页面之间的跳转和参数传递更加方便。

以下是GoRouter的一些主要特点和功能：

1. 简单易用：GoRouter的API设计简单直观，易于使用和理解。它提供了一个简洁的接口来定义和管理应用程序的路由规则。
2. 路由规则定义：你可以使用GoRouter定义应用程序的路由规则。通过指定路径和相应的构造器函数，你可以将路由规则与Flutter Widget相关联。当导航到某个路径时，GoRouter将使用相应的构造器函数创建相应的Widget。
3. 参数传递：GoRouter支持在导航过程中传递参数。你可以在路由规则中定义参数，并在导航时将参数传递给目标Widget。这使得在页面之间传递数据变得非常方便。
4. 嵌套路由：GoRouter允许你创建嵌套的路由结构，以便更好地管理复杂的应用程序导航。你可以在一个页面内嵌套多个子路由，每个子路由都有自己的路由规则和导航栈。
5. 路由传递：GoRouter提供了一种在导航过程中传递路由对象的机制。这使得你可以在导航时携带额外的路由信息，以便目标页面可以根据需要进行处理。
6. 生命周期管理：GoRouter提供了一种在导航过程中管理页面生命周期的机制。你可以根据需要在页面进入和退出时执行相应的操作。

总之，GoRouter是一个强大而灵活的导航库，可以简化Flutter应用程序的导航管理。它提供了丰富的功能和易于使用的API，使得构建复杂的导航结构变得更加简单和直观。无论是构建简单的应用程序还是处理复杂的导航需求，GoRouter都是一个很好的选择。

2、主页

主页

https://pub.flutter-io.cn/packages/go_router

相关文档

https://docs.flutter.dev/ui/navigation#using-the-router

二、基本使用

1、安装

flutter pub add go_router

2、修改默认的 main.dart

import 'package:counter/router.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: router,
    );
  }
}

3、创建 router.dart

lib/router.dart

import 'package:counter/home_page.dart';
import 'package:counter/setting_page.dart';
import 'package:go_router/go_router.dart';

final router = GoRouter(routes: [
  GoRoute(
    path: "/",
    builder: (context, state) => const HomePage(),
  ),
  GoRoute(
    path: '/setting',
    builder: (context, state) => const SettingPage(),
  )
]);

4、创建 home_page.dart

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('主页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '主页',
              style: TextStyle(fontSize: 40),
            ),
            // 点击跳转到设置页面
            ElevatedButton(
              onPressed: () => GoRouter.of(context).push('/setting'),
              style: ElevatedButton.styleFrom(
                foregroundColor: Theme.of(context).colorScheme.onSecondary,
                backgroundColor: Theme.of(context).colorScheme.secondary,
              ),
              child: const Text('跳转到设置页面'),
            )
          ],
        ),
      ),
    );
  }
}

5、创建 setting_page.dart

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  const SettingPage({super.key});

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('设置'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '设置页面',
              style: TextStyle(fontSize: 40),
            ),
          ],
        ),
      ),
    );
  }
}

6、运行结果

主页

设置页

三、go_router 常用方法

1、GoRouter 类的构造函数

GoRouter(
  context: BuildContext,
  routes: Map<String, WidgetBuilder>,
  errorPageBuilder: WidgetBuilder,
  initialLocation: String,
  redirect: Function(String),
)

• context：BuildContext对象，用于导航操作。
• routes：包含路由规则的映射，将路径与相应的Widget构建器函数关联起来。
• errorPageBuilder：用于处理错误导航的Widget构建器函数。
• initialLocation：初始导航位置。
• redirect：当需要重定向到另一个路径时调用的回调函数。

2、GoRouter 类的静态方法

• go(String path, {Map params})：导航到指定路径的页面，并可选地传递参数。
• replaceAll(String path, {Map params})：将当前页面替换为指定路径的页面，并可选地传递参数。
• pop([dynamic result])：返回到前一个页面，并可选地传递返回结果。
• canPop()：检查是否可以执行返回操作。
• popToNamed(String path, {dynamic result})：返回到具有指定路径的页面，并可选地传递返回结果。
• replaceAllAndPop(String path, {Map params, dynamic result})：将当前页面替换为指定路径的页面，并将前一个页面出栈。

3、GoRouterState 类的实例方法

可通过 GoRouter.of(context) 获得

• location：当前导航位置。
• params：当前导航页面传递的参数。
• addListener(VoidCallback listener)：添加导航状态监听器。
• removeListener(VoidCallback listener)：移除导航状态监听器。

四、扩展

1、使用案例

页面替换

清空路由栈，不可返回

// 跳转到登录页面，清空路由栈
context.go('/auth');

页面跳转

新建路由栈，可返回

// 跳转到设置页面
context.push('/setting');