目录

一、引言

二、Card 的基本用法

 三、主要属性

3.1 elevation (阴影高度)

3.2 shape (形状)

3.3 color (颜色)

3.4 margin (外边距)

3.5 完整示例

四、结合 ListTile 组件使用

五、带图片的 Card 示例

六、注意事项

相关推荐

---

一、引言

    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)),),],),
)

六、注意事项

1. Card 默认没有内边距，需要自行添加 Padding

2. 阴影效果在低 elevation 值下可能不明显

3. 在暗黑模式下，Card 会自动调整颜色以适应主题

   Card 组件非常适合用于展示内容块、列表项或任何需要突出显示的部分。通过组合不同的属性和子组件，可以创建出丰富多样的卡片式布局。

相关推荐

Flutter TabBar / TabBarView 详解-CSDN博客文章浏览阅读2.5k次，点赞38次，收藏46次。在 Flutter 中，TabBar 和 TabBarView 组件用于实现多个页面的标签导航，类似于 Android 的 ViewPager + TabLayout。TabBar 用于显示标签页，TabBarView 用于切换不同的页面内容。它们通常与 DefaultTabController 结合使用，实现流畅的页面切换效果。_flutter tabbarhttps://shuaici.blog.csdn.net/article/details/146070310Flutter Drawer 详解-CSDN博客文章浏览阅读1.7k次，点赞31次，收藏38次。在移动应用开发中，侧边导航栏（Drawer）是实现功能导航的常见设计模式。Flutter 提供了内置的 Drawer 组件，能够轻松实现 Material Design 风格的侧边导航功能。本文将深入探讨 Flutter Drawer 的核心用法、高级定制技巧以及常见问题解决方案。_flutter drawerhttps://shuaici.blog.csdn.net/article/details/146070284