引言

在Flutter开发中，Card是实现Material设计风格卡片的核心组件。它提供了标准的卡片样式，包括阴影、圆角和边框等效果。本文将深入解析Card组件的核心属性和使用技巧，并通过新闻资讯应用的实际案例展示如何使用Card打造精美的卡片效果。

一、Card核心属性

1.1 属性概览

Card组件的核心属性：

属性	类型	默认值	作用
elevation	double	1.0	阴影高度
color	Color	Theme.cardColor	背景颜色
shape	ShapeBorder	RoundedRectangleBorder	形状
margin	EdgeInsetsGeometry	4.0	外边距
clipBehavior	Clip	Clip.none	裁剪行为
semanticContainer	bool	true	是否为语义容器
child	Widget	-	子组件

1.2 基础用法

// 简单卡片
Card(
  child: const ListTile(
    title: Text("卡片标题"),
    subtitle: Text("卡片副标题"),
  ),
)

// 带阴影的卡片
Card(
  elevation: 8,
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text("带阴影的卡片"),
  ),
)

二、阴影效果

2.1 elevation属性

elevation控制卡片的阴影高度，值越大阴影越明显：

Card(
  elevation: 4,
  child: Padding(padding: EdgeInsets.all(16), child: Text("阴影高度4")),
)

2.2 不同阴影级别

Row(
  children: [
    Expanded(
      child: Card(
        elevation: 2,
        child: Padding(padding: EdgeInsets.all(16), child: Text("elevation: 2")),
      ),
    ),
    Expanded(
      child: Card(
        elevation: 4,
        child: Padding(padding: EdgeInsets.all(16), child: Text("elevation: 4")),
      ),
    ),
    Expanded(
      child: Card(
        elevation: 8,
        child: Padding(padding: EdgeInsets.all(16), child: Text("elevation: 8")),
      ),
    ),
  ],
)

三、卡片形状

3.1 默认形状

Card默认使用RoundedRectangleBorder：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
  ),
  child: Padding(padding: EdgeInsets.all(16), child: Text("默认形状")),
)

3.2 自定义圆角

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(padding: EdgeInsets.all(16), child: Text("自定义圆角")),
)

3.3 不同圆角

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(16),
      bottomRight: Radius.circular(16),
    ),
  ),
  child: Padding(padding: EdgeInsets.all(16), child: Text("不规则圆角")),
)

四、新闻卡片示例

4.1 基础新闻卡片

Card(
  elevation: 4,
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "科技新闻：Flutter 3.0发布",
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 8),
        Text("Flutter 3.0带来了多项新功能和性能优化..."),
        SizedBox(height: 12),
        Align(
          alignment: Alignment.centerRight,
          child: Text("2024-01-15"),
        ),
      ],
    ),
  ),
)

4.2 带图片的新闻卡片

Card(
  elevation: 4,
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Column(
    children: [
      ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
          topRight: Radius.circular(12),
        ),
        child: Image.network(
          "https://example.com/news.jpg",
          height: 150,
          width: double.infinity,
          fit: BoxFit.cover,
        ),
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "科技新闻：Flutter 3.0发布",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text("Flutter 3.0带来了多项新功能和性能优化..."),
          ],
        ),
      ),
    ],
  ),
)

4.3 水平新闻卡片

Card(
  elevation: 4,
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Row(
    children: [
      ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
          bottomLeft: Radius.circular(12),
        ),
        child: Image.network(
          "https://example.com/news.jpg",
          width: 120,
          height: 100,
          fit: BoxFit.cover,
        ),
      ),
      Expanded(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "科技新闻：Flutter 3.0发布",
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(height: 8),
              Text(
                "Flutter 3.0带来了多项新功能和性能优化...",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

五、可点击卡片

5.1 使用InkWell

Card(
  elevation: 4,
  child: InkWell(
    onTap: () {
      // 点击事件
    },
    child: const Padding(
      padding: EdgeInsets.all(16),
      child: Text("可点击的卡片"),
    ),
  ),
)

5.2 带波纹效果

Card(
  elevation: 4,
  child: InkWell(
    onTap: () {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("卡片被点击")),
      );
    },
    splashColor: Colors.blue.withOpacity(0.3),
    child: const Padding(
      padding: EdgeInsets.all(16),
      child: Text("带波纹效果的卡片"),
    ),
  ),
)

5.3 长按事件

Card(
  child: InkWell(
    onTap: () {},
    onLongPress: () {
      // 长按事件
    },
    child: Padding(padding: EdgeInsets.all(16), child: Text("长按卡片")),
  ),
)

六、Card与Container对比

6.1 对比表格

组件	特点	适用场景
Card	Material设计风格，内置阴影和圆角	标准卡片样式
Container	完全自定义，灵活性高	精细控制布局和装饰

6.2 代码对比

// Card：简洁的Material风格
Card(
  elevation: 4,
  child: Padding(padding: EdgeInsets.all(16), child: Text("卡片内容")),
)

// Container：完全自定义
Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: Padding(padding: EdgeInsets.all(16), child: Text("容器内容")),
)

七、性能优化建议

7.1 合理设置elevation

避免过大的elevation值：

// 不良示例：过大的阴影
Card(elevation: 20)

// 优化后：合理的阴影
Card(elevation: 4)

7.2 使用const构造函数

// 优化后
const Card(
  elevation: 4,
  child: Padding(padding: EdgeInsets.all(16), child: Text("内容")),
)

7.3 避免卡片嵌套

// 不良示例：嵌套卡片
Card(
  child: Card(
    child: Text("内容"),
  ),
)

// 优化后：单层卡片
Card(
  child: Text("内容"),
)

八、总结

通过本文的学习，我们掌握了Card组件的核心用法：

1. 阴影效果：通过elevation属性控制阴影高度
2. 卡片形状：通过shape属性自定义圆角和边框
3. 可点击卡片：使用InkWell实现点击和波纹效果
4. 新闻卡片：结合图片和文本创建精美卡片

Card是Flutter中实现Material设计风格卡片的首选组件，掌握好它的使用技巧对于构建高质量的UI至关重要。

---

参考资料

1. Flutter官方文档：https://api.flutter.dev/flutter/material/Card-class.html
2. InkWell文档：https://api.flutter.dev/flutter/material/InkWell-class.html