Flutter路由管理插件eazy_router的使用
Flutter路由管理插件eazy_router的使用
EazyRouter 是一个灵活且易于使用的导航包，用于 Flutter 应用。它利用代码生成来简化路由管理。本指南将指导你如何使用 EazyRouter 的关键特性和功能。对于实时示例，请参阅此页面。
目录
安装
要安装 EazyRouter，请在你的 pubspec.yaml 文件中添加以下依赖项：
dependencies:
eazy_router: ^x.x.x
eazy_router_annotation: ^x.x.x
dev_dependencies:
build_runner: ^x.x.x
eazy_router_generator: ^x.x.x
请将 x.x.x 替换为 pub.dev 上的最新版本号。
开始使用
EazyRouter 使用注解和代码生成来自动生成应用的路由。请遵循以下步骤开始使用：
- 在主函数上使用
[@RegisterRoutes](/user/RegisterRoutes)注解。 - 在每个页面类上使用
[@GenerateRoute](/user/GenerateRoute)注解以生成路由定义。 - 运行构建工具以生成必要的文件。
注解
@RegisterRoutes
该注解用于标记应用程序的入口点，即注册路由的地方。通常，你会将其放置在 main 函数上。
[@RegisterRoutes](/user/RegisterRoutes)()
void main() {
registerRoutes();
runApp(const MyApp());
}
@GenerateRoute
使用该注解在页面类上生成相应的路由。你必须指定路由的 pathName，并且可以选择性地将该路由设置为初始路由。
[@GenerateRoute](/user/GenerateRoute)(pathName: 'home', isInitial: true)
class HomeScaffold extends StatelessWidget {
const HomeScaffold({
this.title,
super.key,
});
final String? title;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home ${title ?? 'scaffold'}'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () {
// 使用 context 推送
context.push(SecondScaffoldRoute());
},
child: const Text('Go second'),
),
const Divider(),
ElevatedButton(
onPressed: () {
// 使用 context 推送
context.pushRoutes([
SecondScaffoldRoute(),
ThirdScaffoldRoute(),
]);
},
child: const Text('Push second and third'),
),
],
),
),
);
}
}
使用EazyRouter
基本路由
要在你的应用中使用生成的路由，请在 MaterialApp 中设置 EazyRouter 作为路由器配置：
MaterialApp.router(
routerConfig: EazyRouter(),
)
在页面之间导航
你可以通过生成的路由类在页面之间导航：
context.push(SecondScaffoldRoute());
推送页面栈
EazyRouter 允许你一次性推送多个页面。这在你想一次性导航到多个屏幕时非常有用。
context.pushRoutes([
SecondScaffoldRoute(),
ThirdScaffoldRoute(),
]);
示例
这是一个完整的示例，展示了如何使用 EazyRouter 定义路由并在页面之间导航。代码生成器会创建必要的路由类，并确保在整个应用中实现类型安全的导航。
// main.dart
import 'package:eazy_router_annotation/eazy_router_annotation.dart';
import 'package:flutter/material.dart';
import 'package:full_example/main.routes.dart';
import 'package:eazy_router/eazy_router.dart';
[@RegisterRoutes](/user/RegisterRoutes)()
void main() {
registerRoutes();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
routerConfig: EazyRouter(),
);
}
}
// src/home.dart
import 'package:flutter/material.dart';
import 'package:full_example/src/second.dart';
import 'package:full_example/src/third.dart';
import 'package:eazy_router/eazy_router.dart';
import 'package:eazy_router_annotation/eazy_router_annotation.dart';
part 'home.g.dart';
[@GenerateRoute](/user/GenerateRoute)(pathName: 'home', isInitial: true)
class HomeScaffold extends StatelessWidget {
const HomeScaffold({
this.title,
super.key,
});
final String? title;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home ${title ?? 'scaffold'}'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () {
// 使用 context 推送
context.push(SecondScaffoldRoute());
},
child: const Text('Go second'),
),
const Divider(),
ElevatedButton(
onPressed: () {
// 使用 context 推送
context.pushRoutes([
SecondScaffoldRoute(),
ThirdScaffoldRoute(),
]);
},
child: const Text('Push second and third'),
),
],
),
),
);
}
}
// src/second.dart
import 'package:flutter/material.dart';
import 'package:full_example/src/third.dart';
import 'package:eazy_router/eazy_router.dart';
import 'package:eazy_router_annotation/eazy_router_annotation.dart';
part 'second.g.dart';
[@GenerateRoute](/user/GenerateRoute)(pathName: 'second')
class SecondScaffold extends StatelessWidget {
const SecondScaffold({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second scaffold'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () {
context.pop();
},
child: const Text('pop'),
),
const Divider(),
ElevatedButton(
onPressed: () {
context.push(ThirdScaffoldRoute());
},
child: const Text('go to third'),
),
],
),
),
);
}
}
// src/third.dart
import 'package:flutter/material.dart';
import 'package:full_example/src/home.dart';
import 'package:full_example/src/second.dart';
import 'package:eazy_router/eazy_router.dart';
import 'package:eazy_router_annotation/eazy_router_annotation.dart';
part 'third.g.dart';
[@GenerateRoute](/user/GenerateRoute)(pathName: 'third')
class ThirdScaffold extends StatelessWidget {
const ThirdScaffold({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Third scaffold'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () {
context.removeRouteByName(SecondScaffoldRoute().page.name!,
notifyRootWidget: true);
},
child: const Text('remove second from stack'),
),
const Divider(),
ElevatedButton(
onPressed: () {
context.pop();
},
child: const Text('pop'),
),
const Divider(),
ElevatedButton(
onPressed: () {
context.popUntilTrue(
(route) => route.page.name == HomeScaffoldRoute().page.name,
);
},
child: const Text('pop until home'),
),
const Divider(),
ElevatedButton(
onPressed: () {
context.pop(times: 2);
},
child: const Text('pop two times'),
),
],
),
),
);
}
}
更多关于Flutter路由管理插件eazy_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter路由管理插件eazy_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用Flutter路由管理插件eazy_router的代码案例。eazy_router是一个用于简化Flutter应用中路由管理的插件。以下是一个基本的实现示例：
1. 添加依赖
首先，在你的pubspec.yaml文件中添加eazy_router的依赖：
dependencies:
flutter:
sdk: flutter
eazy_router: ^最新版本号 # 请替换为最新版本号
2. 配置路由
在你的项目中创建一个路由配置文件，例如router_config.dart：
import 'package:eazy_router/eazy_router.dart';
import 'package:flutter/material.dart';
// 定义你的页面
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(child: Text('Home Page')),
);
}
}
class DetailPage extends StatelessWidget {
final String message;
DetailPage({required this.message});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Detail')),
body: Center(child: Text(message)),
);
}
}
// 初始化路由配置
final EazyRouter router = EazyRouter(
routes: [
EazyRoute(
path: '/',
builder: () => HomePage(),
),
EazyRoute(
path: '/detail/:message',
builder: (context, parameters) {
final String message = parameters['message'] ?? 'Default Message';
return DetailPage(message: message);
},
),
],
);
3. 在应用中初始化并使用路由
在你的main.dart文件中，初始化并使用路由：
import 'package:flutter/material.dart';
import 'router_config.dart'; // 导入路由配置文件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerDelegate: router.delegate(),
routeInformationParser: router.defaultRouteInformationParser(),
);
}
}
4. 导航到不同页面
你可以在你的应用中通过EazyRouter实例进行导航。例如，在HomePage中添加一个按钮，点击后导航到DetailPage：
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Home Page'),
ElevatedButton(
onPressed: () {
// 使用EazyRouter实例进行导航
router.navigateTo('/detail/Hello%20World');
},
child: Text('Go to Detail Page'),
),
],
),
),
);
}
}
总结
以上代码展示了如何使用eazy_router插件进行Flutter应用的路由管理。通过这种方式，你可以轻松地定义和管理应用中的不同页面和路由。希望这对你有所帮助！
