如何使用 Dart 解决 Flutter 应用程序中的路由错误？

Question

我正在开发一个使用 Dart 作为后端语言的颤振应用程序。尝试使用
Navigator.of(context).NamedRoute() 浏览页面时
我收到一条错误消息
Could not find a generator for route RouteSettings("/item-category", {id: Vegetables, title: Vegetables}) in the _WidgetsAppState. 我已经在每个小部件中完成了必要的导入，但没有在代码中提及。

我的 main.dart 文件是：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grow Eat Food',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        fontFamily: 'Raleway',
      ),
      initialRoute: '/', // default is '/'
      routes: {
        '/': (ctx) => MyHomePage(),
        EachItemDetailScreen.routeName: (ctx) => EachItemDetailScreen(),
        ItemListScreen.routeName: (ctx) => ItemListScreen(),
        Settings.routeName: (ctx) => Settings(),
        Profile.routeName: (ctx) => Profile(),
        Listings.routeName: (ctx) => Listings(),
      },
    );
  }
}

显示Items界面的界面在ItemListScreen类中，代码如下：

class ItemListScreen extends StatefulWidget {
  static const routeName = '/item-list';

  @override
  _ItemListScreenState createState() => _ItemListScreenState();
}

class _ItemListScreenState extends State<ItemListScreen> {
  @override
  Widget build(BuildContext context) {
    final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, String>;
    final categoryTitle = routeArgs['title'];
    final categoryId = routeArgs['id'];
    final categoryItems = ITEMS_DATA.where((item) {
      return item.categories.contains(categoryId);
    }).toList();
    return Scaffold(
      appBar: AppBar(
        title: Text(categoryTitle),
      ),
      body: ListView.builder(
        itemBuilder: (ctx, index) {
          return EachItem(
            id: categoryItems[index].id,
            title: categoryItems[index].title,            
          );
        },
        itemCount: categoryItems.length,
      ),
    );
  }
}

每个项目的模型设计是类Item。

enum Condition {
  Fresh,
  Frozen,
  Immediate_sale,
}

enum Status {
  Available,
  Pending,
  Sold,
}

class Item {
  final String id;
  final List<String> categories;
  final String title;
  final String imageUrl;
  final double price;
  final String priceType;
  // final DateTime harvestDate;
  final Condition condition;
  final Status status;
  final bool isOrganic;
  final Map location;

  const Item({
    @required this.id,
    @required this.categories,
    // may be more than one category
    @required this.title,
    @required this.imageUrl,
    @required this.price,
    @required this.priceType,
    // eg.per kg/per 12/per 100
    // @required this.harvestDate,
    @required this.condition,
    // fresh/frozen/should go immediately
    @required this.status,
    // sold/pending/available
    @required this.location,
    @required this.isOrganic,
  });
}

屏幕的行生成器子项中每个项目的小部件如下：

class EachItem extends StatelessWidget {
  final String id;
  final String title;
  /*final String imageUrl;
  final double price;
  final String priceType;
  // final DateTime harvestDate;
  final Condition condition;
  final Status status;
  final bool isOrganic;*/

  EachItem({
    @required this.id,
    // may be more than one category
    @required this.title,
    /*@required this.imageUrl,
    @required this.price,
    @required this.priceType,
    // eg.per kg/per 12/per 100
    // @required this.harvestDate,
    @required this.condition,
    // fresh/frozen/should go immediately
    @required this.status,
    // sold/pending/available
    @required this.isOrganic,*/
  });

  void selectItem(BuildContext context) {
    Navigator.of(context).pushNamed(
      ItemListScreen.routeName,
      arguments: id,
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectItem(context),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),
        ),
        elevation: 4,
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Positioned(
                  bottom: 20,
                  right: 10,
                  child: Container(
                    width: 300,
                    color: Colors.black54,
                    padding: EdgeInsets.symmetric(
                      vertical: 5,
                      horizontal: 20,
                    ),
                    child: Text(
                      title,
                      style: TextStyle(
                        fontSize: 26,
                        color: Colors.white,
                      ),
                      softWrap: true,
                      overflow: TextOverflow.fade,
                    ),
                  ),
                )
              ],
            ),                
          ],
        ),
      ),
    );
  }
}

ATM 我没有连接到 Firebase，并在我的代码中使用了虚拟数据作为数据提供者。一项的虚拟数据如下：

const ITEMS_DATA = const [
  Item(
    id: '1',
    title: 'Apple',
    categories: ['Fruits'],
    price: 3.5,
    priceType: 'per kg',
    // harvestDate: DateTime.parse('2012-02-27 13:27:00'),
    condition: Condition.Fresh,
    status: Status.Available,
    isOrganic: true,
    location: null,
    imageUrl:
        'https://cdn.pixabay.com/photo/2018/04/09/18/26/asparagus-3304997_1280.jpg',
  ),
];

Answer 1

ItemListScreen.routeName: (ctx) => ItemListScreen(),