Flutter如何画半圆（半圆）

Posted 2023-02-23

【中文标题】Flutter如何画半圆（半圆）

【英文标题】：Flutter how to draw semicircle (half circle)

【发布时间】：2020-01-04 23:46:40

【问题描述】：

我怎样才能画出这样的半圆？

代码：

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;
  

【参考方案1】：

创建一个StatelessWidget，比如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;

用法：

@override
Widget build(BuildContext context) 
  return Scaffold(
    appBar: AppBar(),
    body: MyArc(diameter: 300),
  );

【讨论】：

我们如何将LinearGradient 作为颜色添加到绘画类？

你需要在Paint对象上使用Shader。

【参考方案2】：

Container(
    decoration: const BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(100),
        bottomRight: Radius.circular(100),
      ),

用这个代码你可以画一个半圆。

【讨论】：

在发送到这里之前，您必须重新格式化您的代码

对不起，我是新手

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

谢谢谢谢

【参考方案3】：

用一个简单的实现（不是最好的）

您可以在一行内绘制 2 个具有相同宽度和高度的容器 并为每个容器提供一个 BoxDectoration => BorderRadius 如以下代码， 这不是最好的实现，它只是有效

Row(children: [

          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topRight: Radius.circular(200),),
            color: Colors.blue[300],
            ),
            width: 200,
            height: 200,
            ),
            Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(200),),
            color: Colors.blue[300],
            ),
            width: 200,
            height: 200,
            )

], ),

【讨论】：

确保宽度=高度=圆形边框半径

【参考方案4】：

创建一个从 CustomClipper 扩展的类，并使用 arcToPoint 方法绘制圆并使用 ClipPath 小部件，这是实现它的代码

ClipPath(
      clipper: CustomClip(),
      child: Container(
        width: 200,
        height: 100,
        color: Colors.blue,
      ),
    ),

    class CustomClip extends CustomClipper<Path> 
      @override
      Path getClip(Size size) 
        double radius = 100;
    
        Path path = Path();
        path
          ..moveTo(size.width / 2, 0)
          ..arcToPoint(Offset(size.width, size.height),
              radius: Radius.circular(radius))
          ..lineTo(0, size.height)
          ..arcToPoint(
            Offset(size.width / 2, 0),
            radius: Radius.circular(radius),
          )
          ..close();
    
        return path;
      
    
      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) 
        return true;
      
    

【参考方案5】：

更新：您只需要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,
                        ),

这是一个使用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,
                        ),
                      ),
                    ],
                  ),