Flutter中创建带圆角、阴影及斜切侧边Container的最简方法

要实现你需要的四角圆角、带Material风格阴影、单侧斜切的容器，最简方案是结合Material组件（提供原生elevation阴影）和自定义ClipPath（实现斜切+圆角路径），无需复杂的自定义绘制逻辑。

步骤1：定义自定义裁剪器 #

先写一个CustomClipper，用来生成带斜切和圆角的路径：

class SlantedRoundedClipper extends CustomClipper<Path> {
  final double slantHeight; // 斜切的高度
  final double borderRadius; // 圆角半径

  SlantedRoundedClipper({
    required this.slantHeight,
    required this.borderRadius,
  });

  @override
  Path getClip(Size size) {
    final path = Path();
    // 左上角圆角
    path.moveTo(borderRadius, 0);
    path.arcToPoint(
      Offset(0, borderRadius),
      radius: Radius.circular(borderRadius),
    );
    // 左下角圆角
    path.lineTo(0, size.height - borderRadius);
    path.arcToPoint(
      Offset(borderRadius, size.height),
      radius: Radius.circular(borderRadius),
    );
    // 右下角斜切边
    path.lineTo(size.width - slantHeight, size.height);
    path.lineTo(size.width, size.height - slantHeight);
    // 右上角圆角
    path.lineTo(size.width, borderRadius);
    path.arcToPoint(
      Offset(size.width - borderRadius, 0),
      radius: Radius.circular(borderRadius),
    );
    path.close();
    return path;
  }

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

步骤2：组合组件实现效果 #

用Material提供elevation阴影，内部嵌套ClipPath和Container：

Material(
  elevation: 8, // 控制阴影强度，和Material组件的elevation一致
  child: ClipPath(
    clipper: SlantedRoundedClipper(
      slantHeight: 40, // 调整斜切的幅度
      borderRadius: 16, // 调整圆角大小
    ),
    child: Container(
      width: 200,
      height: 120,
      color: Colors.white,
      child: const Center(
        child: Text('斜切圆角容器'),
      ),
    ),
  ),
)

关键说明 #

• 阴影部分：用Material的elevation属性，能自动生成符合Material Design规范的层级阴影，比手动写BoxShadow更自然且无需维护多组阴影参数。
• 斜切+圆角：通过自定义Clipper精确控制路径，你可以修改slantHeight调整斜切的倾斜程度，修改borderRadius调整圆角大小。
• 灵活性：如果需要斜切其他侧边，只需要修改getClip方法中的路径绘制逻辑即可。

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