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"]!);
  }
),
// ...