Flutter 画笔(Paint)、drawRect(绘制矩形)、PaintingStyle

在Flutter中，CustomPaint 是一个用于绘制自定义图形、图表和其他视觉效果的组件。要使用 CustomPaint 来绘制一个矩形，你需要提供一个 Painter 对象，它定义了如何绘制。

以下是一个简单的 Painter 实现，用于绘制一个矩形：

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: RectanglePainter(),
          ),
        ),
      ),
    );
  }
}
 
class RectanglePainter extends CustomPainter {
  Paint _paint = Paint()
    ..color = Colors.blue // 设置画笔颜色
    ..style = PaintingStyle.fill // 设置画笔样式为填充
    ..strokeWidth = 2.0; // 设置画笔的宽度
 
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制一个矩形
    canvas.drawRect(
      Rect.fromLTWH(10, 10, size.width - 20, size.height - 20),
      _paint,
    );
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false; // 如果不需要重新绘制，返回 false
  }
}

在这个例子中，RectanglePainter 类继承自 CustomPainter，并重写了 paint 方法来绘制矩形。Painter 使用 Paint 对象来定义绘制样式，例如颜色、样式（填充或描边）、和宽度。drawRect 方法则用于根据提供的 Rect 对象绘制矩形。

CustomPaint 组件负责指定绘制区域的大小，并提供 painter 属性来指定用于绘制的 Painter。在这个例子中，矩形被绘制在 CustomPaint 组件的中心位置，并且大小被设置为 200x200 逻辑像素。