Flutter开发进阶之Canvas

在Flutter中，Canvas是一个非常强大的工具，可以用来创建自定义的绘图和图形。以下是一个使用CustomPainter来在Canvas上绘制一些简单图形的例子：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            size: Size(200, 200),
            painter: MyPainter(),
          ),
        ),
      ),
    );
  }
}
 
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制一个蓝色的圆形
    final Paint paint = Paint()..color = Colors.blue;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 4, paint);
 
    // 绘制一个红色的正方形
    final Paint rectPaint = Paint()..color = Colors.red;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width / 2, size.height / 2), rectPaint);
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false; // 如果你的画布不会改变，可以返回false以提高效率
  }
}

这个例子中，我们创建了一个MyPainter类，它继承自CustomPainter。在paint方法中，我们使用Canvas来绘制一个蓝色的圆形和一个红色的正方形。shouldRepaint方法返回false表示绘制的内容不会随着某些配置的变化而改变。

在main方法中，我们创建了一个MyApp作为应用的根Widget，它包含一个CustomPaintWidget，该Widget使用MyPainter来绘制画布，并将其大小设置为200x200。