关于flutter:flutter系列之Material中的3D组件Card

简介

除了通用的组件之外，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('[email protected]'),
              leading: Icon(
                Icons.contact_mail,
                color: Colors.blue[500],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

将CardApp放在Scaffold的body中运行，能够失去上面的界面：

大家能够看到Card的底部是有显著的3D成果的。这里咱们应用了三个ListTile，其中第一个同时蕴含了title和subTtile这两个属性。

后面两个ListTile应用Divider进行宰割，十分的好用。

总结

以上就是flutter中Card的应用了，大家能够联合ListTile一起构建更加好看和简单的零碎。

更多内容请参考 www.flydean.com

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」,懂技术，更懂你！