Flutter：画半圆答案

【问题标题】：Flutter: draw half circleFlutter：画半圆
【发布时间】：2019-07-22 22:25:46
【问题描述】：

如何画出这样的半圆？拜托，我不想要一个 Container 小部件并更改它的半径

【问题讨论】：

使用自定义painter或clipper
是的，我知道。我试图这样做，但我无法实现它

【解决方案1】：

我不明白您在“我不想要 Container 小部件并更改其半径”中的意思，但这是我创建半圆的方法：

class Test extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Container(
            padding: EdgeInsets.all(64.0),
            child: new Column(
              children: <Widget>[
                new ClipPath(
                  clipper: new CustomHalfCircleClipper(),
                  child: new Container(
                    height: 300.0,
                    width: 300.0,
                    decoration: new BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(150.0) ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

    class CustomHalfCircleClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final Path path = new Path();
        path.lineTo(0.0, size.height / 2);
        path.lineTo(size.width, size.height / 2);
        path.lineTo(size.width, 0);
        return path;
      }
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return true;
      }
    }

【讨论】：

不幸的是，如果我将高度设置为较低的值，它将被展平。在您的解决方案中，我必须保持宽高比

【解决方案2】：

你只需要一个Container，EASY PEASY：

Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              topLeft: Radius.circular(100)),
         color: Colors.red,
         shape: BoxShape.rectangle,
     ),
     height: 35,
     width: 35,
),

【讨论】：

【解决方案3】：

您可以使用 CustomPainter。

class HalfCircle extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {

    canvas.drawArc(Rect.fromCircle(center:Offset(size.width/2,size.height/2),radius: 97), 3.14, 3.14, false, customPaint());
    canvas.drawPath(getTrianglePath(size,20, 15), customPaint());
  }

  Path getTrianglePath(Size size,double x, double y) {
    return Path()
      ..moveTo(size.width/2, 0)
      ..lineTo(size.width/2+x, y)
      ..lineTo(size.width/2, y)
      ..lineTo(size.width/2-x, y);
  }

  Paint customPaint(){
    Paint paint = Paint();
    paint.color = Color(0xff2EA760);
    paint.isAntiAlias = true;
    paint.strokeWidth = 10;
    return paint;
  }

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

}

【讨论】：

是三角形，不是半圆