2.8　使用Card小部件和图片

现在应用中只有一个导航栏，Scaffold是用来创建页面的，不仅可以在它上面创建AppBar，还可以添加其他参数，把鼠标悬停在Scaffold上，会看到有一个参数body，如图2.13所示。

图2.13　Scaffold中的参数body

body显示在appBar的下面，它也需要传递一个小部件。在body：后面创建一个Flutter的小部件，也可以是自定义的小部件。自定义的小部件会形成Flutter附带的小部件树，但最终也会递归成Flutter附带的小部件，这是因为只有Flutter附带的小部件才能被转化为原生的UI组件。

在body里添加一个Card小部件，它也是flutter/material包中附带的。Card中的内容突出显示，还略带阴影效果。同样它也需要传递一些参数，其中一个重要的参数是child，child同样也需要传递一个小部件。传递的小部件就是显示在卡片上的内容。

我们在卡片上加图片和图片下面的标题这两个元素，这里需要传入另外一个小部件，它也是Flutter附带的，即Column小部件。它同样需要传入参数，其中一个参数叫children，和child不同，child只需传一个小部件，children需要传入多个小部件并上下排列。代码如下：

用<>括起来的写法叫泛型，是数组的一个附加注解，使我们更清楚地知道这个数组只能包含小部件。[]括起来的是数组，可以传入一组数据而不仅仅是一个数据，例如Column、Card、AppBar、Text、Scaffold等。这里可以添加两个小部件，以逗号分隔。一个是小部件Image，它也是包flutter/material附带的；另一个是Text小部件，并传入一个字符串'news1'。代码如下：

Image需要传入一张图片，在项目中创建一个目录，命名为assets，用它来保存静态资源。我们可以任意找一张图片，并重命名为news1.jpg，然后把它拖放到assets这个目录下。要显示这张图片，把它放到这个目录下还不够，我们需要在pubspec.yaml这个文件中配置访问图片的路径。访问的文件是assets下面的news1.jpg，如图2.14所示。

现在就可以在项目中使用这张图片了。在main.dart中，可以使用Image小部件特别的构造器来创建，Image小部件和括号之间加.asset，代码如下：

Image将加载已经配置好的资源，参数是资源的路径，类型是String。保存后，图片将会被加载到App上，如图2.15所示。

图片和图片下面的标题分布在Card上面，占据了整个Card的宽和高，可以看到底部略带阴影，但是我们希望构建更多的内容来形成小部件树。接下来我们学习更多的核心小部件。

图2.14　配置图片路径

图2.15　图片在App上显示的效果