Flutter go_router

go_router 是 Flutter 的一个新路由库，提供了声明式的路由管理方式。

与传统的路由管理方式相比，go_router 更加简洁、灵活。

高级主题

• Flutter go_router ShellRoute

路由声明

GoRouter 初始化

初始化：使用 GoRouter 类进行初始化，并传入路由列表。

final goRouter = GoRouter(
  routes: [...],
);

路由页面声明

在路由列表中声明路由，指定页面和路径。

GoRoute(
  path: '/page1',
  pageBuilder: 
	  (context, state) => Page1(),
)

声明路由参数

使用冒号 : 来声明路由参数。

GoRoute(
  path: '/details/:id',
  pageBuilder: (context, state) {
    final id = state.params['id'];
    return DetailsPage(id: id);
  },
)

导航跳转

导航方法签名：

context.go(
	String location, // 路径 
	{Object? extra}) // 传参

使用 goRouter.go() 方法进行页面跳转。

goRouter.go('/details/123');

URL 传参：

context.go('/detail?id=b');

路由守卫

使用 redirectGuard 属性来实现路由守卫功能。

GoRoute(
  path: '/protected',
  pageBuilder: 
	(context, state) 
		=> ProtectedPage(),
  redirectGuard: (state) {
    if (!isLoggedIn) {
      return '/login';
    }
    return null;
  },
)

嵌套路由

使用 children 属性来实现嵌套路由。

GoRoute(
  path: '/dashboard',
  pageBuilder: (context, state) 
	  => DashboardPage(),
  children: [
    GoRoute(
      path: 'profile',
      pageBuilder: (context, state) 
	      => ProfilePage(),
    ),
  ],
)

过场动画

使用 transitionsBuilder 属性来自定义页面转场动画。

GoRoute(
  path: '/animated',
  pageBuilder: (context, state) 
	  => AnimatedPage(),
  transitionsBuilder: 
	  (context, animation,
	   secondaryAnimation, child) {
    return FadeTransition(
	    opacity: animation, 
	    child: child);
  },
)

网络资源

• [译]Flutter Favorite之路由包go_router - 基础篇 - 掘金
• go_router | Flutter Package
• flutter:一篇文章入门go_router - 掘金

本文作者：Maeiee

本文链接：Flutter go_router

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！