如何在Flutter中实现目标形状并解决ClipPath无法绘制圆角的问题

你可以直接在自定义CustomClipper的路径绘制逻辑中处理圆角，无需额外嵌套其他裁剪组件，具体实现如下：

实现逻辑 #

• 预先定义各拐角的圆角半径、侧边斜切偏移量参数，方便后续匹配设计稿调整
• 拐角位置不要直接用lineTo连接硬角，改用arcToPoint方法绘制圆角弧段，和你已经实现的侧边斜切逻辑可以无缝衔接
• 可单独控制四个角的圆角大小，也可以统一设置全局圆角值

可运行示例代码 #

import 'package:flutter/material.dart';

class CustomShapeClipper extends CustomClipper<Path> {
  // 全局圆角半径，可单独给四个角定义不同值
  final double borderRadius = 16.0;
  // 左侧斜切的水平偏移量，可根据你已实现的侧边效果调整
  final double leftSideCutOffset = 40.0;

  @override
  Path getClip(Size size) {
    final path = Path();

    // 起点：左上角圆角起始位置
    path.moveTo(borderRadius, 0);
    // 绘制顶部横线到右上角圆角起点
    path.lineTo(size.width - borderRadius, 0);
    // 绘制右上角圆角
    path.arcToPoint(
      Offset(size.width, borderRadius),
      radius: Radius.circular(borderRadius),
    );
    // 绘制右侧竖边到右下角圆角起点
    path.lineTo(size.width, size.height - borderRadius);
    // 绘制右下角圆角
    path.arcToPoint(
      Offset(size.width - borderRadius, size.height),
      radius: Radius.circular(borderRadius),
    );
    // 绘制底部横线到左下角圆角起点（适配左侧斜切）
    path.lineTo(leftSideCutOffset + borderRadius, size.height);
    // 绘制左下角圆角
    path.arcToPoint(
      Offset(leftSideCutOffset, size.height - borderRadius),
      radius: Radius.circular(borderRadius),
    );
    // 绘制左侧斜切边到左上角圆角起点
    path.lineTo(0, borderRadius);
    // 绘制左上角圆角
    path.arcToPoint(
      Offset(borderRadius, 0),
      radius: Radius.circular(borderRadius),
    );

    path.close();
    return path;
  }

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

// 组件使用示例
class CustomShapeContainer extends StatelessWidget {
  const CustomShapeContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CustomShapeClipper(),
      child: Container(
        width: 350,
        height: 220,
        color: Colors.lightBlue,
        // 此处放入你的子组件内容
      ),
    );
  }
}

调整说明 #

• 要是需要外凸的圆角，给arcToPoint方法添加clockwise: false参数即可
• 你之前已经写好的侧边适配逻辑可以直接复用，只需要把原来拐角处的直线连接替换为对应圆角弧段即可
• 如果有四个角圆角大小不同的需求，分别定义四个半径参数替换对应的Radius.circular值即可

内容的提问来源于stack exchange，提问作者sumit kumar Pradhan