如何在不颤动的情况下创建半圆

Question

我想在底部创建一个半圆。但是还有一些我无法删除的空间。 //颤动

Image:

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

Answer 1

为什么不走简单路
像这样

Container(
          height: 30,
          width: 50,
          color: Colors.transparent,
          child: new Container(
            decoration: new BoxDecoration(
                color: Colors.black,
                borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(40.0),
                    topRight: const Radius.circular(40.0))),
          ),
        ),

Answer 2

您可以使用ArcView link轻松实现此视图。查看附件图片

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Row(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: Arc(
                arcType: ArcType.CONVEX,
                edge: Edge.TOP,
                height: 70.0,
                clipShadows: [ClipShadow(color: Colors.black)],
                child: new Container(
                  height: 70,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.lime,
                ),
              ),
            ),
          ],
        ),
      ),
    );
}

或创建自定义的Clipper

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

使用上方类，如下所示

new 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),
            ),
          ),
        )