我怎样才能在颤振中制作这样的剪辑圈？

Question

我想做同样的事情。首先我用堆栈小部件做了它。但是结果并不理想。我想让这些圆圈透明。我该怎么做？

我使用了 custom_clippers 2.0.0 包。但是我在这个包中找不到相同的模式。

Answer 1

我认为ClipPath就是您需要的东西。

这是一个示例，使用以下命令可以为您提供类似的结果：

import 'package:flutter/cupertino.dart';



class MyClipper extends CustomClipper<Path> {
  MyClipper({this.position, this.holeRadius = 16});

  double? position;
  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, position! - holeRadius)
      ..arcToPoint(
        Offset(size.width, position!),
        clockwise: false,
        radius: const Radius.circular(1),
      )
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, position!)
      ..arcToPoint(
        Offset(0, position! - holeRadius),
        clockwise: false,
        radius: const Radius.circular(1),
      );

    path.lineTo(0.0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => oldClipper != this;
}

您可以像下面这样使用它：

ClipPath(
    clipper: MyClipper(position: 50,holeRadius: 20),
    child: Container(
    height: 200,
    color: Colors.green,
    ),
   )

结果：

这是一个非常小的示例，您可以修改它以实现您的结果。