您现在的位置是:首页 >其他 >【Flutter 工程】006-路由跳转:go_router网站首页其他

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

訾博ZiBo 2024-06-30 06:01:02
简介【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});

  
  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});

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

class _HomePageState extends State<HomePage> {
  
  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});

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

class _SettingPageState extends State<SettingPage> {
  
  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):移除导航状态监听器。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。