Flutter 导航，必填参数，单独的路由文件，如何正确编码

Posted 2023-02-22

【中文标题】Flutter 导航，必填参数，单独的路由文件，如何正确编码

【英文标题】：Flutter Navigation, Required Argument, Separate Routes File, How to Properly Code

【发布时间】：2022-01-15 13:29:24

【问题描述】：

所以我正在学习一个教程并超越了自己，但我真的很想让这个工作。我已将导航移至“routes_constants.dart”和“routes.dart”。常量如果没问题。路线是我遇到问题的地方。在花了几个小时试图定位和了解自己之后，我正在寻求帮助。

我有一个带有“final Category category”的“FoodScreen”。问题是在 routes.dart switch/case/default 代码中调用所需的类别。

我已将来自 routes.dart 的代码放在下面。对于那些知道这些“东西”的人，我相信它很简单……很快我希望它也适合我。提前感谢您提供的任何帮助。

这是错误/帮助消息。我已经尝试并尝试过，但无法征服它！ 消息开始： （新）FoodScreen FoodScreen（ 集集， 必需的类别类别， 目的？争论， ) 包：myapp/models/food_screen.dart

命名参数“类别”是必需的，但没有对应的参数。 尝试添加所需的参数。 消息结束。

routes.dart 代码如下：

import 'package:flutter/material.dart';
import 'package:myapp/models/category.dart';
import 'package:myapp/models/category_screen.dart';
import 'package:myapp/models/category_item.dart';
import 'package:myapp/models/food_screen.dart';
import 'package:myapp/routes/route_constants.dart';

Route<dynamic> generateRoute(RouteSettings routeSettings) 
  // Getting arguments passed in while calling Navigator
  final args = routeSettings.arguments;

  switch (routeSettings.name) 
    case RouteNames.CategoryScreenRoute:
      return MaterialPageRoute(builder: (context) => CategoryScreen());
    case RouteNames.FoodScreenRoute:
      return MaterialPageRoute(builder: (context) => FoodScreen(??? THIS NEEDS FIX ???));
    default:
      return MaterialPageRoute(builder: (context) => CategoryScreen());
  

FoodScreen.dart 代码如下：

import 'package:flutter/material.dart';
import 'package:myapp/models/category.dart';

class FoodScreen extends StatelessWidget 
  final Category category;
  FoodScreen(
    Set set, 
    required this.category,
    Object? argument,
  );
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('$category.content'),
      ),
      body: Center(
          child: Text(
          'Category: $category.content',
          style: TextStyle(fontSize: 24),
          ),
          ),
    );
  

【问题讨论】：

尝试阅读this。

【参考方案1】：

我对 Flutter 也很陌生，但我相信如果目标是在您使用 Navigator 调用它时将 category 传递给您的 FoodScreen，您可以执行以下操作：

routes.dart：

...
case RouteNames.FoodScreenRoute:
      return MaterialPageRoute(builder: (context) => FoodScreen(
          category: ModalRoute.of(context)!.settings.arguments as Category
      ));
...

FoodScreen.dart：

import 'package:flutter/material.dart';
import 'category.dart';

class FoodScreen extends StatelessWidget 
  final Category category;

  const FoodScreen(
    Key? key,
    required this.category,
  ) : super(key: key); // I believe its best to give widgets keys

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('$category.content'),
      ),
      body: Center(
        child: Text(
          'Category: $category.content',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  

那么我认为您可以使用

致电您的FoodScreen

Navigator.pushNamed(context, RouteNames.FoodScreenRoute,
                    arguments: category); //where this category has been declared earlier
              ;

在我回家之前我无法实际测试这个，但如果它有效，请告诉我。

【讨论】：

非常感谢您的帮助。抱歉，直到今天早上才能测试您的代码。仍然有问题，几乎相同的问题，routes.dart case/return 似乎从来没有与小写“类别”参数有“连接”。

我要去github查看一些flutter/routes/argument代码。再次感谢...我会继续努力:(