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

【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的一些主要特点和功能：

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

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

2、主页

主页

https://pub.flutter-io.cn/packages/go\_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<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');

【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江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表