Flutter强制重绘插件 repaint 的使用

repaint 是一个用于创建和管理画布的库，类似于 CustomPaint，但提供了更多功能。本文将介绍如何使用该插件，并提供完整的示例代码。

如何使用

处理鼠标事件

为了处理鼠标事件，可以通过重写 onPointerEvent 方法来实现：

@override
@mustCallSuper
void onPointerEvent(PointerEvent event) {
  switch (event.runtimeType) {
    case PointerDownEvent:
    case PointerUpEvent:
    case PointerCancelEvent:
    case PointerPanZoomStartEvent:
    case PointerPanZoomUpdateEvent:
    case PointerPanZoomEndEvent:
    case PointerScrollEvent:
    case PointerSignalEvent:
    case PointerHoverEvent:
      break;
    case PointerMoveEvent e:
      // 在鼠标拖动时移动 [_rect] 通过 [_offset]
      final rect = _rect.shift(_offset);
      if (!rect.contains(e.localPosition)) return;
      _offset += e.delta;
  }
}

处理键盘事件

使用 HardwareKeyboard 管理器

你可以使用 HardwareKeyboard 来处理键盘事件：

bool _onKeyEvent(KeyEvent event) {
  if (event.deviceType != KeyEventDeviceType.keyboard) return false;
  if (event is! KeyDownEvent) return false;

  // F1 - 执行某些操作
  switch (event.logicalKey) {
    case LogicalKeyboardKey.f1:
      doSomething();
      return true;
    default:
      return false;
  }
}

@override
void mount(_, __) {
  HardwareKeyboard.instance.addHandler(_onKeyEvent);
}

@override
void unmount() {
  HardwareKeyboard.instance.removeHandler(_onKeyEvent);
}

使用 Focus 小部件

你也可以通过包裹 RePaint 小部件并使用 Focus 来处理键盘事件：

final painter = RePainterImpl();

Widget build(BuildContext context) {
  return Focus(
    onKeyEvent: painter.onKeyEvent,
    child: RePaint(
      painter: painter,
    ),
  );
}

完整示例 Demo

下面是一个完整的示例，展示了如何使用 repaint 插件进行基本的绘图操作，并处理鼠标和键盘事件：

import 'package:flutter/material.dart';
import 'package:repaint/repaint.dart';

class MyPainter extends RePainterImpl {
  Offset _offset = Offset.zero;
  Rect _rect = Rect.fromLTWH(50, 50, 200, 100);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    canvas.drawRect(_rect.shift(_offset), paint);
  }

  @override
  bool shouldRepaint(covariant RePainter oldDelegate) {
    return true; // 强制重绘
  }

  @override
  void onPointerEvent(PointerEvent event) {
    switch (event.runtimeType) {
      case PointerDownEvent:
      case PointerUpEvent:
      case PointerCancelEvent:
      case PointerPanZoomStartEvent:
      case PointerPanZoomUpdateEvent:
      case PointerPanZoomEndEvent:
      case PointerScrollEvent:
      case PointerSignalEvent:
      case PointerHoverEvent:
        break;
      case PointerMoveEvent e:
        final rect = _rect.shift(_offset);
        if (!rect.contains(e.localPosition)) return;
        _offset += e.delta;
        markNeedsPaint(); // 标记需要重绘
    }
  }

  bool _onKeyEvent(KeyEvent event) {
    if (event.deviceType != KeyEventDeviceType.keyboard) return false;
    if (event is! KeyDownEvent) return false;

    switch (event.logicalKey) {
      case LogicalKeyboardKey.arrowLeft:
        _offset = Offset(_offset.dx - 10, _offset.dy);
        markNeedsPaint();
        return true;
      case LogicalKeyboardKey.arrowRight:
        _offset = Offset(_offset.dx + 10, _offset.dy);
        markNeedsPaint();
        return true;
      case LogicalKeyboardKey.arrowUp:
        _offset = Offset(_offset.dx, _offset.dy - 10);
        markNeedsPaint();
        return true;
      case LogicalKeyboardKey.arrowDown:
        _offset = Offset(_offset.dx, _offset.dy + 10);
        markNeedsPaint();
        return true;
      default:
        return false;
    }
  }

  @override
  void mount(_, __) {
    HardwareKeyboard.instance.addHandler(_onKeyEvent);
  }

  @override
  void unmount() {
    HardwareKeyboard.instance.removeHandler(_onKeyEvent);
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final painter = MyPainter();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Repaint Example')),
        body: Center(
          child: Focus(
            onKeyEvent: painter.onKeyEvent,
            child: Repaint(
              painter: painter,
              size: Size.infinite,
            ),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 repaint 插件进行自定义绘制，并通过鼠标和键盘事件来更新绘制内容。希望这些信息对你有所帮助！