Flutter应用：为Container顶部创建Cove造型并在CustomPainter中添加图片

一、实现Cove造型 #

你当前的CustomPainter使用的是描边模式，需要改成填充模式才能显示完整形状，同时调整路径实现顶部内凹的Cove效果。结合下方Container的衔接需求，我们还需要给Container添加对应的裁剪器。

二、在CustomPainter中添加并管理图片 #

要在自定义绘制器中渲染图片，需要提前监听图片加载状态，加载完成后触发重绘，同时确保图片适配Cove造型的区域。

完整代码示例 #

import 'package:flutter/material.dart';

class Product1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 带Cove和图片的自定义绘制区域
          CustomPaint(
            size: const Size.fromHeight(500),
            painter: RPSCustomPainter(AssetImage('assets/your_image.png')), // 替换为你的本地图片路径
          ),
          // 顶部带Cove的下方容器，通过ClipPath和上方造型对齐
          ClipPath(
            clipper: CoveTopClipper(),
            child: Container(
              height: 300,
              color: Colors.white,
              padding: const EdgeInsets.all(16),
              child: const Text('下方容器内容'),
            ),
          ),
        ],
      ),
    );
  }
}

class RPSCustomPainter extends CustomPainter {
  final ImageProvider imageProvider;
  Image? _loadedImage;

  RPSCustomPainter(this.imageProvider) {
    // 提前加载图片，加载完成后通知重绘
    imageProvider.resolve(const ImageConfiguration()).addListener(
      ImageStreamListener((info, _) {
        _loadedImage = info.image;
        notifyListeners();
      }),
    );
  }

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制带Cove的背景填充
    Paint fillPaint = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243);
    
    Path covePath = Path();
    // 顶部Cove：绘制内凹的二次贝塞尔曲线
    covePath.moveTo(0, 0);
    covePath.quadraticBezierTo(
      size.width / 2,
      size.height * 0.1, // 内凹高度，数值越大凹得越深
      size.width,
      0,
    );
    // 连接底部曲线（保留原有路径逻辑）
    covePath.lineTo(size.width, size.height);
    covePath.quadraticBezierTo(size.width*0.888, size.height*0.7968571, size.width*0.6625, size.height*0.8585714);
    covePath.cubicTo(size.width*0.4204375, size.height*0.9350714, size.width*0.195625, size.height*1.0775, 0, size.height);
    covePath.close();

    canvas.drawPath(covePath, fillPaint);

    // 图片加载完成后绘制图片
    if (_loadedImage != null) {
      // 定义图片绘制区域，适配Cove造型，避免超出顶部内凹
      Rect imageDrawRect = Rect.fromLTWH(0, 0, size.width, size.height * 0.9);
      canvas.drawImageRect(
        _loadedImage!,
        Rect.fromLTWH(0, 0, _loadedImage!.width.toDouble(), _loadedImage!.height.toDouble()),
        imageDrawRect,
        Paint(),
      );
    }
  }

  @override
  bool shouldRepaint(covariant RPSCustomPainter oldDelegate) {
    return oldDelegate._loadedImage != _loadedImage || oldDelegate.imageProvider != imageProvider;
  }
}

// 给下方Container做顶部Cove裁剪的自定义裁剪器
class CoveTopClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    // 和上方CustomPainter使用相同的贝塞尔参数，保证造型对齐
    path.quadraticBezierTo(
      size.width / 2,
      size.height * 0.1,
      size.width,
      0,
    );
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

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

关键注意点 #

• Cove对齐：上方CustomPainter和下方Container的ClipPath必须使用完全相同的贝塞尔曲线参数，确保视觉上无缝衔接。
• 图片加载：通过ImageStreamListener监听图片加载状态，避免在图片未加载完成时绘制导致的空指针问题。
• 区域适配：绘制图片时调整Rect范围，防止图片超出Cove造型的边界。

内容的提问来源于stack exchange，提问作者Kuldeep Sonara