如何在不重建Widget的情况下重绘LeafRenderObjectWidget的RenderBox？

当然可以实现类似CustomPainter(repaint: someListenable)的效果，核心是让RenderObject直接监听数据变化并触发重绘，而非通过Widget重建。以下是具体实现方案：

核心思路 #

让RenderBox持有一个Listenable（比如ValueNotifier、ChangeNotifier），在数据变化时调用markNeedsPaint()触发重绘；同时对应的LeafRenderObjectWidget负责传递这个Listenable，并在必要时更新监听关系。

代码实现示例 #

1. 自定义RenderBox #

class CustomRenderBox extends RenderBox {
  late ValueNotifier<int> _counterNotifier;

  CustomRenderBox({required ValueNotifier<int> counterNotifier}) {
    _counterNotifier = counterNotifier;
    _counterNotifier.addListener(_onDataChanged);
  }

  // 监听数据变化，触发重绘
  void _onDataChanged() {
    markNeedsPaint();
  }

  // 更新监听的Notifier（当Widget传递新的Notifier时调用）
  set counterNotifier(ValueNotifier<int> newNotifier) {
    if (_counterNotifier == newNotifier) return;
    _counterNotifier.removeListener(_onDataChanged);
    _counterNotifier = newNotifier;
    _counterNotifier.addListener(_onDataChanged);
  }

  @override
  void performLayout() {
    // 根据需求设置布局大小
    size = const Size(200, 200);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    canvas.save();
    canvas.translate(offset.dx, offset.dy);
    
    // 使用更新后的数据绘制内容
    final textPainter = TextPainter(
      text: TextSpan(
        text: '当前计数：${_counterNotifier.value}',
        style: const TextStyle(color: Colors.black, fontSize: 24),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    textPainter.paint(canvas, const Offset(10, 10));
    
    canvas.restore();
  }

  @override
  void dispose() {
    // 移除监听，避免内存泄漏
    _counterNotifier.removeListener(_onDataChanged);
    super.dispose();
  }
}

2. 对应的LeafRenderObjectWidget #

class CustomLeafWidget extends LeafRenderObjectWidget {
  final ValueNotifier<int> counterNotifier;

  const CustomLeafWidget({super.key, required this.counterNotifier});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return CustomRenderBox(counterNotifier: counterNotifier);
  }

  @override
  void updateRenderObject(BuildContext context, CustomRenderBox renderObject) {
    // 当Notifier变化时，更新RenderBox的监听对象
    renderObject.counterNotifier = counterNotifier;
  }
}

3. 使用示例 #

在父Widget中持有ValueNotifier，更新其值时，CustomLeafWidget不会重建，但RenderBox会自动重绘：

class ParentPage extends StatefulWidget {
  const ParentPage({super.key});

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  final ValueNotifier<int> _counter = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CustomLeafWidget(counterNotifier: _counter),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () => _counter.value++,
          child: const Text('点击增加计数'),
        ),
      ],
    );
  }
}

注意事项 #

• 必须在RenderBox的dispose方法中移除监听器，防止内存泄漏。
• 如果数据变化需要调整布局（比如改变大小），可以调用markNeedsLayout()替代markNeedsPaint()。
• 若不需要替换Listenable对象，也可以简化updateRenderObject的逻辑，只在初始化时绑定监听。

内容的提问来源于stack exchange，提问作者SePröbläm