深海游弋的鱼 – 默默的点滴

这篇文章主要讨论的是Fluter中CustomPainter中使用repaint属性实现自动paint的原理。

首先使用CustomPaint创建一个StatefulWidget，demo中根据点击位置，对蓝色的圆进行位置变换。

代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyPaint());

class MyPaint extends StatefulWidget {
  const MyPaint({Key? key}) : super(key: key);

  @override
  _MyPaintState createState() => _MyPaintState();
}

class _MyPaintState extends State<MyPaint> {
  ValueNotifier<double> _vn = ValueNotifier<double>(0);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: parse,
      child: CustomPaint(
        painter: BoxPainter(vn: _vn),
      ),
    );
  }

  dynamic parse(DragUpdateDetails details) {
    _vn.value = details.globalPosition.dy;
  }
}

class BoxPainter extends CustomPainter {
  ValueNotifier<double> vn;
  BoxPainter({@required this.vn}) : super(repaint: vn);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, 0);
    canvas.drawCircle(Offset(0, vn.value), 66, Paint()..color = Colors.blue);
  }

  @override
  bool shouldRepaint(BoxPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(BoxPainter oldDelegate) => false;
}

import 'package:flutter/material.dart';

void main() => runApp(MyPaint());

class MyPaint extends StatefulWidget {

const MyPaint({Key? key}) : super(key: key);

@override

_MyPaintState createState() => _MyPaintState();

}

class _MyPaintState extends State<MyPaint> {

ValueNotifier<double> _vn = ValueNotifier<double>(0);

@override

Widget build(BuildContext context) {

return GestureDetector(

onPanUpdate: parse,

child: CustomPaint(

painter: BoxPainter(vn: _vn),

);

}

dynamic parse(DragUpdateDetails details) {

_vn.value = details.globalPosition.dy;

}

class BoxPainter extends CustomPainter {

ValueNotifier<double> vn;

BoxPainter({@required this.vn}) : super(repaint: vn);

@override

void paint(Canvas canvas, Size size) {

canvas.translate(size.width / 2, 0);

canvas.drawCircle(Offset(0, vn.value), 66, Paint()..color = Colors.blue);

}

@override

bool shouldRepaint(BoxPainter oldDelegate) => false;

@override

bool shouldRebuildSemantics(BoxPainter oldDelegate) => false;

}

Repaint如何工作?

CustomPainter中的源码就有答案

abstract class CustomPainter extends Listenable {
  final Listenable? _repaint;
  
  @override
  void addListener(VoidCallback listener) => _repaint?.addListener(listener);

  @override
  void removeListener(VoidCallback listener) =>
      _repaint?.removeListener(listener);
 }

abstract class CustomPainter extends Listenable {

final Listenable? _repaint;

@override

void addListener(VoidCallback listener) => _repaint?.addListener(listener);

@override

void removeListener(VoidCallback listener) =>

_repaint?.removeListener(listener);

}

这个时候_repaint是一个ValueNotifier，那到底是谁注册了listener，什么时候注册，什么时候销毁呢?

啥时候注册?那就给addListener打个断点，查查调用栈。

这个时候就顺腾摸瓜找到CustomPaint(是Paint不是Painter)创建的RenderCustomPaint，在attach和detach中，进行了注册和销毁。

markNeedsPaint和PipelineOwner是啥？

深入浅出 Flutter Framework 之 PipelineOwner | 雪峰的blog (zxfcumtcs.github.io)

对于PipelineOwner，暂时只能这么说：

那么markNeedsPaint是什么？这是一个RenderObject的方法，标记该RenderObject在RenderTree上需要更新,具体做法就是设置私有变量_needsPaint为true。

这个变量怎么用呢?通过对paint方法打断点，越过了各种Binding，找到了PipelineOwner的flushPaint方法。

芜，flushPaint在干嘛？很简单啊，把收集到的_nodesNeedingPaint全部拿出来画一遍。关于_nodesNeedingPaint怎么来的，看下面markNeedsPaint源码中，关于owner得属性有个add方法，从这边添加dirtyNode。

  void flushPaint() {
  //...省略 似乎是控制同步的代码
      final List<RenderObject> dirtyNodes = _nodesNeedingPaint;
      _nodesNeedingPaint = <RenderObject>[];
      // Sort the dirty nodes in reverse order (deepest first).
      for (final RenderObject node in dirtyNodes
        ..sort((RenderObject a, RenderObject b) => b.depth - a.depth)) {
        assert(node._layer != null);
        if (node._needsPaint && node.owner == this) {
          if (node._layer!.attached) {
            print(node);     //查查对应的RenderObject到底是谁
            PaintingContext.repaintCompositedChild(node);
          } else {
            node._skippedPaintingOnLayer();
          }
        }
      }
      assert(_nodesNeedingPaint.isEmpty);
      }
  //...省略 似乎是控制同步的代码

void flushPaint() {

//...省略似乎是控制同步的代码

final List<RenderObject> dirtyNodes = _nodesNeedingPaint;

_nodesNeedingPaint = <RenderObject>[];

// Sort the dirty nodes in reverse order (deepest first).

for (final RenderObject node in dirtyNodes

..sort((RenderObject a, RenderObject b) => b.depth - a.depth)) {

assert(node._layer != null);

if (node._needsPaint && node.owner == this) {

if (node._layer!.attached) {

print(node); //查查对应的RenderObject到底是谁

PaintingContext.repaintCompositedChild(node);

} else {

node._skippedPaintingOnLayer();

}

assert(_nodesNeedingPaint.isEmpty);

}

//...省略似乎是控制同步的代码

注意到代码中我自己添加了一行print，终端输出结果为I/flutter ( 7249): RenderView#ae16c NEEDS-PAINT，并不是上文提到的RenderCustomPaint，为什么呢，原因还在markNeedsPaint的源码里面。

注意到这一行，做了对父级markNeedsPaint的调用。

else if (parent is RenderObject){
  parent.markNeedsPaint();
}

else if (parent is RenderObject){

parent.markNeedsPaint();

}

好奇现在的RenderTree结构？使用 debugDumpRenderTree方法把RenderTreeDump出来。

原因一目了然了，自下向上mark到了RenderView。RenderView是啥？是所有RenderTree的根。最后还有一个isRepaintBoundary属性，这边简单的解释一下：有时候在RenderTree中会见到 RenderRepaintBoundary class - rendering library - Dart API (flutter.dev)，这个作用是用作优化，即当你的子RenderObject的绘制不会影响到父RenderObject的绘制时，插入RenderRepaintBoundary保证局部重绘，避免上面说的一直向上调用parent.markNeedPaint。

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Flutter CustomPainter自动绘制属性repaint原理

Repaint如何工作?

CustomPainter中的源码就有答案

markNeedsPaint和PipelineOwner是啥？

参考链接

发布者

默默

发表回复取消回复

Repaint如何工作?

CustomPainter中的源码就有答案

markNeedsPaint和PipelineOwner是啥？

参考链接

发布者

默默

发表回复 取消回复

发表回复取消回复