flutter - Flutter Dart-如何使容器具有向外的borderRadius.circular(20)而不是向内的？

Question

为我的Container borderRadius。我目前正在使用borderRadius: BorderRadius.all(Radius.circular(20))。我想要替代它的内部，而不是像三角形的东西那样增加到外部的边框，而不是带走三角形的东西。

Answer 1

您可以使用自定义的ClipperPath轻松完成此操作。

定义一个自定义的ClipperPath，如下所示。

  class CustomClipPath extends CustomClipper<Path> {
  final radius = 10.0;
  final arcHeight = 50.0;
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height);
    path.arcToPoint(Offset(size.width, size.height - arcHeight),
        radius: Radius.circular(radius));
    path.lineTo(size.width, size.height - arcHeight / 2);
    path.lineTo(0, size.height - arcHeight / 2);
    path.lineTo(0,size.height- arcHeight);
     path.arcToPoint(Offset(0, size.height),
        radius: Radius.circular(radius));

    path.close();
    return path;
  }

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

然后，您可以将其应用于如下所示的任何容器。

 ClipPath(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            alignment:Alignment.center,
            color: Colors.blue,
          ),
          clipper: CustomClipPath(),
        )

我正在Dartpad上分享现场演示，找到它here。