快速使用 Flutter Card 组件指南

最新推荐文章于 2025-06-11 11:02:32 发布

帅次

最新推荐文章于 2025-06-11 11:02:32 发布

阅读量878

点赞数 36

分类专栏： Flutter 文章标签： javascript flutter android ios iphone 小程序 swift

本文链接：https://blog.csdn.net/g984160547/article/details/146070387

版权

Flutter 专栏收录该内容

40 篇文章

订阅专栏

一、引言

Card 是 Flutter 提供的一个用于展示内容的卡片组件，通常用于信息展示、列表项包装、通知等场景。

Card 组件默认带有圆角和阴影效果，使其在 UI 设计上更加美观。本文将详细介绍 Card 的基本用法、主要属性及自定义样式。

二、Card 的基本用法

Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('这是一个基础卡片'),
  ),
)

Card 组件通常与 Column、Row、ListTile 等组件结合使用。

Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text('标题', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(height: 10),
        Text('这是 Card 组件的基本示例。'),
      ],
    ),
  ),
)

三、主要属性

属性	说明
`child`	Card 的子组件，可包含 `Column`、`ListTile` 等
`color`	卡片背景颜色
`elevation`	卡片的阴影高度
`shape`	自定义卡片形状，如圆角矩形、边框等
`margin`	Card 的外边距
`clipBehavior`	设置子组件超出 `Card` 边界时的裁剪行为

3.1 elevation (阴影高度)

控制卡片的阴影大小，默认值为1.0

Card(
  elevation: 5.0, // 增加阴影高度
  child: ...
)

3.2 shape (形状)

自定义卡片的形状，如圆角大小

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: ...
)

3.3 color (颜色)

设置卡片的背景颜色

Card(
  color: Colors.blue[100],
  child: ...
)

3.4 margin (外边距)

设置卡片与其他组件的间距

Card(
  margin: EdgeInsets.all(10.0),
  child: ...
)

3.5 完整示例

Card(
  elevation: 8.0,
  margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12.0),
  ),
  child: Container(
    padding: EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '卡片标题',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 8),
        Text('卡片内容部分，可以放置各种组件'),
        SizedBox(height: 8),
        Align(
          alignment: Alignment.centerRight,
          child: TextButton(
            onPressed: () {},
            child: Text('我是按钮'),
          ),
        ),
      ],
    ),
  ),
)

四、结合 ListTile 组件使用

Card 常用于列表项的包装，ListTile 可提供更丰富的内容展示。

Card(
  child: ListTile(
    leading: Icon(Icons.account_circle, size: 40),
    title: Text('用户名'),
    subtitle: Text('用户描述信息'),
    trailing: Icon(Icons.arrow_forward),
    onTap: () {
      print('Card 被点击');
    },
  ),
)

五、带图片的 Card 示例

Card 组件也可用于展示带图片的内容，如商品卡片、文章预览等。

Card(
  clipBehavior: Clip.antiAlias,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    children: <Widget>[
      Image.network('https://i-blog.csdnimg.cn/direct/fba26464e5df4319ade2a21febdf3721.png0'),
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('这是带图片的 Card 示例', style: TextStyle(fontSize: 16)),
      ),
    ],
  ),
)