第六十八回：Card Widget

最新推荐文章于 2025-12-01 09:19:47 发布

原创最新推荐文章于 2025-12-01 09:19:47 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #flutter #card #卡片效果 #立体效果

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

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

我们在上一章回中介绍了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相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!