时间戳

首页 > 解决方案 > Flutter modal 底片性能问题

performance - Flutter modal 底片性能问题

问题描述

拖动模态底部工作表时，如果工作表内有很多小部件，则颤动应用程序开始滞后。这仅发生在模态底部表 (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"),
          );
        },
      ),
    );
  }
}

标签： performanceflutterbottom-sheet

解决方案

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

推荐阅读