第六十八回：Card Widget_cardwidget-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/131405005

文章介绍了CardWidget在Flutter中的使用，作为一个容器组件，它可以包含其他组件并随其大小变化。Card具有边距、阴影、颜色等属性，常用于创建带有阴影和圆角效果的视图。示例代码展示了Card的基本配置，强调了自定义内部组件布局的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概念介绍
使用方法
示例代码

我们在上一章回中介绍了DataTable的排序功能相关的内容，本章回中将介绍 Card Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的Card Widget是一种容器类组件，它可以包含其它的组件，它的大小随着被包含组件的大小变化而变化。它自身不能显示内容，但是可以包含其它的组件来显示内容。它就像生活中的像框，可以存放相片，而且还可以给相片做陪衬。它类似IOS中的UIView或者Android中的Fragment,当然了Android后期也推出了Card组件。本章回中将详细介绍Card组件的使用方法。

使用方法

和其它组件类似Card提供了相关的属性来控制自己，下面是该组件中常用的属性：

margin属性：主要用来控制card与屏幕的边距;
elevation属性：主要用来控制阴影的范围，值越大阴影越明显;
shadowColor属性：主要用来控制阴影的颜色;
color属性：主要用来控制Card的背景颜色；
shape属性：主要用来控制Card外层的边框;
child属性：主要用来存放其它的子组件；

示例代码

Card(
  //设置card屏幕的边距
  margin:const EdgeInsets.all(20) ,
  //控制阴影的范围，值越大阴影越明显
  elevation: 20,
  //设置阴影的颜色
  shadowColor: Colors.redAccent,
  //设置card的背景颜色
  color: Colors.green,
  //设置card外层的边框
  shape: RoundedRectangleBorder(`在这里插入代码片`
    borderRadius: BorderRadius.circular(16.0),
    side: const BorderSide(
      width: 1,
      color: Colors.grey,
    ),
  ),
  //自行设置card内的组件排列效果
  child: ,
);

上面的代码中只列出了核心代码，而且没有给child属性赋值，大家可以到Github上ex031文件中查看完整的代码。

关于Card组件，我想说的是它只是一个容器，只不过该容器自带圆角和阴影效果，放到手机屏幕上有种立体的效果，给人一种比较好看的感觉，使用该组件的核心在于自定义Card内部组件的排列方式和显示内容。大家可以自行设计或者依据项目需求来设计该组件内部的内容，鉴于这个原因，我们在示例代码中没有给child属性赋值，为的是把创作空间留给大家。

看官们，关于Cart Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!