您现在的位置是:首页 >其他 >【Flutter 工程】006-路由跳转:go_router网站首页其他
【Flutter 工程】006-路由跳转:go_router
简介【Flutter 工程】006-路由跳转:go_router
【Flutter 工程】006-路由跳转:go_router
文章目录
一、概述
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
相关文档
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、运行结果
主页
设置页
三、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)
:移除导航状态监听器。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。