Flutter modal 底片性能问题答案

【问题标题】：Flutter modal bottom sheet performance issueFlutter modal 底片性能问题
【发布时间】：2020-06-08 11:36:28
【问题描述】：

当拖动模态底部工作表时，如果工作表内有很多小部件，则颤动应用程序开始滞后。这仅发生在模态底部表 (showModalBottomSheet) 上，而不发生在普通底部表 (showBottomSheet) 上。下面我附上了性能分析的屏幕截图，它显示，当用户拖动时，工作表内的所有小部件都在不断重建。

我写了一个小演示来比较两种类型的工作表的性能。有没有办法防止在拖动时重建？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "demo",
      home: Scaffold(
        body: MyButtons(),
      ),
    );
  }
}

class MyButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (context) => BottomSheet(),
              );
            },
            child: Text("show modal (laggy)"),
          ),
          RaisedButton(
            onPressed: () {
              showBottomSheet<void>(
                context: context,
                builder: (context) => BottomSheet(),
              );
            },
            child: Text("show normal (not laggy)"),
          ),
        ],
      ),
    );
  }
}

class BottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0,
      alignment: WrapAlignment.center,
      children: List<Widget>.generate(
        100,
        (int index) {
          return InputChip(
            label: Text("test"),
          );
        },
      ),
    );
  }
}

【问题讨论】：

您是使用配置文件还是调试模式来衡量性能？
@Darish 感谢您指出这一点，我没有使用配置文件模式。使用配置文件模式，性能提高，但问题仍然存在。通过将工作表内的项目加倍，模态和正常之间的性能差异再次清晰可见（模态表约为 25fps）。
@Krowit 你找到解决这个问题的方法了吗？我在模态底页中有一个复杂的小部件，它也有同样的性能问题。

标签： performance flutter bottom-sheet

【解决方案1】：

我创建了this PR 来解决这个性能问题。问题是来自ModalBottomSheet 的AnimatedContainer 没有使用child 属性，因此它在动画运行时强制调用builder 方法多次，而不是使用已经构建的子小部件。

【讨论】：

能否给个示例代码示例说明如何使用代码PR
抱歉耽搁了，PR 已于 5 月 16 日包含在 Flutter 的主存储库中。如果您使用的是更新版本的框架，则无需执行任何操作即可解决此问题

【解决方案2】：

只需将颤振更新到最新版本。向 Enol Casielles Martinez 致敬

【讨论】：