Flutter 中的 Card 小部件:全面指南

Flutter 中的 Card 小部件:全面指南

在 Flutter 中,Card 是一个用于呈现内容的容器,它带有圆角边缘和阴影效果,常用于展示信息块,如用户头像、相册、笔记或任何需要突出显示的内容。Card 小部件提供了一种简单而直观的方式来增强应用的 UI 视觉效果。

基础用法

Card 小部件最基本的用法是包裹其他小部件,为其添加圆角和阴影:

dart 复制代码
Card(
  child: Text('Hello, World!'),
)

这将创建一个带有简单文本的卡片。

定制化属性

Card 提供了多种属性来定制其外观:

颜色和形状

  • color: 设置卡片的背景颜色。
  • shape: 设置卡片的形状,如圆角的大小。
dart 复制代码
Card(
  color: Colors.blueGrey,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  child: Text('Colored Card'),
)

边距和填充

  • margin: 设置卡片的外边距。
  • clipBehavior: 控制卡片的裁剪行为。
dart 复制代码
Card(
  margin: EdgeInsets.all(10.0),
  clipBehavior: Clip.antiAlias,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Padded Card'),
  ),
)

装饰

通过 elevation 属性,可以设置卡片的阴影大小:

dart 复制代码
Card(
  elevation: 8.0,
  child: Text('Elevated Card'),
)

实例:自定义卡片

下面是一个使用 Card 创建自定义卡片的实例,其中包含了图片和文本:

dart 复制代码
Card(
  elevation: 5.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  child: Row(
    children: <Widget>[
      Image.network(
        'https://example.com/image.jpg',
        height: 100.0,
        width: 100.0,
        fit: BoxFit.cover,
      ),
      Expanded(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Text(
            'This is a custom card with an image and text.',
            textScaleFactor: 1.2,
          ),
        ),
      ),
    ],
  ),
)

卡片列表

Card 常与 ListView 结合使用,创建卡片列表:

dart 复制代码
ListView(
  children: <Widget>[
    Card(
      child: ListTile(
        title: Text('Card 1'),
        subtitle: Text('This is the subtitle of the first card.'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('Card 2'),
        subtitle: Text('This is the subtitle of the second card.'),
      ),
    ),
    // ... 更多卡片
  ],
)

高级布局

Card 可以嵌套使用,创建复杂的布局:

dart 复制代码
Card(
  margin: EdgeInsets.all(10.0),
  child: Column(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Card Title'),
      ),
      Card(
        margin: EdgeInsets.zero,
        child: ListTile(
          title: Text('Inner Card'),
          subtitle: Text('This is an inner card inside the main card.'),
        ),
      ),
    ],
  ),
)

性能考虑

在列表中使用大量 Card 时,确保使用 ListView.builder 来实现懒加载,以提高性能:

dart 复制代码
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

结语

Card 是 Flutter 中一个非常实用的小部件,它提供了一种快速且有效的方式来展示信息。通过合理使用 Card,你可以增强应用的 UI 视觉效果,同时保持布局的整洁和有序。掌握 Card 的使用,可以帮助你创建出既美观又实用的用户界面。

相关推荐
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_2 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter2 小时前
Flutter封装Coap
flutter
旭日猎鹰8 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰8 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神8 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱20 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart20 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
AiFlutter1 天前
Flutter通过 Coap发送组播
flutter