Flutter CustomClipper

Question

我在 Flutter 中创建这两个 widget 时使用的是 Custom Clipper，但是有一个问题，我该如何创建它？

更新：可用于从右侧裁剪

class CustomRightClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width / 2, 0.0);
    path.lineTo(size.width * 0.37, 30);
    path.lineTo(0, 30);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomRightClipper oldClipper) => true;
}

Answer 1

对于如下所示的路径，您可以通过参数传递间隙或使用相对宽度。

class BottomRightClipper extends CustomClipper<Path> {
  const BottomRightClipper({required this.isLeft});
  final bool isLeft;
  @override
  Path getClip(Size size) {
    final path = Path();
    if (isLeft) { /// separated to make it easier to understand for everyone
      path.moveTo(0, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width - 40, size.height);
      path.lineTo(0, size.height);
      path.lineTo(0, 0);
    } else { //for right
      path.moveTo(40, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width, size.height);
      path.lineTo(0, size.height);
      path.lineTo(40, 0);
    }
    return path;
  }

  @override
  bool shouldReclip(BottomRightClipper oldClipper) {
    return isLeft != oldClipper.isLeft;
  }
}

我建议在不同的按钮上使用

shape

参数。扩展 OutlinedBorder 或 ShapeBorder 并提供相同的路径。