繁体   English   中英

如何在 Flutter 中制作圆形?

[英]How to make round shape in Flutter?

我需要实现如下图所示的形状。

在此处输入图像描述

经过研究,我找到了CustomPaiter并尝试实施一段时间。 我得到这个结果。

在此处输入图像描述

我不知道如何圆角形状。 有人可以指导我吗?

我的画家班。

class NamePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;
    var path = Path();
    path.moveTo(size.width * 0.2, 0);
    path.lineTo(size.width * 0.1, size.height / 2);
    path.lineTo(size.width * 0.2, size.height);

    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

这是您的剪辑代码...并使用Shape Maker设计此类布局,您将获得剪辑代码

class NamePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;
    Path path = Path();
    path.moveTo(size.width*0.2883333,size.height*0.7857143);
    path.cubicTo(size.width*0.1248167,size.height*0.5703571,size.width*0.1252000,size.height*0.5750857,size.width*0.1233333,size.height*0.5700000);
    path.cubicTo(size.width*0.1237583,size.height*0.5689143,size.width*0.0837667,size.height*0.4985143,size.width*0.1231167,size.height*0.4277286);
    path.quadraticBezierTo(size.width*0.0839833,size.height*0.4741857,size.width*0.2916667,size.height*0.2128571);
    path.quadraticBezierTo(size.width*0.8189500,size.height*0.2181143,size.width*0.9582500,size.height*0.2158143);
    path.quadraticBezierTo(size.width*0.9575417,size.height*0.2154429,size.width*0.9583333,size.height*0.7828571);
    path.quadraticBezierTo(size.width*0.7908333,size.height*0.7835714,size.width*0.2883333,size.height*0.7857143);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM