如何在Flutter中在屏幕顶部创建一个半椭圆形？

Question

是否可以在屏幕顶部创建椭圆形？我尝试使用RenderBox，但觉得它不是正确的解决方案。

Answer 1

使用 CustomPainter 并播放曲线：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CustomPaint(
              painter: ShapesPainter(),
              child: Container(height: 300),
            ),
            Text('Text')
          ],
        ),
      ),
    );
  }
}

const double _kCurveHeight = 35;

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final p = Path();
    p.lineTo(0, size.height - _kCurveHeight);
    p.relativeQuadraticBezierTo(size.width / 2, 2 * _kCurveHeight, size.width, 0);
    p.lineTo(size.width, 0);
    p.close();

    canvas.drawPath(p, Paint()..color = Colors.red);
  }

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

Answer 2

在颤动中绘制一个半椭圆形的最佳方法是使用CustomPainter。

Container(
  child: CustomPaint( // Widget
    painter: PainterDetails(), // CustomPainterClass
  ),
),

// CustomPainterClass
class PainterDetails extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // here is where you will draw the half oval using canvas Paint class and Path class
  }

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

您可以使用quadraticBezierTo函数绘制曲线。