探索 Flutter 美学：BezierCurve 项目深度解析

import 'package:flutter/material.dart';
 
class BezierCurvePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('贝塞尔曲线'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(300.0, 300.0),
          painter: BezierPainter(),
        ),
      ),
    );
  }
}
 
class BezierPainter extends CustomPainter {
  Paint _paint = Paint()
    ..color = Colors.blue
    ..strokeWidth = 2.0
    ..strokeCap = StrokeCap.round;
 
  @override
  void paint(Canvas canvas, Size size) {
    // 定义起点、控制点和终点
    Offset p0 = Offset(size.width / 4, size.height / 2);
    Offset p1 = Offset(size.width / 2, size.height / 4);
    Offset p2 = Offset(size.width / 2, size.height * 3 / 4);
    Offset p3 = Offset(size.width * 3 / 4, size.height / 2);
 
    // 创建贝塞尔路径
    Path path = Path();
    path.moveTo(p0.dx, p0.dy);
    path.cubicTo(p1.dx, p1.dy, p2.dx, p2.dy, p3.dx, p3.dy);
 
    // 绘制贝塞尔曲线
    canvas.drawPath(path, _paint);
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
 
void main() {
  runApp(MaterialApp(
    home: BezierCurvePage(),
  ));
}

这段代码定义了一个名为BezierCurvePage的StatelessWidget，它包含一个CustomPaint组件来绘制一个贝塞尔曲线。BezierPainter类继承自CustomPainter，并实现了绘制贝塞尔曲线的逻辑。当运行这段代码时，会显示一个带有贝塞尔曲线的页面。这个例子展示了如何使用Flutter绘制复杂图形，并且是学习Flutter绘图概念的一个很好的起点。