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

4次阅读

共计 2605 个字符，预计需要花费 7 分钟才能阅读完成。

除了通用的组件之外，flutter 还提供了两种格调的非凡组件，其中在 Material 格调中，有一个 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 外面蕴含了一个 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 一起构建更加好看和简单的零碎。