Card组件基础使用

鸣弦artha2026-01-22 11:45

Card组件基础使用

一、Card组件简介

Card是Flutter中常用的卡片容器组件，用于展示相关信息块。它具有圆角、阴影等视觉特征，能够有效地组织内容并提供层次感。

Card组件的特性

Card组件
视觉特性
布局特性
交互特性
圆角边框
阴影效果
可选边框
单一子元素
适应内容大小
支持多种布局
可点击
可禁用
支持手势

Card组件在设计系统中扮演着重要角色，它能够将相关内容组织在一起，形成清晰的视觉分组，帮助用户快速理解和浏览信息。

二、Card组件属性详解

核心属性对比

属性名 类型 默认值 说明 使用场景
color Color null 卡片背景色 自定义背景
elevation double 1.0 阴影高度 控制立体感
shape ShapeBorder RoundedRectangleBorder 卡片形状 自定义边框
borderOnForeground bool true 边框在前层 视觉层次控制
margin EdgeInsetsGeometry const EdgeInsets.all(4.0) 外边距 间距控制
clipBehavior Clip none 裁剪行为 内容溢出处理
child Widget null 子组件 卡片内容
semanticContainer bool true 语义容器 无障碍访问

属性使用说明

color属性：设置卡片的背景颜色。默认情况下，Card使用主题中的卡片颜色，可以通过此属性自定义背景色以适应不同的设计需求。

elevation属性：控制卡片的阴影高度，数值越大阴影越明显，视觉上的立体感越强。Material Design建议的值包括0、1、2、3、4、6、8、12等，可以根据内容的重要性和层次进行选择。

shape属性：定义卡片的边框形状，包括圆角、边框样式等。最常用的是RoundedRectangleBorder，可以设置圆角半径和边框。

三、基础用法示例

最简单的Card

最基础的使用方式，直接包裹内容：

dart 复制代码 
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('这是一个简单的卡片'),
  ),
)

带标题和内容的Card

dart 复制代码 
Card(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Padding(
        padding: EdgeInsets.all(16),
        child: Text(
          '卡片标题',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      Divider(),
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('这里是卡片的详细内容'),
      ),
    ],
  ),
)

这种结构在列表、详情页等场景中非常常见，能够清晰地展示标题和内容的层次关系。

带图标的Card

dart 复制代码 
Card(
  child: ListTile(
    leading: Icon(Icons.folder, color: Colors.blue),
    title: Text('文档文件夹'),
    subtitle: Text('包含12个文件'),
    trailing: Icon(Icons.arrow_forward_ios),
  ),
)

通过结合ListTile组件，可以快速创建带有图标、标题、副标题和操作箭头的卡片布局，常见于文件管理、设置选项等场景。

四、Card样式定制

自定义圆角和边框

dart 复制代码 
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
    side: BorderSide(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text('带圆角和边框的卡片'),
  ),
)

调整阴影高度

elevation: 0
elevation: 2
elevation: 4
elevation: 8
elevation: 12
扁平无阴影
轻微立体
标准立体
明显立体
强烈立体

不同elevation值的卡片效果对比：

dart 复制代码 
Column(
  children: [
    Card(
      elevation: 0,
      child: Container(
        width: 200,
        padding: EdgeInsets.all(16),
        child: Text('elevation: 0'),
      ),
    ),
    SizedBox(height: 16),
    Card(
      elevation: 4,
      child: Container(
        width: 200,
        padding: EdgeInsets.all(16),
        child: Text('elevation: 4'),
      ),
    ),
    SizedBox(height: 16),
    Card(
      elevation: 8,
      child: Container(
        width: 200,
        padding: EdgeInsets.all(16),
        child: Text('elevation: 8'),
      ),
    ),
  ],
)

不同颜色的Card

颜色类型 应用场景 色值示例 视觉效果
主色卡 重要信息 Colors.blue 强调突出
成功卡 正向反馈 Colors.green 轻松愉悦
警告卡 注意事项 Colors.orange 温馨提示
错误卡 错误信息 Colors.red 引起注意
中性卡 普通信息 Colors.grey.shade100 淡雅舒适
dart 复制代码 
Row(
  children: [
    Card(
      color: Colors.blue.shade50,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('蓝色卡片'),
      ),
    ),
    SizedBox(width: 16),
    Card(
      color: Colors.green.shade50,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('绿色卡片'),
      ),
    ),
    SizedBox(width: 16),
    Card(
      color: Colors.orange.shade50,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('橙色卡片'),
      ),
    ),
  ],
)

五、Card应用场景

信息卡片

信息卡片用于展示单条数据或摘要信息：
信息卡片
天气卡片
股票卡片
新闻卡片
统计卡片
温度/湿度/天气图标
股价/涨跌幅/涨跌额
标题/摘要/图片
标题/数值/趋势

列表卡片

