如何在颤动中绘制具有不同开始和结束厚度的弧

Question

我想绘制一个具有不同起始和结束厚度的弧线，如下图所示。

Answer 1

您可以使用两个半圆来实现这一点，我制作了一个演示，请检查下面的代码是否对您有用

半圈课

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;
  }
}

构建方法

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Stack(
          children: <Widget>[
            ClipPath(
              clipper: new CustomHalfCircleClipper(),
              child: new Container(
                height: MediaQuery.of(context).size.width,
                width: MediaQuery.of(context).size.width,
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(
                        MediaQuery.of(context).size.width / 2)),
              ),
            ),
            Positioned(
              bottom: 0,
              right: 1,
              left: 40,
              child: ClipPath(
                clipper: new CustomHalfCircleClipper(),
                child: new Container(
                  height: MediaQuery.of(context).size.width - 20,
                  width: MediaQuery.of(context).size.width - 20,
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(
                          (MediaQuery.of(context).size.width - 20) / 2)),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 2

逻辑是彼此之间使用两个圆圈。顶部的圆圈向右移动。您可以通过CustomPainter来实现。

Paint backCirclePaint = Paint()
  ..style = PaintingStyle.fill
  ..color = Colors.blue;

Paint frontCirclePaint = Paint()
  ..style = PaintingStyle.fill
  ..color = Colors.white;

canvas.drawArc(
  Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 100.0), 
  0.0, -(2 * pi * percentage) / 100, true, backCirclePaint);

// percentage is responsible for the amount(angle) of arc you want to build.

canvas.drawArc(
  Rect.fromCircle(center: Offset(size.width/2 + 10.0, size.height/2), radius: 90.0), 
  0.0, -(2 * pi * percentage) / 100, true, frontCirclePaint);