当前位置: 首页 > 开发杂谈 >

Day 25 | Flutter 路由管理套件 - auto_route

Navigator 1.0

Flutter 有内建一个路由管理 API Navigator ,而Flutter也在今年发表了 Navigator 2.0 但因为工作上是使用 fluro 这个路由管理套件,所以就没特别研究了 Navigator 2.0,只能大概说明一下 Navigator 1.0

用起来算是很简单,我们可以直接用 Navigator.push 里面会就放我们要打开的新页面。

Navigator.push( 
      context,
      MaterialPageRoute(builder: (context) {
        return NewRoute();
      }),
    );

但为了方便管理通常都会使用命名路由的方式,然後将原本的 home: 换成 '/': (context) => const MyHomePage()

 MaterialApp(
      routes: {
        '/': (context) => const MyHomePage(),
        'users_list': (context) => const UsersListPage(),
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );

如果要到另外一个页面就是使用 Navigator.pushNamed

Navigator.pushNamed(context, 'users_list');

但对於一些动态路由或者需要传参数的页面就会有点麻烦,所以大部分都会使用路由管理套件,虽然工作上是使用 fluro但架设起来也是有点庞大,所以就决定试玩一下另外一个套件 auto_route

auto_route

dependencies:
	auto_route: ^2.4.2
dev_dependencies:
	auto_route_generator: ^2.4.1

先建立另外一个档案 router.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter_rest_api_playground/view/users/users_detail_page.dart';
import 'package:flutter_rest_api_playground/view/users/users_list_page.dart';

import '../main.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: MyHomePage, path: '/', initial: true),
    AutoRoute(page: UsersListPage, path: '/users'),
    AutoRoute(page: UserDetailPage, path: '/user/:id'),
  ],
)
class $AppRouter {}

注册路由就是会用 AutoRoute 里面页面以及路由,首页的话就加上 initial: true ,而如果需要动态路由就可以 : 来标示,整体看起来跟网页很像。

replaceInRouteName 则是将我们的所注册的页面输出成另外一个名字避免混淆,这样让我们 push 时就会是使用 UsersListRoute 而不是 UsersListPage

因为auto_run会需要使用 codegen 所以一样要跑 build_runner。

使用时就将 MaterialApp 改为 MaterialApp.router ,然後实例化 AppRouter

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(_appRouter),
      routeInformationParser: _appRouter.defaultRouteParser(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
	}
}

要导转页面时也算蛮简单的:

AutoRouter.of(context).pushNamed('/users');

AutoRouter.of(context).push(UsersListRoute());

可以选择要直接使用注册的 path 或者是 codegen出来的 xxxxxRoute

而需要接收参数的页面的宣告也很直观

class UserDetailPage extends StatefulWidget {
  const UserDetailPage({Key? key, @PathParam('id') required this.userId})
      : super(key: key);
  final String userId;
  @override
  State<UserDetailPage> createState() => _UserDetailPageState();
}

加上 @PathParam 即可, () 放我们在注册时的 : 的命名,所以以这个例子来说就是使用

@PathParam('id') 并把传给 userId

使用上就直接在字串中加入我们的变数或者使用 UserDetailRoute 里面传参数

AutoRouter.of(context).pushNamed('/user/${userInfo.id}');
AutoRouter.of(context).push(UserDetailRoute(userId: userInfo.id.toString()));

写到今天突然发现好像快没有东西可以写了, 明天可能会试着玩玩其他状态管理框架。


今天的程序码:
https://github.com/zxc469469/flutter_rest_api_playground/tree/Day25

参考资料:

  1. https://book.flutterchina.club/chapter2/flutter_router.html#_2-4-1-一个简单示例

相关文章:

  • Day 9:JSON 资料解析
  • 系统分析师的养成之路—案例分享(3)
  • Secondary Index
  • Day 30 : 结语
  • 新新新手阅读 Angular 文件 - Router - pathMatch(2) - Day28
  • 网红营销技巧
  • 软件开发流程 需求蒐集法3 - 焦点团体
  • [Day18] Webpack - 预处理器
  • 新加坡FBA卖家遇到库存滞销该怎么办?
  • 外贸交易中要注意的七点
  • 【Day25】React Class Component 生命周期简单介绍
  • 【领域展开 02 式】 拥有个人网站的 3 大理由
  • Day 4 - 介绍Laravel Eloquent ORM
  • Day 3 就是你了!
  • 浅谈|B2C跨境电商们的机遇与挑战
  • Sendgrid使用教程:利用GitHub学生包每月发送15K邮件
  • 【教程】Let’s Encrypt免费HTTPS SSL证书获取教程
  • 国外代发货教程:教你如何一件代发做跨境电商国外市场
  • 国外靠谱的VPS云服务器大全
  • 网站更换域名后副作用大吗?针对谷歌如何更换域名
  • Python入门教程:Python怎么写
  • 香港电话卡怎么在内地使用: CSL Hello/Three/CMHK/Smartone电话卡内地使用方法
  • 菲律宾虚拟卡预付卡大全
  • 站点迁移问题:流量下降的 11 个潜在原因
  • Gutenberg最新版如何添加导航间隔
  • 搬瓦工VPS优惠码/ 促销码 、最新BandwagonHost官网促销
  • 301 重定向怎么做?301 重定向教程和方法
  • Google:国际化网站即使有相同的英文内容也不属于重复内容
  • 教程:阿里云国际版绑定香港PayPal购买方法
  • 如何找国外网红营销?国外网红营销方法和推荐