简介

除了通用的组件之外，flutter 还提供了两种风格的特殊组件，其中在 Material 风格中，有一个 Card 组件，可以很方便的绘制出卡片风格的界面，并且还带有圆角和阴影，非常的好用，我们一起来看看吧。

Card 详解

在详细讲解 Card 之前，我们考虑一下什么时候会用到 Card？

一提到 Card 大家第一印象就是名片，在名片中描述了一个人的相关信息，比如姓名，电话和邮箱等。而 Card 就是将一组相关的信息放在一起呈现的组件。

我们来看下 Card 的定义：

class Card extends StatelessWidget 

可以看到 Card 是一个无状态的 Widget,Card 的构造函数需要传入比较多的参数，下面是 Card 的构造函数：

  const Card({    Key? key,    this.color,    this.shadowColor,    this.elevation,    this.shape,    this.borderOnForeground = true,    this.margin,    this.clipBehavior,    this.child,    this.semanticContainer = true,  })

color 表示的是 Card 的背景颜色，如果不设置的话，会使用 ThemeData.cardTheme 中指定的 color，如果 CardTheme.color 也是空的话，那么会使用 ThemeData.cardColor 来替代。

shadowColor 表示的是 Card 阴影的颜色，如果不设置的话，会使用 ThemeData.cardTheme 的 shadowColor 来代替，如果 CardTheme.shadowColor 也是空的话，那么会使用 ThemeData.shadowColor 来替代。

elevation 是 Card 在 Z 轴的位置，通过设置这个值，我们可以控制 Card 下面 shadow 的大小。

shape 是 Card 的形状，它是一个 ShapeBorder 对象，有很多已知的实现，比如 CircleBorder,RoundedRectangleBorder,ContinuousRectangleBorder,BeveledRectangleBorder 等。

borderOnForeground 表示是否将 Card 的 border 在 child 之前展示。

clipBehavior 是 Card 的裁剪规则。margin 是 card 周围的空白部分。

semanticContainer 是一个 bool 值，表示 Card 中的 child 是否都具有相同的 semantic，或者说他们的类型是一致的。

最后一个参数就是 child 了，表示 Card 中的子元素。虽然 Card 中的 child 只有一个，但是这个 child 可以是可以包含多个 child 的 widget，比如 Row 或者 Column 等。

Card 的使用

通过上面的讲解，我们对 Card 的使用也有了基本的了解，接下来我们可以通过一个具体的例子，来看看 Card 具体是如何使用的。

虽然 Card 里面包含了一个 child widget，这个 child widget 可以是任何值，但是通常来说还是和 Column 或者 Row 一起使用的比较多。

这里我们使用 Column 来创建一个类似于名片的界面。

Column 中有一个 children 的属性，可以包含多个子元素，我们可以在每一行中放上图片或者文字，如果要想进行复杂的布局，还可以自由进行复杂的组合。

但是对于类似名片这种常见的应用，flutter 早就为我们想好了，所以他提供了一个叫做 ListTile 的组件。

ListTile 是一个固定高度的 Row，并且可以包含一个 leading icon 或者 trailing icon。还可以包含 title，subtitle 还有一些点击的交互，非常的方便。

具体 ListTile 的使用，大家可以去参考具体的 API，这里就不过多讲述。

这里我们只是借用 ListTile 来构造我们需要的效果。

不同的 ListTile 组件，可以用 Divider 来进行分割，让界面更加美观。

下面是我们 CardApp 的代码：

class CardApp extends StatelessWidget{  const CardApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return SizedBox(      height: 210,      child: Card(        child: Column(          children: [            const ListTile(              title: Text(                'Han MeiMei',                style: TextStyle(fontWeight: FontWeight.w500),              ),              subtitle: Text('上海，张江'),              leading: SizedBox(                width: 20,                child:Center(                    child: CircleAvatar(                      backgroundImage: AssetImage('images/head.jpg'),                      radius: 10,                    ))              ),            ),            const Divider(),            ListTile(              title: const Text(                '18888888888',                style: TextStyle(fontWeight: FontWeight.w500),              ),              leading: Icon(                Icons.contact_phone,                color: Colors.blue[500],              ),            ),            ListTile(              title: const Text('hanmeimei@163.com'),              leading: Icon(                Icons.contact_mail,                color: Colors.blue[500],              ),            ),          ],        ),      ),    );  }}

将 CardApp 放在 Scaffold 的 body 中运行，可以得到下面的界面：

大家可以看到 Card 的底部是有明显的 3D 效果的。这里我们使用了三个 ListTile，其中第一个同时包含了 title 和 subTtile 这两个属性。

前面两个 ListTile 使用 Divider 进行分割，非常的好用。

总结

以上就是 flutter 中 Card 的使用了，大家可以结合 ListTile 一起构建更加美观和复杂的系统。