Question

我正在尝试创建具有圆形边缘的自定义容器，但无法使拐角变为圆形。我只想使绿色容器的角变圆。

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green.withOpacity(0.8)
      ..strokeWidth = 5
      ..strokeCap = StrokeCap.round;

    final shapeBounds = Rect.fromLTRB(0, 0, size.width, size.height);

    final path = Path()
      ..moveTo(shapeBounds.left + 10, shapeBounds.top) //3
      ..lineTo(shapeBounds.bottomLeft.dx + 10,shapeBounds.bottomLeft.dy) 
      ..lineTo(shapeBounds.bottomRight.dx,shapeBounds.bottomRight.dy - size.height * 0.12)
      ..lineTo(shapeBounds.topRight.dx - 20,
          shapeBounds.topRight.dy + size.height * 0.12) //7
      ..close();

    canvas.drawPath(path, paint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false;
  }
}

Answer 1

您可以使用 ClipPath 。在其中使用自定义Clipper 。在“自定义裁剪器”中，绘制路径时，请使用 quadraticBezierTo。

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyClipper(),
      child: Container(
        child: Text("Dummy Text"),
        alignment: Alignment.center,
        color: Colors.green,
        width: 200,
        height: 200,
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  Path getClip(Size size) {
    final path = Path();
    path
      ..lineTo(0.0, size.height * 0.1)
      ..quadraticBezierTo(0, 0, size.width * 0.1, 0)
      ..lineTo(size.width * 0.8, size.height * 0.12)
      ..quadraticBezierTo(size.width * 0.9, size.height * 0.15,
          size.width * 0.9, size.height * 0.2)
      ..lineTo(size.width, size.height * 0.9)
      ..quadraticBezierTo(
          size.width, size.height, size.width * 0.9, size.height)
      ..lineTo(size.width * 0.2, size.height * 0.9)
      ..quadraticBezierTo(size.width * 0.1, size.height * 0.9, size.width * 0.1,
          size.height * 0.8)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

Answer 2

不要使用Rect来给您一个普通矩形，而是使用RRect来给您想要的圆角矩形，如果需要演示代码，请进行注释。

Answer 3

如果要在所有角上都磨圆。

Container(
  decoration:BoxDecoration(
     borderRadius:BorderRadius.circular(double radius)
   )
)

如果要在特定的角上有圆角的边缘。

 Container(
  decoration:BoxDecoration(
     borderRadius:BorderRadius.only(
       topLeft:Radius.circular()
       topRight :Radius.circular()
       bottomLeft :Radius.circular()
       bottomRight :Radius.circular()

      )
   )
)

有关更多详细信息，请查看以下链接：https://api.flutter.dev/flutter/painting/BorderRadius-class.html

如何创建一个带有圆形边缘的自定义容器？

3 个答案: