快速使用 Flutter Card 组件指南

目录

一、引言

二、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 组件通常与 ColumnRowListTile 等组件结合使用。

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 组件的基本示例。'),
      ],
    ),
  ),
)

 三、主要属性

属性说明
childCard 的子组件,可包含 ColumnListTile
color卡片背景颜色
elevation卡片的阴影高度
shape自定义卡片形状,如圆角矩形、边框等
marginCard 的外边距
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 tabbar https://shuaici.blog.csdn.net/article/details/146070310Flutter Drawer 详解-CSDN博客文章浏览阅读1.7k次,点赞31次,收藏38次。在移动应用开发中,侧边导航栏(Drawer)是实现功能导航的常见设计模式。Flutter 提供了内置的 Drawer 组件,能够轻松实现 Material Design 风格的侧边导航功能。本文将深入探讨 Flutter Drawer 的核心用法、高级定制技巧以及常见问题解决方案。_flutter drawer https://shuaici.blog.csdn.net/article/details/146070284

评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帅次

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值