乐趣区

关于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

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

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

退出移动版