Flutter中如何实现带三角形线性渐变的商品卡片？

问题分析 #

你当前用LinearGradient从左下到右上设置渐变但未达到预期三角形效果，核心问题在于：

• 渐变的方向、颜色过渡范围没匹配三角形视觉区域
• Stack布局中层级顺序可能有误，导致渐变层未正确显示在图片与详情之间

修复方案 #

1. 调整渐变参数+修正Stack层级 #

通过修改渐变的颜色停止点、调整Stack内组件顺序，让渐变贴合三角形区域，同时保证详情内容正常显示。

2. 完整可运行代码示例 #

Stack(
  children: [
    // 商品图片（底层）
    ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Image.network(
        '你的商品图片地址',
        fit: BoxFit.cover,
        height: double.maxFinite,
        width: double.maxFinite,
      ),
    ),
    // 三角形渐变层（中间层）
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 141,
        width: double.maxFinite,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10),
          ),
          gradient: LinearGradient(
            begin: Alignment.bottomLeft,
            end: Alignment.topRight,
            // 用stops控制渐变过渡范围，贴合三角形区域
            stops: [0.0, 0.8],
            colors: [
              Color.fromARGB(200, 0, 0, 0), // 半透明黑，增强层次感
              Color.fromARGB(0, 0, 0, 0), // 完全透明
            ],
          ),
        ),
      ),
    ),
    // 商品详情（最上层）
    Align(
      alignment: Alignment.bottomLeft,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('商品名称', style: TextStyle(color: Colors.white, fontSize: 18)),
            SizedBox(height: 4),
            Text('¥99.00', style: TextStyle(color: Colors.white, fontSize: 16)),
          ],
        ),
      ),
    ),
  ],
)

3. 关键修改点 #

• 渐变参数优化：将纯黑改为半透明黑，添加stops控制过渡范围，让深色区域集中在左下角，逐渐向右上角透明过渡，贴合三角形视觉效果
• Stack层级调整：渐变层必须放在图片和详情之间，确保详情文字不会被渐变层遮挡
• 统一圆角处理：图片用ClipRRect裁剪圆角，避免渐变层与图片圆角不一致的视觉bug

进阶：精准三角形裁剪 #

如果需要只显示左下角到右上角的纯三角形渐变区域，可以用ClipPath自定义裁剪：

// 在Stack中替换渐变层部分
Align(
  alignment: Alignment.bottomLeft,
  child: ClipPath(
    clipper: TriangleClipper(),
    child: Container(
      height: 141,
      width: double.maxFinite,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [Color.fromARGB(180, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
        ),
      ),
    ),
  ),
)

// 自定义三角形裁剪器
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

内容的提问来源于stack exchange，提问作者Jawad Abbasi