Flutter 模态底部 sheet 性能问题
Flutter modal bottom sheet performance issue
拖动模态底部 sheets 时,如果 sheet 中有很多小部件,则 flutter 应用程序开始滞后。这只发生在模态底部 sheet (showModalBottomSheet) 而不是正常底部 (showBottomSheet)。
下面我附上了性能分析的屏幕截图,显示 sheet 中的所有小部件在用户拖动时不断重建。
我写了一个小演示来比较两种类型 sheet 的性能。有没有办法防止拖动时重建?
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"),
);
},
),
);
}
}
我创建了 this PR 来解决这个性能问题。问题是 ModalBottomSheet
中的 AnimatedContainer
没有使用 child
属性,因此当动画是 运行 而不是使用已经构建的子部件。
只需将 flutter 更新到最新版本即可。感谢 Enol Casielles Martinez
拖动模态底部 sheets 时,如果 sheet 中有很多小部件,则 flutter 应用程序开始滞后。这只发生在模态底部 sheet (showModalBottomSheet) 而不是正常底部 (showBottomSheet)。 下面我附上了性能分析的屏幕截图,显示 sheet 中的所有小部件在用户拖动时不断重建。
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"),
);
},
),
);
}
}
我创建了 this PR 来解决这个性能问题。问题是 ModalBottomSheet
中的 AnimatedContainer
没有使用 child
属性,因此当动画是 运行 而不是使用已经构建的子部件。
只需将 flutter 更新到最新版本即可。感谢 Enol Casielles Martinez