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

Question

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

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

我已将 routes.dart 中的代码放在下面。对于那些知道这个 'stuff' 的人，我相信这很简单......我希望很快它也适用于我。预先感谢您提供的任何帮助。

这是 error/help 条消息。我试了又试，但没能克服这个！消息开始：（新）FoodScreen FoodScreen( 集集，{ 必填类别类别，目的？争论， }) 包：myapp/models/food_screen.dart

命名参数'category'是必需的，但没有对应的参数。尝试添加所需的参数。留言结束。

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),
          ),
          ),
    );
  }
}

Answer 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
              };

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

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

Flutter Navigation, Required Argument, Separate Routes File, How to Properly Code

navigation

arguments

routes

switch-statement

flutter