Question

我必须像上图一样设计屏幕：

我想在上图中绘制白色背景部分。我已经尝试使用带有剪辑路径的自定义绘画，但我无法像图像一样实现。

这是我的代码：

class CommomContainer extends CustomClipper<Path> {
  CommomContainer({@required this.holeRadius});

  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width / 2 - holeRadius - 10, 0.0)
      ..quadraticBezierTo(
          size.width / 2 - holeRadius, 0.0, size.width / 2 - holeRadius, 10.0)
      ..arcToPoint(
        Offset(size.width / 2 + holeRadius, 0.0),
        clockwise: false,
        radius: Radius.circular(2),
      )
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CommomContainer oldClipper) => true;
}

感谢任何帮助。

Answer 1

在这里您可以使用 Shape Maker，我也使用了它。您可以将笔触样式从 PaintingStyle.stroke 更改为 PaintingStyle.fill 以填充所需的颜色。

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

      Paint paint_0 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_0 = Path();
        path_0.moveTo(0,0);
        path_0.lineTo(size.width,0);
        path_0.lineTo(size.width,size.height);
        path_0.lineTo(0,size.height);
        path_0.lineTo(0,0);
        path_0.close();

        canvas.drawPath(path_0, paint_0);
      

      Paint paint_1 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_1 = Path();
        path_1.moveTo(size.width*0.3071375,size.height*0.3273600);
        path_1.cubicTo(size.width*0.3067750,size.height*0.1999400,size.width*0.3815000,size.height*0.1964000,size.width*0.4125000,size.height*0.2000000);
        path_1.cubicTo(size.width*0.4514375,size.height*0.3614200,size.width*0.5514000,size.height*0.3594200,size.width*0.5875000,size.height*0.2000000);
        path_1.quadraticBezierTo(size.width*0.6656000,size.height*0.1954200,size.width*0.6943500,size.height*0.3273600);
        path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.6060200,size.width*0.6943500,size.height*0.6990200);
        path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.8229400,size.width*0.6169000,size.height*0.8229400);
        path_1.quadraticBezierTo(size.width*0.4427250,size.height*0.8229400,size.width*0.3846250,size.height*0.8229400);
        path_1.quadraticBezierTo(size.width*0.3049125,size.height*0.8229600,size.width*0.3071375,size.height*0.6990200);
        path_1.quadraticBezierTo(size.width*0.3071375,size.height*0.6060200,size.width*0.3071375,size.height*0.3273600);
        path_1.close();

        canvas.drawPath(path_1, paint_1);
      

      Paint paint_2 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_2 = Path();
        path_2.moveTo(size.width*0.5000002,size.height*0.0804608);
        path_2.cubicTo(size.width*0.5273750,size.height*0.0804200,size.width*0.5684875,size.height*0.1111200,size.width*0.5684620,size.height*0.1899997);
        path_2.cubicTo(size.width*0.5684875,size.height*0.2338200,size.width*0.5479250,size.height*0.2995600,size.width*0.5000002,size.height*0.2995385);
        path_2.cubicTo(size.width*0.4726125,size.height*0.2995600,size.width*0.4315250,size.height*0.2667000,size.width*0.4315384,size.height*0.1899997);
        path_2.cubicTo(size.width*0.4315250,size.height*0.1462000,size.width*0.4520625,size.height*0.0804200,size.width*0.5000002,size.height*0.0804608);
        path_2.close();

        canvas.drawPath(path_2, paint_2);
      
        
      }

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

Answer 2

试试这个，我用过堆栈，然后我在矩形的顶部放了 2 个同心圆。

 Scaffold(
    backgroundColor: Colors.yellow,
    body: Center(
      child: Stack(
        alignment: Alignment.topCenter,
        clipBehavior: Clip.none,
        children: [
          Card(
            color: Colors.white,
            child: Container(
              height: 300,
              width: 300,
            ),
          ),
          Positioned(
            top: -50,
            child: Container(
              height: 100,
              width: 100,
              // color: Colors.yellow,
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.yellow),
            ),
          ),
          Positioned(
            top: -40,
            child: Container(
              height: 80,
              width: 80,
              // color: Colors.yellow,
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.white),
            ),
          )
        ],
      ),));

如何在颤动中绘制带有半圆的容器

2 个答案: