Flutter完整开发实战详解(九、 深入绘制原理)，通过五轮面试斩获offer阿里实习生亲述

• PaintingContext 是什么？
• Offset 是什么？

通过飞速查阅源码，我们可以首先了解到有 ：

• PaintingContext 的关键是 A place to paint ，同时它在父类 ClipContext 是包含有 Canvas ，并且 PaintingContext 的构造方法是 @protected，只在 PaintingContext.repaintCompositedChild 和 pushLayer 时自动创建。

• Offset 在 paint 中主要是提供当前控件在屏幕的相对偏移值，提供绘制时确定绘制的坐标。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nY0vQkgH-1637310321561)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da3e8308faca?imageView2/0/w/1280/h/960/ignore-error/1)]

OK，继续往下走，那么既然 PaintingContext 叫 Context ，那它肯定是存在上下文关系，那它是在哪里开始创建的呢？

通过调试源码可知，项目在 runApp 时通过 WidgetsFlutterBinding 启动，而在以前的篇幅中我们知道， WidgetsFlutterBinding 是一个“胶水类”，它会触发 mixin 的 RendererBinding ，如下图创建出根 node 的 PaintingContext 。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KD7v7FIb-1637310321587)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da3e83556096?imageView2/0/w/1280/h/960/ignore-error/1)]

好了，那么Offset 呢？如下图，对于 Offset 的传递，是通过父控件和子控件的 offset 相加之后，一级一级的将需要绘制的坐标结合去传递的。

目前简单来说，通过 PaintingContext 和 Offset ，在布局之后我们就可以在屏幕上准确的地方绘制会需要的画面。

[外链图片转存失败,源站可能有防盗链机