第二章：Hello,Flutter（三）-优快云博客

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

本文介绍了如何使用Flutter将食谱列表展示升级为美观的Card设计。通过ListView.builder创建列表，并自定义Widget buildRecipeCard将每个食谱数据转化为包含图片和名称的Card。教程详细解释了代码实现过程，展示了从简单文字列表到图文并茂的Card列表的转变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter-从入门到放弃(目录,持续更新中)

展示食谱列表

食谱的数据已经创建完毕，现在我们在APP中建立一个列表来展示这些数据。
在_MyHomePageState类中，之前我们为body属性赋值的SafeArea的child是一个简单地Container，现在我们把它替换为一个列表。具体代码和效果如下：

body: SafeArea(
        //4.主UI，使用ListView创建一个列表
        child: ListView.builder(
          //5.列表的行数
          itemCount: Recipe.samples.length,
          //6.列表中每一行所展示的UI，现在简单地展示菜谱的名称，后面将持续优化
          itemBuilder: (BuildContext context,int index){
            return Text(Recipe.samples[index].label);
          },
        ),
      ),

在这里插入图片描述

为列表添加card

之前的UI太简单了，只是把美食的名称展示出来而已，我们准备的图片还没有用上。我们使用一个Card来把数据对象展示出来，在Material Design中，一个Card可以把一个实体类展示为一个特定区域的Widget，我们使用一个如下结构的Card来展示菜谱数据：
在这里插入图片描述
在main.dart中，我们自定义一个Widget，来把菜谱数据变为一个Card，在_MyHomePageState底部，添加如下方法：

Widget buildRecipeCard(Recipe recipe) {
    //1.构造的Widget就是一个Card
    return Card(
      //2.Card的child就是一个Column，Column是一个垂直布局的Widget
      child: Column(
        //3.Column里垂直方向上放置了Image和Text
        children: <Widget>[
          Image(image: AssetImage(recipe.imageUrl)),
          Text(recipe.label)
        ],
      ),
    );
  }

然后将itemBuilder中的返回值替换为buildRecipeCard()方法。

itemBuilder: (BuildContext context, int index) {
            return buildRecipeCard(Recipe.samples[index]);
          },

图片是我自己随便找的，最终效果如下：
在这里插入图片描述
写完了上面的代码，感觉语法上面是挺简单的，很接近自然语言，就是这个嵌套比较考验眼力，或许写多了以后就习惯了吧。