介绍除了常用组件，flutter还提供了两种风格的特殊组件。在Material样式中，有一个Card组件，可以很方便的用来绘制卡片。样式界面，还有圆角和阴影，非常好用，一起来看看吧。Card详解在详解Card之前，我们先考虑一下Card什么时候用？说到名片，大家的第一印象就是名片，名片上描述了一个人的相关信息，比如姓名、电话号码、邮箱地址等。卡片是将一组相关信息放在一起的组件。我们看一下Card的定义：classCardextendsStatelessWidget可以看到Card是一个无状态的Widget，Card的构造函数需要传入更多的参数。下面是Card的构造函数：constCard({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中指定的颜色，如果CardTheme.color也为空，则使用ThemeData.cardColor代替。shadowColor表示卡片阴影的颜色。如果未设置，将使用ThemeData.cardTheme的shadowColor代替。如果CardTheme.shadowColor也为空，则将使用ThemeData.shadowColor。elevation是卡片在Z轴上的位置。通过设置这个值，我们可以控制Card下阴影的大小。shape是Card的形状，它是一个ShapeBorder对象，已知的实现有很多，比如CircleBorder、RoundedRectangleBorder、ContinuousRectangleBorder、BeveledRectangleBorder等。borderOnForeground表示是否在child之前显示Card的边框。clipBehavior是Card的裁剪规则。margin是卡片周围的空白区域。semanticContainer是一个bool值，表示Card中的children是否具有相同的语义，或者它们的类型是否一致。最后一个参数是child，代表Card中的子元素。Card中虽然只有一个child，但是这个child可以是一个可以包含多个child的widget，比如Row或者Column。Card的使用通过上面的讲解，我们对Card的使用也有了一个基本的了解。接下来我们可以通过一个具体的例子来看看Card是如何使用的。Card虽然包含子widget，子widget可以是任意值，但通常与Column或Row一起使用。这里我们使用Column来创建一个类似于名片的界面。Column中有一个children属性，可以包含多个子元素。我们可以在每一行中放置图片或文字。如果你想做复杂的布局，也可以自由组合。但是对于名片这种常见的应用，flutter已经帮我们想好了，所以他提供了一个组件叫ListTile。ListTile是一个固定高度的行，可以包含前导图标或尾随图标。还可以包含标题、副标题和一些点击交互，非常方便。ListTile的具体使用可以参考具体的API，这里不再赘述。这里我们只是使用ListTile来构建我们需要的效果。不同的ListTile组件可以通过Divider进行划分，让界面更加美观。下面是我们CardApp的代码：classCardAppextendsStatelessWidget{constCardApp({Key?key}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnSizedBox(height:210,child:Card(child:Column(children:[constListTile(title:Text('韩梅梅',style:TextStyle(fontWeight:FontWeight.w500),),subtitle:Text('上海，张江'),leading:SizedBox(width:20,child:Center(child:CircleAvatar(backgroundImage:AssetImage('images/head.jpg'),radius:10,))),),constDivider(),ListTile(title:constText('18888888888',style:TextStyle(fontWeight:FontWeight.w500),),leading:Icon(Icons.contact_phone,颜色:Colors.blue[500],),),ListTile(title:constText('hanmeimei@163.com'),leading:Icon(Icons.contact_mail,颜色:Colors.blue[500],),),],),),);}}运行Scaffoldbody中的CardApp，可以得到如下界面：可以看到Card底部有明显的3D效果。这里我们使用三个ListTile，第一个包含title和subTtile属性。前两个ListTiles使用Divider来划分，非常好用。综上所述，以上就是Flutter中Card的使用。您可以结合ListTile来构建一个更漂亮、更复杂的系统。更多内容请参考www.flydean.com，最通俗的解读，最深刻的干货，最简洁的教程，还有很多你不知道的小技巧等你来发现！欢迎关注我的公众号：《程序那些事儿》，懂技术，更懂你！
