如何在Flutter中实现图中的自定义卡片效果？

要实现图中的自定义卡片效果，用Container配合BoxDecoration是最灵活的方案（比Flutter自带的Card组件更易自定义样式），下面分场景给出具体实现代码：

一、基础自定义卡片 #

这是最常用的带圆角、阴影的卡片样式：

Container(
  // 卡片和外部组件的间距
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  // 卡片内部内容和边框的间距
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    // 设置圆角大小
    borderRadius: BorderRadius.circular(12),
    // 阴影效果
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 2, // 阴影扩散范围
        blurRadius: 5, // 阴影模糊程度
        offset: const Offset(0, 3), // 阴影偏移方向（x,y）
      ),
    ],
  ),
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('卡片标题', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
      SizedBox(height: 8),
      Text('这里是卡片的内容区域，可放置文本、图片等任意Widget'),
    ],
  ),
)

二、进阶自定义效果 #

如果需要更复杂的样式，比如渐变背景、边框、特殊形状，可以扩展BoxDecoration的属性：

1. 渐变背景卡片 #

Container(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
    // 线性渐变背景
    gradient: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFF667eea), Color(0xFF764ba2)],
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.purple.withOpacity(0.4),
        spreadRadius: 2,
        blurRadius: 6,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('渐变卡片', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
      SizedBox(height: 8),
      Text('渐变背景下建议用浅色文字提升可读性', style: TextStyle(color: Colors.white)),
    ],
  ),
)

2. 带边框的卡片 #

给卡片添加自定义边框：

decoration: BoxDecoration(
  color: Colors.white,
  borderRadius: BorderRadius.circular(12),
  // 边框颜色和宽度
  border: Border.all(color: Colors.blueAccent, width: 2),
  boxShadow: [
    BoxShadow(
      color: Colors.grey.withOpacity(0.2),
      spreadRadius: 1,
      blurRadius: 3,
      offset: const Offset(0, 2),
    ),
  ],
)

3. 特殊形状卡片 #

比如只保留顶部圆角：

Container(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(16),
      topRight: Radius.circular(16),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 5,
        offset: const Offset(0, 3),
      ),
    ],
  ),
  child: const Text('仅顶部圆角的特殊卡片'),
)

三、封装成可复用组件 #

如果需要多次使用同类型卡片，封装成自定义Widget能提高开发效率：

class CustomCard extends StatelessWidget {
  final Widget child;
  final EdgeInsets? margin;
  final EdgeInsets? padding;
  final BorderRadius? borderRadius;
  final BoxShadow? shadow;
  final Color? backgroundColor;

  const CustomCard({
    super.key,
    required this.child,
    this.margin,
    this.padding,
    this.borderRadius,
    this.shadow,
    this.backgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      padding: padding ?? const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: backgroundColor ?? Colors.white,
        borderRadius: borderRadius ?? BorderRadius.circular(12),
        boxShadow: [
          shadow ??
              BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                spreadRadius: 2,
                blurRadius: 5,
                offset: const Offset(0, 3),
              ),
        ],
      ),
      child: child,
    );
  }
}

// 使用示例
CustomCard(
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('封装后的自定义卡片'),
      SizedBox(height: 8),
      Text('可通过参数快速调整样式'),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Ivan Adrian Muñoz