android - flutter : How to Debug which widgets re-rendered on state change

Question

我正在使用 Redux 和 Flutter 进行状态管理。每当我发送一个 Action 时，我想知道哪些小部件被重新渲染了。有什么办法吗？

Answer 1

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

如何检查重建

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

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

还有这个:

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

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

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

如何检查重绘

要查看正在重绘的内容，您可以使用 Dart DevTools .当您的应用程序正在运行时，单击 Repaint Rainbow 按钮。

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

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

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

如果你想限制绘制的内容，你可以像这样在你的树中添加一个 RepaintBoundary 小部件:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: RepaintBoundary(  //   <-- repaint boundary
              child: ProgressBar(
                barColor: Colors.blue,
                thumbColor: Colors.red,
                thumbSize: 20.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

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

另见:

• RepaintBoundary docs
• Improve your Flutter Apps performance with a RepaintBoundary