如何在颤动中创建具有圆形边缘的自定义容器？

Posted 2023-02-25

【中文标题】如何在颤动中创建具有圆形边缘的自定义容器？

【英文标题】：How to create a custom container with rounded edges in flutter?

【发布时间】：2020-07-27 23:12:59

【问题描述】：

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

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;
  

【问题讨论】：

你可以看这里并摆弄它：***.com/questions/50211863/…

你找到解决这个案子的办法了吗？

【参考方案1】：

您可以使用 ClipPath。在其中使用 Custom 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;
  

【讨论】：

@ARAB KUMAR：不确定为什么要扩展 CustomPainter 类。为什么不扩展 StatelessWidget 并返回一个容器。如果您有特定的疑问，请告知。

他绝对可以使用它。但我的想法是，他想知道如何按照他所要求的 方式 做到这一点。他可能想知道如何以自定义方式实现圆角，同时仍保持他已有的特定形状。

是的，他引用了“我正在尝试创建自定义容器”

@back_to_square 感谢您的回答，但只需查看一次容器的形状。它不是一个具有平行边缘的简单容器，并且borderRadius 在这里不起作用。我已经试过了。如果您修改答案，这将非常有帮助。

@back_to_square 非常感谢。您的回答现在可以解决我的问题，但我只是想知道使用 CustomPainter 是否可以做到这一点。如果是，请告诉我。

【参考方案2】：

而不是使用Rect 给你一个普通的矩形使用RRect 这将给出所需的圆角矩形，如果你需要一个演示代码，请评论。

【讨论】：

请。这将非常有帮助。谢谢

【参考方案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