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 上分享了一個現場演示，在這里找到它。