下面我们试一下 Flutter 的 Card 小部件 .. 我们可以把一组卡片小部件放在一个 ListView 里面 .. 这个 ListView 的孩子们可以使用一个 map 方法来生成 .. 用一下 posts.map .. 结果执行一下 toList 转换成一个列表 ..

在文件的上面再去导入一个文件 .. 上一级目录下面的 model 里的 post.dart .. 这个文件里定义了我们需要用的 posts ..

给 map 一个方法 .. 当前项目可以叫它 post .. 方法 return 的是一个 Card 组件 .. 卡片的 child ，可以用一个 Column .. 这样可以添加一组竖排显示的内容 ..

里面先添加一个图像 .. 可以把它放在一个 AspectRatio 里面，里面用一下 aspectRatio 设置一个比例，16/9 .. 它的 child 是个 Image .. 用一下 network ，设置一下网络图像的地址 .. 这里可以使用 post 里的 imageUrl 来表示 ..

给图像添加一个 fit，值设置成 BoxFit.cover ..

在图像的下面，可以再用一个 ListTile .. 先设置一下它的 leading 位置上的内容 .. 用一个 CircleAvatar .. 里面添加一个 backgroundImage .. 图像用一下 NetworkImage .. 把图像的地址交给这个方法 .. post.imageUrl ..

再添加一个标题 .. 一个 title 属性 .. 标题是一个 Text .. 文字是 post.title .. 再添加一个副标题 .. subtitle .. 副标题文字是 post.author ..

然后再去添加一段描述 .. 可以把它放在一个 Container 里面 .. 先用 padding 设置一下容器的内边距 .. 大小是 16.0 ..

容器的 child 是个 Text .. 文字是 post.description ..

这里我们可以限制一下文字的行数 .. maxLines 设置成 2 ，让它最多只能显示两行文字 .. 再设置一下 overflow .. TextOverflow .. ellipsis ..

ButtonBar

卡片里面可以再添加两个按钮 .. 先用一个 ButtonTheme.bar .. 它的里面，再用一个 ButtonBar .. 在这个按钮栏的 children 里面可以添加一组按钮 .. 用一下 FlatButton ..

child 是个文字 .. 文字是 Like .. 接着用一下 toUpperCase 把文字转换成全部大写的 ..

按钮需要一个 onPressed .. 给它一个空白的方法 ..

复制一份 .. 修改一下按钮上的文字 ... Read ...

再到模拟器上 ... 浏览一下我们创建的这组卡片 ..