如何在 Flutter 中创建这种形状？

Posted 2023-02-23

【中文标题】如何在 Flutter 中创建这种形状？

【英文标题】：How to create this kind of shape in Flutter?

【发布时间】：2021-08-27 15:08:55

【问题描述】：

请谁能帮我在手机屏幕的右上角创建这种形状：

提前致谢。

【参考方案1】：

您可以使用 Stack 小部件，并将 Positioned 小部件作为其子小部件，该小部件带有一个带有圆圈的容器，之后您可以将圆圈推出屏幕，以便只渲染它的一部分

class _MyAppState extends State<MyApp> 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: MyApp._title,
      home: Scaffold(
          body: Column(
        children: [
          CircleCorner(),
        ],
      )),
    );
  


class CircleCorner extends StatelessWidget 
  const CircleCorner(
    Key? key,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    Size size = MediaQuery.of(context).size;
    return SizedBox(
      width: size.width,
      height: 300,
      child: Stack(
        children: [
          Positioned(
            top: -460,
            right: -380,
            child: Container(
               width: 600.0,
               height: 600.0,
              decoration: new BoxDecoration(
                color: Colors.black87,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    );
  

【讨论】：

您的答案有效，但您可以看到图片不像圆圈。

那是什么？你是指图像内的图标吗？它是它的一部分吗？还是黑色的东西不是圆圈？

我指的是黑色的东西而不是里面的图标

你可以改变容器的位置和大小来实现你想要的形式，如果你不想使用一个推到屏幕外的圆圈你可以使用自定义画家来创建精确的形式，我改变了图像，也许这更像你想要的

【参考方案2】：

我建议这样做，当然必须根据您的要求进行一些更改

class Demo extends StatelessWidget 
  const Demo(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return SafeArea(
      child: Container(
        color: Colors.white,
        child: Stack(
          fit: StackFit.expand,
          children: [
            CustomPaint(
              painter: BackgroundPainter(),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 50, right: 50),
              child: Align(
                alignment: Alignment.topRight,
                child: Icon(Icons.menu, size: 50),
              ),
            ),
          ],
        ),
      ),
    );
  


class Point 
  final double _xAxis;
  final double _yAxis;

  Point(this._xAxis, this._yAxis);


class BackgroundPainter extends CustomPainter 
  final Paint _bluePaint;

  BackgroundPainter()
      : _bluePaint = Paint()
          ..color = Colors.lightBlue.shade300
          ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) 
    paintBlue(size, canvas);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

  void paintBlue(Size size, Canvas canvas) 
    final path = Path();

    path.moveTo(size.width, 0);
    path.lineTo(size.width * 0.60, 0);

    _addPointsToPath(path, [
      Point(size.width * 0.55, size.height * 0.25),
      Point(size.width, size.height * 0.25),
    ]);

    canvas.drawPath(path, _bluePaint);
  

  void _addPointsToPath(Path path, List<Point> points) 
    for (var i = 0; i < points.length - 2; i++) 
      final xDiff = (points[i]._xAxis + points[i + 1]._xAxis) / 2;
      final yDiff = (points[i]._yAxis + points[i + 1]._yAxis) / 2;
      path.quadraticBezierTo(points[i]._xAxis, points[i]._yAxis, xDiff, yDiff);
    

    final secondLastPoint = points[points.length - 2];
    final lastPoint = points[points.length - 1];
    path.quadraticBezierTo(secondLastPoint._xAxis, secondLastPoint._yAxis,
        lastPoint._xAxis, lastPoint._yAxis);