食谱簿：食谱列表

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 28 课，共 33 课。

现在用本单元所学的内容来构建一个完整的应用：一本食谱书。它包含一个食谱列表，每个食谱都有自己的页面，显示所需食材，还有一个收藏夹标签页。

先从数据开始。应用中已经有一个 Recipe 类，包含名称、所需时间（分钟）和食材列表，并且在 build 的开头有四个食谱。每个食谱的 ingredients 都是一个 List<String>：字段也可以是列表。

第一个页面是列表。食谱可能会增加到数百个，所以要用 ListView.builder 来构建，每个食谱对应一个 ListTile。

挑战

简单

将 No recipes yet 文本替换为菜谱列表：

使用 ListView.builder，为每道菜谱添加一个 ListTile
每个列表项的 leading: 设置为 Icons.restaurant_menu，标题显示菜谱名称，副标题显示 20 min（使用菜谱对应的分钟数）

亲手试试

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final List<Recipe> recipes = [
      Recipe(name: 'Pancakes', minutes: 20, ingredients: ['Flour', 'Eggs', 'Milk', 'Butter']),
      Recipe(name: 'Tomato Soup', minutes: 35, ingredients: ['Tomatoes', 'Onion', 'Garlic', 'Olive oil']),
      Recipe(name: 'Guacamole', minutes: 10, ingredients: ['Avocados', 'Lime', 'Onion', 'Salt']),
      Recipe(name: 'Fried Rice', minutes: 25, ingredients: ['Rice', 'Eggs', 'Peas', 'Soy sauce']),
    ];
    return Scaffold(
      appBar: AppBar(title: const Text('Recipe Book')),
      body: const Center(
        child: Text('No recipes yet'),
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;

  Recipe({required this.name, required this.minutes, required this.ingredients});
}