详细介绍GoRouter中的namedLocation，goNamed， pushNamed

站长

2024年04月21日 14:21 · 阅读数 0

GoRouter是Flutter中的一种现代、声明式的路由解决方案，它简化了路由的管理，同时提供了强大的功能，如深层链接支持、路由守卫、页面转场动画等。在GoRouter中，有几个与命名路由相关的方法，它们分别是namedLocation、goNamed和pushNamed。这些方法提供了基于路由名称的导航能力，让路由管理变得更加直观和方便。

`namedLocation`

namedLocation是一个用于根据路由的名称及其参数生成URI字符串的方法。这个方法非常有用，尤其是当你需要根据当前的路由状态生成一个链接或路径，但又不希望立即导航到该路径时。

String namedLocation(String name, {Map<String, String> queryParams, Map<String, String> pathParams})

name: 路由的名称。
queryParams: 一个包含查询参数的Map，可选。
pathParams: 一个包含路径参数的Map，可选。

使用namedLocation可以帮助你构建指向特定页面的链接，这在创建深层链接或共享链接时特别方便。

`goNamed`

goNamed方法允许你通过路由名称来导航到一个新页面。你可以提供路由名称和需要的参数，GoRouter会根据这些信息查找并导航到相应的路由。

void goNamed(String name, {Map<String, String> queryParams, Map<String, String> pathParams})

name: 路由的名称。
queryParams: 一个包含查询参数的Map，可选。
pathParams: 一个包含路径参数的Map，可选。

goNamed是一个非常方便的方法，尤其是在复杂的应用中，它可以让你更加直观地管理路由导航。

`pushNamed`

pushNamed方法与goNamed类似，区别在于pushNamed用于在导航堆栈上添加一个新的路由，而不是替换当前路由。这意味着用户可以使用返回按钮回到先前的页面。

void pushNamed(String name, {Map<String, String> queryParams, Map<String, String> pathParams})

name: 路由的名称。
queryParams: 一个包含查询参数的Map，可选。
pathParams: 一个包含路径参数的Map，可选。

这种方法特别适用于需要保留导航历史的场景，如向导航堆栈中添加详情页面，而用户期望能够通过返回按钮回到列表页面。

使用示例

假设你有以下路由配置：

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      name: 'home',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details/:id',
      name: 'details',
      builder: (context, state) {
        final id = state.params['id']!;
        return DetailsPage(id: id);
      },
    ),
  ],
);

你可以这样使用goNamed和pushNamed：

// 使用 goNamed 导航到详情页面，替换当前路由
goRouter.goNamed('details', pathParams: {'id': '123'});

// 使用 pushNamed 导航到详情页面，添加到导航堆栈
goRouter.pushNamed('details', pathParams: {'id': '123'});

通过这些方法，GoRouter提供了一种更加灵活和声明式的方式来处理Flutter应用中的路由导航。

麻烦写一些demo

🤖

工作流

当然，让我们通过一些简单的示例来展示如何在Flutter应用中使用GoRouter的namedLocation、goNamed和pushNamed方法。

首先，假设我们有一个应用，它有两个页面：首页(HomePage)和详情页(DetailsPage)。我们希望能够通过命名路由来导航到这些页面。

步骤 1: 定义页面

HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用 goNamed 导航到详情页
            context.goNamed('details', params: {'id': '1'});
          },
          child: Text("前往详情页"),
        ),
      ),
    );
  }
}

DetailsPage.dart

import 'package:flutter/material.dart';

class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("详情页")),
      body: Center(
        child: Text("详情 ID: $id"),
      ),
    );
  }
}

步骤 2: 配置路由并使用`GoRouter`

在main.dart中，我们将设置GoRouter并定义路由。

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'HomePage.dart';
import 'DetailsPage.dart';

void main() {
  final goRouter = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        name: 'home',
        builder: (context, state) => HomePage(),
      ),
      GoRoute(
        path: '/details/:id',
        name: 'details',
        builder: (context, state) {
          final id = state.params['id']!;
          return DetailsPage(id: id);
        },
      ),
    ],
  );

  runApp(MyApp(goRouter: goRouter));
}

class MyApp extends StatelessWidget {
  final GoRouter goRouter;

  MyApp({required this.goRouter});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: goRouter.routeInformationParser,
      routerDelegate: goRouter.routerDelegate,
      title: 'GoRouter Demo',
    );
  }
}

在这个例子中，我们定义了两个路由：一个是首页（'/'），另一个是详情页（'/details/:id'）。注意我们在DetailsPage路由中使用了:id来表示这是一个动态的路径参数。

使用`goNamed`和`pushNamed`

在HomePage的示例中，我们已经展示了如何使用goNamed从首页导航到详情页。如果你想在导航堆栈上添加详情页而不是替换当前页面，可以改为使用pushNamed方法。这在GoRouter中的用法跟goNamed很相似，只是行为不同（添加而不是替换）。

// 在某个事件或按钮点击中使用 pushNamed 导航到详情页
context.pushNamed('details', params: {'id': '2'});

小结

通过上述示例，我们演示了如何在Flutter应用中使用GoRouter进行命名路由导航。namedLocation、goNamed和pushNamed方法提供了一种声明式和灵活的方式来处理应用内的导航，使得路由管理更加直观和简洁。

详细介绍GoRouter中的namedLocation，goNamed， pushNamed

namedLocation

goNamed

pushNamed