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

爱被打了一巴掌 2023-10-10 23:32 5阅读 0赞

## 【Flutter 工程】006-路由跳转：go\_router ##

#### 文章目录 ####

*  【Flutter 工程】006-路由跳转：go\_router
 *  一、概述
 *   *  1、简介
     *  2、主页
 *  二、基本使用
 *   *  1、安装
     *  2、修改默认的 \`main.dart\`
     *  3、创建 \`router.dart\`
     *  4、创建 \`home\_page.dart\`
     *  5、创建 \`setting\_page.dart\`
     *  6、运行结果
 *  三、go\_router 常用方法
 *   *  1、\`GoRouter\` 类的构造函数
     *  2、\`GoRouter\` 类的静态方法
     *  3、\`GoRouterState\` 类的实例方法
 *  四、扩展
 *   *  1、使用案例
     *   *  页面替换
         *  页面跳转

## 一、概述 ##

### 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、运行结果 ###

> 主页

![image-20230527151930642][]

> 设置页

![image-20230527151954933][]

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

### 3、`GoRouterState` 类的实例方法 ###

> 可通过 `GoRouter.of(context)`获得

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

## 四、扩展 ##

### 1、使用案例 ###

#### 页面替换 ####

> 清空路由栈，不可返回

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

#### 页面跳转 ####

> 新建路由栈，可返回

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

[image-20230527151930642]: https://img-blog.csdnimg.cn/img_convert/c4af9dc9c5a2bf8e588e391b24d8875a.png
[image-20230527151954933]: https://img-blog.csdnimg.cn/img_convert/1a8837e542dcbfa47c54c05111f9497e.png