第五章：Scrollable Widgets(一) -- 项目准备-优快云博客

本文链接：https://blog.youkuaiyun.com/u010483016/article/details/123618294

本章我们将会学习Flutter中的Scrollable Widgets，包括ListView，scroll view的嵌套，GridView等。
现在我们继续回到Fooderlich项目中，新增两个页面Explore 和 Recipes。第一个展示了当天流行的食谱以及你的朋友在做什么：
在这里插入图片描述
第二个显示了食谱库，如果你还不确定今天该做点什么的话，这个对你很有帮助：

在我们学习ListView之前，我们先从下面的地址把第五章的源码中的starter项目下载下来，然后运行起来。

素材及源码地址：https://github.com/raywenderlich/flta-materials

注意：由于源码使用的版本比较老旧，直接拷贝过来运行的话有不少问题，建议新建项目后把代码和资源拷贝过来比较方便。

填了半天坑之后，终于顺利的跑起来了。。。

assets文件夹下面包含了我们需要的图片及数据资源：
在这里插入图片描述
具体的使用在我们后面的代码中会体现出来。

在lib文件夹里，也新增了许多的类：
在这里插入图片描述
api包里是为我们准备模拟数据的服务类，在后台没有准备好数据的时候我们可以建立一个模拟服务类这样就不需要模拟对象实体了，只需要返回一些JSON数据即可。

models包里是我们将要用到的一些实体类：

ExploreRecipe：关于一个食谱的所有细节。它包含烹饪材料、烹饪说明、持续时间和很多具体的细节。
Ingredient：一种单一的烹饪原料。这是ExploreRecipe的一部分。
Instruction：一个烹饪食谱的说明。这是ExploreRecipe的一部分。
Post：描述了一个朋友的帖子。一篇帖子类似于一条微博啥的，晒晒你的烹饪成果之类的。
ExploreData：将两个数据集放在一起。它包含一个ExploreRecipe lisit和一个Post list。
SimpleRecipe：简易食谱。

models.dart充当工具人，把我们需要的类都导入在这个文件中，这样我们就只需要导入它一个类就行了，看看它的代码你就懂了：

export 'explore_recipe.dart';
export 'post.dart';
export 'simple_recipe.dart';
export 'explore_data.dart';

components包里是我们需要用到的一些组件，我们在之前的学习中有实现过它们。