Question

我正在使用Redux和Flutter进行状态管理。每当我发送一个动作时，我想知道哪些小部件被重新渲染。有没有办法做到这一点？

Answer 1

在flutter中，只要一个小部件更新;整个小部件树重新绘制。所以......不。

但你也可以介绍＆＃34;重绘边界＆＃34;通过在树中插入RepaintBoundary小部件来手动完成。这明确告诉flutter为它的孩子创建一个新的绘画层（这意味着内存缓存）。因此，每当该孩子更新时，它也不会重新粉刷它的父母。

当重绘绘制重绘边界时，您可以执行的操作是调试。

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

使用t

flutter run

使用带有Dart Code和ctrl/cmd + shift + p

enable repaint rainbow

Answer 2

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

如何检查重建

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

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

另见：

Answer 3

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

或者您也可以使用print语句来确保调用构建方法。

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

3 个答案:

如何检查重建

如何检查重绘