Flutter Widget 之RepaintBoundary

想象你是一名油漆工，正在粉刷房屋的一部分，每当你尝试只粉刷一面墙时，都会不小心将几滴颜料滴在相邻的墙上。不知不觉中，你必须重新粉刷整个房间。这就像Flutter的渲染工作方式。

每个房间和我们假设的房子都是Flutter层树中的一个层，每当Flutter需要重新绘制一层中的某些内容时，它都会重新绘制整个层。

油漆工通过在边缘添加蓝色胶带使他们的油漆不会沾到相邻墙面来解决这个问题。

如果Flutter开发人员有类似的技巧那不是会很好吗？

幸运的是，我们做到了，它叫做RepaintBoundary

首先，在你的main方法中，将debugRepaintRainbowEnable设置为“true”,就在你调用runApp的上方。该标志告诉Flutter在每个重绘区域周围绘制彩色边框并在重绘区域时更改该颜色。

void main() {
    debugRepaintRainbowEnable = true;
    runApp(MyApp());
}

现在，启动你的应用程序并查看哪些边框颜色发生了变化。

如果你有一个动画小部件，当然，它的区域会改变颜色。

但如果不相关的区域或你的整个应用程序也在改变颜色，那么你的Flutter应用程序中俄的小油漆工，可能正在重新粉刷整个空间。

想要解决此问题，请使用该动画小部件并将其包裹在RepaintBoundary中,RepaintBoundary的工作原理是将自小部件分离到自己的层中。

这样就不会不小心把油漆溅到相邻的小部件上，现在，请在此运行你的应用程序。

RepaintBoundary(
    child: MyAnimatingWidget(),
)

你会注意到即使动画小部件继续进行动画，它的邻居也不会不断地重新进行绘制。

但请记住，你最好在将所有内容包裹到RepaintBoundary之前检查这些不必要的重绘。因为RepaintBounary确实消耗一点儿CPU和内存。

如果想了解有关RepaintBoundary的内容，或者关于Flutter的其他功能，请访问pu b.dev

原文翻译自视频：视频地址