Flutter中如何实现容器组件的边角斜切效果？

一、自定义ClipPath实现（无依赖） #

直接通过自定义裁剪器实现任意边角的斜切效果，以左上角斜切为例：

class DiagonalClipper extends CustomClipper<Path> {
  final double offset;

  DiagonalClipper(this.offset);

  @override
  Path getClip(Size size) {
    final path = Path();
    // 绘制左上角斜切路径：从左侧中点斜切到顶部中点
    path.lineTo(0, offset);
    path.lineTo(offset, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

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

// 使用示例
ClipPath(
  clipper: DiagonalClipper(30.0), // 调整此值改变斜切幅度
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    alignment: Alignment.center,
    child: const Text('斜切边角容器'),
  ),
)

如果需要其他边角斜切，修改getClip里的Path绘制点即可，比如右上角斜切就调整顶部右侧的路径起点。

二、第三方包快速实现 #

推荐使用flutter_custom_clippers包，内置多种预定义裁剪形状，无需手动写Path：

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_custom_clippers: ^2.1.0 # 请使用最新版本

2. 斜切效果示例：

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

// 左上角斜切
ClipPath(
  clipper: DiagonalPathClipperOne(),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.green,
    child: const Center(child: Text('第三方包实现斜切')),
  ),
)

// 右上角斜切可使用DiagonalPathClipperTwo，还有其他形状可按需选择

三、自定义ShapeBorder（适用于Material组件） #

如果是给Button、Card这类Material组件设置斜切形状，可自定义ShapeBorder：

class DiagonalShapeBorder extends ShapeBorder {
  final double offset;

  DiagonalShapeBorder(this.offset);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => getOuterPath(rect, textDirection: textDirection);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final path = Path();
    path.lineTo(rect.left, rect.top + offset);
    path.lineTo(rect.left + offset, rect.top);
    path.lineTo(rect.right, rect.top);
    path.lineTo(rect.right, rect.bottom);
    path.lineTo(rect.left, rect.bottom);
    path.close();
    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => DiagonalShapeBorder(offset * t);
}

// 使用示例
Material(
  shape: DiagonalShapeBorder(30.0),
  color: Colors.orange,
  child: InkWell(
    onTap: () {},
    child: const SizedBox(
      width: 200,
      height: 100,
      child: Center(child: Text('自定义ShapeBorder')),
    ),
  ),
)

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