Flutter：如何调试哪些小部件在状态更改时重新渲染

Question

我使用 Redux 和 Flutter 进行状态管理。每当我调度一个动作时，我想知道哪些小部件被重新渲染。有什么办法可以做到吗？

Answer 1

关于渲染首先要注意的一件事是：重建和重新绘制是不一样的。重建涉及布局和绘画，而重新绘画不涉及重新布局。

如何检查是否重建

在您感兴趣的print任何方法中添加声明。build

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');                 <-- this
    return MaterialApp(...

和这个：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');                 <-- this
    return MaterialApp(...

如果您注意到小部件树中不必要的部分被重建，那么解决方案是提取树中正在更改为自己的小部件的部分，最好是const小部件。

如何检查是否重新喷漆

要查看重新绘制的内容，您可以使用Dart DevTools。当您的应用程序运行时，单击“重新绘制彩虹”按钮。

或者，您可以在代码中使用以下标志：

class MyWidget extends StatelessWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('MyWidget building');  //         <-- here 
    return ProgressBar(...

正在重新绘制的区域有一个彩虹边框，每次重新绘制时都会改变颜色。正如您在下面的动画中看到的，整个窗口每次都会被重新绘制。（中心的蓝线是小部件的一部分，而不是重绘彩虹。）

如果您想限制绘制的内容，可以将 RepaintBoundary 小部件添加到树中，如下所示：

void main() {
  debugRepaintRainbowEnabled = true;  //   <-- set this flag to true
  runApp(MyApp());
} 

现在，当您使用 DevTools 并选择 Repaint Rainbow 按钮时，您将看到只有 ProgressBar 小部件被重新绘制。

如果重新喷漆并不昂贵，那么这可能不是您需要担心的事情。至少在我见过的大多数文档中，人们都说要最小化重建，但几乎没有人建议添加重绘边界。我会检查 DartDev 工具中的时间表和性能，看看您是否需要它。查看下面的链接视频了解详细信息。

也可以看看：

• 重绘边界文档
• 使用 RepaintBoundary 提高 Flutter 应用程序的性能

Answer 2

在 flutter 中，每当一个小部件更新时；整个小部件树重新绘制。所以不行。

但是您也可以通过在树中插入一个RepaintBoundary小部件来手动引入“重新绘制边界”。这明确告诉 flutter 为其子级创建一个新的绘画层（这意味着内存缓存）。这样，每当该子级更新时，它也不会重新绘制其父级。

您可以做的是在重新绘制 RepaintBoundary 时进行调试。

为此，您可以通过以下方式启用重绘彩虹：

• t使用时按下flutter run
• 使用带有and的 vscodeDart Code扩展ctrl/cmd + shift + penable repaint rainbow