文章目录

• 前言
• 一、为何简化？
• • 1、通常做法
  • • （1）、绘制形状1
    • （2）、绘制形状2
    • （3）、界面显示
  • 2、简化
• 二、完整代码
• 三、使用示例
• • 1、绘制图形
  • 2、动态触发绘制
• 总结

前言

使用Flutter做界面时，有时会需要需要自绘的控件，比如异形按钮或者显示视频，我们通常可以用CustomPainter实现。但是CustomPainter是一个抽象类，需要继承并实现绘制方法，才能进行绘制。本文对CustomPainter进行了一个简单的封装，简化绘制操作。

一、为何简化？

1、通常做法

继承CustomPainter，并在paint中实现绘制。

（1）、绘制形状1

my_custom_painter_ellipse.dart

（2）、绘制形状2

my_custom_painter_triangle.dart

CustomPaint中指定继承的CustomPainter

（3）、界面显示

page.dart

2、简化

有时候我们并不需要复杂的绘制，只是需要简单绘制一个图像或者填充颜色、或者测试图像混合，每次都需要新建一个文件，并继承实现一个类，是比较麻烦的，如果我们将paint变成一个回调方法，在控件build中直接编写绘制代码，那事情就方便很多了。
page2.dart

二、完整代码

simple_painter.dart

/// 创建人：  xin
/// 创建时间: 2024/5/1 11:34
/// 注释：    辅助绘制，直接通过参数传方法绘制
class SimplePainter extends CustomPainter {
  final void Function(Canvas canvas, Size size) onPaint;
  final bool Function(CustomPainter oldDelegate)? onShouldRepaint;
  const SimplePainter({
    required this.onPaint,
    this.onShouldRepaint,
    super.repaint,
  });
  @override
  void paint(Canvas canvas, Size size) {
    onPaint(canvas, size);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return onShouldRepaint?.call(oldDelegate) ?? true;
  }
}

三、使用示例

1、绘制图形

class Page2 extends StatelessWidget {
  const Page2({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CustomPaint(
          //绘制矩形
          painter: SimplePainter(onPaint: (Canvas canvas, Size size) {
            final paint = Paint();
            paint.color = Colors.black38;
            canvas.drawRect(
                Rect.fromLTWH(0, 0, size.width, size.height), paint);
          }),
        ),
      ],
    );
  }
}

2、动态触发绘制

class Page2 extends StatelessWidget {
  final ChangeNotifier _notifier = ChangeNotifier();
  Page2({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CustomPaint(
          //绘制矩形
          painter: SimplePainter(
              repaint: _notifier,
              onPaint: (Canvas canvas, Size size) {
                final paint = Paint();
                paint.color = Colors.black38;
                canvas.drawRect(
                    Rect.fromLTWH(0, 0, size.width, size.height), paint);
              }),
        ),
      ],
    );
  }

  //调用方法触发局部重绘，
  void trigglePaint() {
    _notifier.notifyListeners();
  }
}

总结

以上就是今天要讲的内容，本文实现SimplePainter主要目的还是在于方便使用，尤其是写测试代码需要验证某些功能时，新建类并继承是比较繁琐的，而且那种方式也是比较“重”的，本文提供方式则轻量很多且灵活性也比较大，即可以在buid中直接绘制，也可以把绘制封装在方法中再调用，又或者封装在类中在调用。