求助：如何实现目标样式的弧形AppBar？当前代码效果不符

你当前的代码仅通过给Container添加右下角圆角来实现弧形，但这种方式受布局限制或弧度不够自然，无法达到预期效果。可以通过CustomClipper配合ClipPath实现更贴合需求的弧形，具体代码如下：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(200),
  child: ClipPath(
    clipper: _CustomAppBarClipper(),
    child: Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/Group 26249.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
),

// 自定义裁剪器
class _CustomAppBarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height);
    // 绘制右下角弧形，可调整参数匹配预期效果
    path.quadraticBezierTo(
      size.width * 0.8, // 水平控制点位置
      size.height, // 垂直控制点位置
      size.width, // 弧形终点X坐标
      size.height * 0.6, // 弧形终点Y坐标
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

调整说明 #

• 若要修改弧形弧度和位置，可调整quadraticBezierTo的参数：
  • 第一个参数（size.width * 0.8）：数值越大，弧形控制点越靠右
  • 第四个参数（size.height * 0.6）：数值越小，弧形的垂直高度越高
• 想要更圆润的圆弧效果，可替换为arcTo方法（需导入dart:math）：

path.arcTo(
  Rect.fromLTWH(size.width - 120, size.height - 120, 120, 120),
  0,
  math.pi / 2,
  false,
);

同时请确保图片资源路径正确，且图片比例与AppBar高度适配，避免拉伸变形。

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