Flutter：如何调试在状态更改时重新渲染的小部件答案

【问题标题】：Flutter : How to Debug which widgets re-rendered on state changeFlutter：如何调试在状态更改时重新渲染的小部件
【发布时间】：2018-05-14 07:18:13
【问题描述】：

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

【问题讨论】：

标签： android debugging redux dart flutter

【解决方案1】：

在颤振中，每当 one 小部件更新时；整个小部件树重绘。所以……不。

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

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

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

使用flutter run时按t
使用带有ctrl/cmd + shift + p 和enable repaint rainbow 的vscode Dart Code 扩展

【讨论】：

【解决方案2】：

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

如何检查重建

在您感兴趣的任何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。在您的应用运行时，单击“重绘彩虹”按钮。

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

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 工具中的时间线和性能，看看你是否需要它。详情请查看下方链接视频。

另见：

【讨论】：

【解决方案3】：

调试应用程序以查看重新呈现哪些小部件的最佳方法是在代码中插入断点。我建议在 Widget build(BuildContext context) 方法中放置一个断点。

或者，您也可以使用打印语句来确保正在调用构建方法。

【讨论】：