如何在容器底部中心绘制曲线？ClipPath、Stack方案失效求助

方法一：自定义ClipPath #

你之前用ClipPath没得到预期效果，大概率是路径逻辑有误。下面是能实现底部中心曲线的自定义裁剪器，不会产生额外空间：

import 'dart:math' as math;
import 'package:flutter/material.dart';

class BottomCurveClipper extends CustomClipper<Path> {
  final double curveHeight;
  // 控制曲线内凹/外凸，默认内凹
  final bool isInward;

  BottomCurveClipper(this.curveHeight, {this.isInward = true});

  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height - curveHeight);

    // 用二次贝塞尔曲线绘制底部中心曲线
    final curveY = isInward ? size.height : size.height - 2 * curveHeight;
    path.quadraticBezierTo(
      size.width / 2,
      curveY,
      size.width,
      size.height - curveHeight,
    );

    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

使用示例：

ClipPath(
  clipper: BottomCurveClipper(30), // 曲线高度30
  child: Container(
    width: double.infinity,
    height: 200,
    color: Colors.blueAccent,
    child: const Center(child: Text("底部带曲线的容器")),
  ),
)

方法二：用CustomPaint直接绘制背景 #

如果不想嵌套ClipPath，可以用CustomPaint直接绘制带曲线的背景，同时承载子组件，同样不会产生额外空间：

import 'dart:math' as math;
import 'package:flutter/material.dart';

class CurvedBottomContainer extends StatelessWidget {
  final double curveHeight;
  final Widget child;
  final Color backgroundColor;

  const CurvedBottomContainer({
    super.key,
    required this.curveHeight,
    required this.child,
    this.backgroundColor = Colors.blueAccent,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _CurvedBackgroundPainter(curveHeight, backgroundColor),
      child: SizedBox(
        width: double.infinity,
        height: 200, // 容器总高度
        child: child,
      ),
    );
  }
}

class _CurvedBackgroundPainter extends CustomPainter {
  final double curveHeight;
  final Color color;

  _CurvedBackgroundPainter(this.curveHeight, this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    final path = Path();

    path.lineTo(0, size.height - curveHeight);
    path.quadraticBezierTo(
      size.width / 2,
      size.height,
      size.width,
      size.height - curveHeight,
    );
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_CurvedBackgroundPainter oldDelegate) =>
      oldDelegate.curveHeight != curveHeight || oldDelegate.color != color;
}

使用示例：

CurvedBottomContainer(
  curveHeight: 30,
  child: const Center(child: Text("底部带曲线的容器")),
)

关键说明 #

• 两种方法都不会产生额外空间，都是直接对容器本身的形状进行裁剪或绘制，避免了Stack叠加组件带来的布局冗余。
• 调整curveHeight可控制曲线弧度大小，修改isInward可切换曲线内凹/外凸。

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