列表卡片用于组织多个相关项目：

dart 复制代码 
Card(
  child: ListView.separated(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemCount: 5,
    separatorBuilder: (context, index) => Divider(),
    itemBuilder: (context, index) {
      return ListTile(
        leading: CircleAvatar(
          child: Text('${index + 1}'),
        ),
        title: Text('列表项 ${index + 1}'),
        subtitle: Text('这是第 ${index + 1} 项的描述'),
        trailing: Icon(Icons.chevron_right),
      );
    },
  ),
)

图片卡片

图片卡片常用于展示图片相关的信息：

dart 复制代码 
Card(
  clipBehavior: Clip.antiAlias,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.network(
        'https://via.placeholder.com/300x200',
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '美丽的风景',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('这是一张展示自然美景的照片'),
          ],
        ),
      ),
    ],
  ),
)

六、最佳实践

Card使用规范

实践 说明 效果
适度使用 不要过多嵌套 避免视觉混乱
统一风格 保持圆角、阴影一致 界面协调统一
合理间距 使用margin控制间距 布局清晰有序
内容分层 标题和内容区分 信息层次分明
响应式设计 适应不同屏幕尺寸 提升用户体验

性能优化建议

dart 复制代码 
// ✅ 好的做法 - 使用const构造函数
const Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('静态内容'),
  ),
)

// ❌ 避免的做法 - 不必要的重复构建
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('静态内容'),
  ),
)

七、完整示例

dart 复制代码 
class CardBasicsExample extends StatelessWidget {
  const CardBasicsExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Card组件基础')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // 基础卡片
          Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '基础卡片',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text('这是最简单的卡片样式，展示基本文本内容。'),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),

          // 带图标的卡片
          Card(
            child: ListTile(
              leading: Icon(Icons.folder, color: Colors.blue),
              title: Text('我的文档'),
              subtitle: Text('包含 24 个文件'),
              trailing: Icon(Icons.chevron_right),
            ),
          ),
          const SizedBox(height: 16),

          // 不同颜色的卡片
          Card(
            color: Colors.blue.shade50,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: [
                  Icon(Icons.info, color: Colors.blue),
                  SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '蓝色提示卡',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.blue.shade900,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          '这是一条重要的提示信息',
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),

          // 不同阴影高度的卡片
          Row(
            children: [
              Expanded(
                child: Card(
                  elevation: 2,
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      children: [
                        Icon(Icons.cloud, color: Colors.grey),
                        SizedBox(height: 8),
                        Text('elevation: 2'),
                      ],
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Card(
                  elevation: 8,
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      children: [
                        Icon(Icons.cloud, color: Colors.grey),
                        SizedBox(height: 8),
                        Text('elevation: 8'),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),

          // 带边框的卡片
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
              side: BorderSide(
                color: Colors.purple,
                width: 2,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                children: [
                  Icon(Icons.border_style, color: Colors.purple),
                  SizedBox(height: 12),
                  Text(
                    '带边框的卡片',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 8),
                  Text('使用shape属性自定义边框样式'),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),

          // 成功卡片
          Card(
            color: Colors.green.shade50,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Icon(Icons.check_circle, color: Colors.green),
                  SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '操作成功',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.green.shade900,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          '您的操作已成功完成',
                          style: TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

相关推荐
IT陈图图2 小时前
基于 Flutter × OpenHarmony 音乐播放器应用——构建录音控制按钮与录音状态按钮
flutter·华为·鸿蒙·openharmony
[H*]2 小时前
Flutter框架跨平台鸿蒙开发——Image综合应用
flutter·华为·harmonyos
小风呼呼吹儿2 小时前
Flutter 框架跨平台鸿蒙开发 - 倒计时秒表：打造多功能计时工具
网络·flutter·华为·harmonyos
IT陈图图2 小时前
Flutter × OpenHarmony 文件管家：数据结构设计与实现
数据结构·flutter
AI_零食2 小时前
鸿蒙跨端框架 Flutter 学习 Day 4：异步编程基础——Future 与非阻塞执行的物理真相
学习·flutter·harmonyos
kirk_wang3 小时前
Flutter艺术探索-Provider状态管理：从入门到精通
flutter·移动开发·flutter教程·移动开发教程
kirk_wang3 小时前
Flutter `flutter_udid` 库在鸿蒙（OpenHarmony）平台的适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
IT陈图图3 小时前
基于 Flutter × OpenHarmony 音乐播放器应用：构建录音文件列表区域
flutter·华为·鸿蒙·openharmony
不会写代码0003 小时前
Flutter 框架跨平台鸿蒙开发 - 实时彩票开奖查询应用开发教程
flutter·华为·harmonyos
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）04AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南052025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）06UV安装并设置国内源07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08BongoCat - 跨平台键盘猫动画工具09Linux下V2Ray安装配置指南10Claude Code Skills 实用使用手册