Flutter：go_router 如何将多个参数传递给其他屏幕？

Question

在 vanilla flutter 中，我用来将多个参数传递给其他屏幕，如下所示：

    Navigator.of(context).push(MaterialPageRoute(
                                    builder: (_) => CatalogFilterPage(
                                          list: list,
                                          bloc: bloc,
                                        )))

非常简单和容易。 我可以传递 2 个需要的参数，list 和 bloc。 在 CatalogFilterPage 中使用它之后。

现在切换到 go_router 并查看文档后，我似乎无法找到如何传递多个数据。 即使传递单个对象似乎也不是那么好：

    onTap: () =>
              context.pushNamed('SelectedCatalogItem', extra: list[index]),

在路由器中，我必须使用转换来设置正确的类型：

    builder: (context, state) => SelectedCatalogItem(
                    item: state.extra as ListItemsModel,
                  ),

对于单个参数来说很好。 但是现在我不知道如何传递多个参数。 我该怎么做？ 甚至传递参数，比如模型，作为额外的是正确的方法吗？

PS 我知道您可以将参数作为context.pushNamed('CatalogFilterPage', params: ___)传递，但是params的类型为 Map<String, String> 女巫不允许我传递模型的

Answer 1

Helo，我只是尝试使用我自己的代码。 所以，就我而言，我想将 MenusModels 从 HomeScreen 解析到其他屏幕（ItemScreen）

context.push(
    '/item-screen',
    extra: widget.menuModels,
  ),

在我的 route.dart

GoRoute(
    path: '/item-screen',
    builder: (context, state) {
      MenuModels models = state.extra as MenuModels;
      return ItemScreen(
        menuModels: models,
      );
    },
  ),

Answer 2

概括：

params , queryParams , extra三种方式

1. 使用params
   • 当您事先知道参数的数量时
   • 用法： path = '/routeName/:id1/:id2'
2. 使用queryParams
   • 当您不确定参数的数量时
   • 用法： path = '/routeName'
3. 使用extra
   • 当你想传递object时

解释：

1.使用Params

如果要在settings路由中添加name参数，路径参数应为/settings:name 。 您可以使用state.params["name"] variable访问路由参数。

将其定义为：

 GoRoute(
    path: "/settings/:name",
    builder: (context, state) => SettingsPage(
      name: state.params["name"]!,
    ),
 );

接收为：

 class SettingsPage extends StatelessWidget {
  final String name;

  const SettingsPage({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

2.使用queryParams

您可以在context.goNamed()函数中访问queryParams 。 queryParams最好的一点是您不必在路由路径中显式定义它们，并且可以使用state.queryParams方法轻松访问它们。 您可以添加其他与用户相关的数据作为查询参数。

像这样添加参数

child: ElevatedButton(
  onPressed: () => context.goNamed("settings", 
  queryParams: {
    "email": "example@gmail.com",
    "age": "25",
    "place": "India"
    }),
    child: const Text("Go to Settings page"),
),

接收为：

GoRoute(
  name: "settings",
  path: "settings",
  builder: (context, state) {
    state.queryParams.forEach(
      (key, value) {
        print("$key:$value");
       },
     );
   return SettingsPage();
 },
)

3.使用extra

 GoRoute(
    path: '/sample',
    builder: (context, state) {
      Sample sample = state.extra as Sample; // -> casting is important
      return GoToScreen(object: sample);
    },
  ),

有关在路由之间传递object的信息，请参阅https://stackoverflow.com/a/74813017/13431819 。

Answer 3

从go_router文档中我们可以看到：

The extra object is useful if you'd like to simply pass along a single object to the builder function w/o passing an object identifier via a URI and looking up the object from a store.

您可以做的是将“SelectedCatalogItem”的 ID/名称作为参数传递，然后稍后（如果可能）形成 Object。 'params' 参数让我们可以传入多个字段

onTap: () => context.pushNamed('SelectedCatalogItem',
                  params: {"id":list[index].id.toString(),"name":list[index].name}),

然后在 GoRouter 的构建器 function 中我们可以这样做：

GoRoute(
        path: 'selectedCatalogItem/view/:id/:name',
        name: 'SelectedCatalogItem',
        builder: (context, state){
          int id = int.parse(state.params['id']!);
          String name = state.params['name']!;
          // use id and name to your use...
        });

Answer 4

我是 Flutter 的新手，但这里是我如何使用context.push()的extra属性将多个参数/参数传递给 GoRouter 的路由：

// navigate to /my-path, pass 2 arguments to context.state.extra
context.push("/my-path", extra: {"arg1": firstArg, "arg2": secondArg});

然后，在我的路线内：

// ...
// Use arguments in builder of the GoRoute
GoRoute(
  path: '/dashboard',
  builder: (context, state) {
    Map<String, MyCustomType> args =
      state.extra as Map<String, MyCustomType>;
    return MyWidget(arg1: args["arg1"]!, arg2: args["arg2"]!);
  }
),
// ...