颤振如何绘制半圆(半圆)

时间:2019-09-01 18:21:35

标签: flutter flutter-layout

如何绘制这样的半圆?

enter image description here

代码:

class DrawHalfCircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = new Path();
    ...
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }

2 个答案:

答案 0 :(得分:2)

创建一个接受StatelessWidget的{​​{1}}说MyArc

diameter

用法:

class MyArc extends StatelessWidget {
  final double diameter;

  const MyArc({Key key, this.diameter = 200}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(),
      size: Size(diameter, diameter),
    );
  }
}

// This is the Painter class
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.blue;
    canvas.drawArc(
      Rect.fromCenter(
        center: Offset(size.height / 2, size.width / 2),
        height: size.height,
        width: size.width,
      ),
      math.pi,
      math.pi,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

答案 1 :(得分:0)

这是一个使用 Stack 的简单代码。您可以使用矩形和圆形轻松生成半圆。使用 BoxDecoration(shape:)

重塑容器
Stack(
   children: [
        Align(
           alignment: Alignment.center,
           child: Container(
                height: 35,
                          width: 35,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.rectangle,
                          ),
                          height: 35,
                          width: 35,
                        ),
                      ),
                    ],
                  ),

更新:您只需要一个Container,简单易懂:

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