食谱簿：收藏夹

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

你每周都会做一些食谱。每行末尾的心形表示是否收藏：未收藏时是空心，收藏时是红色实心。

食谱是否已收藏属于食谱的一部分，所以它会成为一个字段。和其他字段不同，它会变化，所以它不是 final，初始值为 false：

bool favorite = false;

会变化的数据需要使用 setState，因此 HomeScreen 会变成一个 StatefulWidget。食谱会从 build 中移出，放到 State 类里：在 build 中创建的列表会在每次调用 setState 时重新创建，所有心形都会变回空心。

心形是一个 IconButton。它使用 ? : 在实心和空心心形之间选择图标，按下按钮时会切换字段的值：recipe.favorite = !recipe.favorite。

挑战

困难

为每道菜添加一个收藏爱心：

为 Recipe 添加字段 bool favorite = false;
将 HomeScreen 改为 StatefulWidget，并把菜谱列表移到它的 State 类中
为每个列表项添加一个 trailing: IconButton，显示 Icons.favorite_border；如果菜谱已收藏，则显示红色的 Icons.favorite。点击它会切换 favorite 的值

亲手试试

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: ListView.builder(
        itemCount: recipes.length,
        itemBuilder: (context, index) {
          final Recipe recipe = recipes[index];
          return ListTile(
            leading: const Icon(Icons.restaurant_menu),
            title: Text(recipe.name),
            subtitle: Text('${recipe.minutes} min'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => RecipeScreen(recipe: recipe)),
              );
            },
          );
        },
      ),
    );
  }
}

class RecipeScreen extends StatelessWidget {
  const RecipeScreen({super.key, required this.recipe});

  final Recipe recipe;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(recipe.name)),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 24),
          const Text('Ingredients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          for (String ingredient in recipe.ingredients)
            ListTile(
              leading: const Icon(Icons.check_circle_outline),
              title: Text(ingredient),
            ),
        ],
      ),
    );
  }
}

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

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