引言
在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 基础用法
dart
// 简单卡片
Card(
child: const ListTile(
title: Text("卡片标题"),
subtitle: Text("卡片副标题"),
),
)
// 带阴影的卡片
Card(
elevation: 8,
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("带阴影的卡片"),
),
)二、阴影效果
2.1 elevation属性
elevation控制卡片的阴影高度，值越大阴影越明显：
dart
Card(
elevation: 4,
child: Padding(padding: EdgeInsets.all(16), child: Text("阴影高度4")),
)2.2 不同阴影级别
dart
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：
dart
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
child: Padding(padding: EdgeInsets.all(16), child: Text("默认形状")),
)3.2 自定义圆角
dart
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(padding: EdgeInsets.all(16), child: Text("自定义圆角")),
)3.3 不同圆角
dart
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
bottomRight: Radius.circular(16),
),
),
child: Padding(padding: EdgeInsets.all(16), child: Text("不规则圆角")),
)四、新闻卡片示例
4.1 基础新闻卡片
dart
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 带图片的新闻卡片
dart
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 水平新闻卡片
dart
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
dart
Card(
elevation: 4,
child: InkWell(
onTap: () {
// 点击事件
},
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("可点击的卡片"),
),
),
)5.2 带波纹效果
dart
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 长按事件
dart
Card(
child: InkWell(
onTap: () {},
onLongPress: () {
// 长按事件
},
child: Padding(padding: EdgeInsets.all(16), child: Text("长按卡片")),
),
)六、Card与Container对比
6.1 对比表格
| 组件 | 特点 | 适用场景 |
|---|---|---|
| Card | Material设计风格，内置阴影和圆角 | 标准卡片样式 |
| Container | 完全自定义，灵活性高 | 精细控制布局和装饰 |
6.2 代码对比
dart
// 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值：
dart
// 不良示例：过大的阴影
Card(elevation: 20)
// 优化后：合理的阴影
Card(elevation: 4)7.2 使用const构造函数
dart
// 优化后
const Card(
elevation: 4,
child: Padding(padding: EdgeInsets.all(16), child: Text("内容")),
)7.3 避免卡片嵌套
dart
// 不良示例：嵌套卡片
Card(
child: Card(
child: Text("内容"),
),
)
// 优化后：单层卡片
Card(
child: Text("内容"),
)八、总结
通过本文的学习，我们掌握了Card组件的核心用法：
- 阴影效果：通过elevation属性控制阴影高度
- 卡片形状：通过shape属性自定义圆角和边框
- 可点击卡片：使用InkWell实现点击和波纹效果
- 新闻卡片：结合图片和文本创建精美卡片
Card是Flutter中实现Material设计风格卡片的首选组件，掌握好它的使用技巧对于构建高质量的UI至关重要。