相逢意气为君饮,系马高楼垂柳边。这篇文章主要讲述flutter 中的列表的性能优化前奏#yyds干货盘点#相关的知识,希望能为你提供帮助。
【flutter 中的列表的性能优化前奏#yyds干货盘点#】这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号“坚果前端,”,或者加我好友,获取更多精彩内容
嵌套列表 - ShrinkWrap 与 Slivers使用 ShrinkWrap 的列表列表下面是一些使用??ListView?
?对象呈现列表列表的代码,内部列表的??shrinkWrap?
?值设置为 true。??shrinkWrap?
?强行评估整个内部列表,允许它请求有限的高度,而不是通常的??ListView?
?对象高度,即无穷大!
下面是基本的代码结构:
ListView(
// Setting `shrinkWrap` to `true` here is both unnecessary and expensive.
children: < Widget> [
ListView.builder(
itemCount: list1Children.length,
itemBuilder: (BuildContext context, int index) {
return list1Children[index];
},
// This forces the `ListView` to build all of its children up front,
// negating much of the benefit of using `ListView.builder`.
shrinkWrap: true,
),
ListView.builder(
itemCount: list2Children.length,
itemBuilder: (BuildContext context, int index) {
return list2Children[index];
},
// This forces the `ListView` to build all of its children up front,
// negating much of the benefit of using `ListView.builder`.
shrinkWrap: true,
),
...
],
)
注意:观察外部??ListView?
?没有将其??shrinkWrap?
? 值设置为??true?
?。只有内部列表需要设置??shrinkWrap?
?。
另请注意:虽然??ListView.builder?
?(默认情况下)有效地构建其子项,为您节省构建屏幕外小部件的不必要成本,但设置 ??shrinkWrap?
?为??true?
?覆盖此默认行为!
import package:flutter/material.dart;
import dart:math as math;
void main() {
runApp(ShrinkWrApp());
}
class ShrinkWrApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ShrinkWrap vs Slivers,
home: Scaffold(
appBar: AppBar(
title: const Text("ShrinkWrap, Street Rat, I dont, Buy that!"),
),
body: const ShrinkWrapSlivers(),
),
);
}
}
class ShrinkWrapSlivers extends StatefulWidget {
const ShrinkWrapSlivers({
Key? key,
}) : super(key: key);
@override
_ShrinkWrapSliversState createState() => _ShrinkWrapSliversState();
}
class _ShrinkWrapSliversState extends State< ShrinkWrapSlivers> {
List< ListView> innerLists = [];
final numLists = 15;
final numberOfItemsPerList = 100;
@override
void initState() {
super.initState();
for (int i = 0; i < numLists; i++) {
final _innerList = < ColorRow> [];
for (int j = 0; j < numberOfItemsPerList; j++) {
_innerList.add(const ColorRow());
}
innerLists.add(
ListView.builder(
itemCount: numberOfItemsPerList,
itemBuilder: (BuildContext context, int index) => _innerList[index],
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
),
);
}
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: numLists,
itemBuilder: (context, index) => innerLists[index]);
}
}
@immutable
class ColorRow extends StatefulWidget {
const ColorRow({Key? key}) : super(key: key);
@override
State createState() => ColorRowState();
}
class ColorRowState extends State< ColorRow> {
Color? color;
@override
void initState() {
super.initState();
color = randomColor();
}
@override
Widget build(BuildContext context) {
print(Building ColorRowState);
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
randomColor(),
randomColor(),
],
),
),
child: Row(
children: < Widget> [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(height: 50, width: 50, color: Colors.white),
),
Flexible(
child: Column(
children: const < Widget> [
Padding(
padding: EdgeInsets.all(8),
child: Text(这里是 坚果前端小课堂!,
style: TextStyle(color: Colors.white)),
),
],
),
),
],
),
);
}
}
Color randomColor() =>
Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
一切都建立起来!当您滚动浏览此 UI 并注意该?
?ColorBarState.build?
?方法的调用方式时,会出现可怕的部分 。每个内部列表包含 100 个元素,因此当 UI 加载时,您会立即看到 100 个“Building ColorBarState”的实例打印到控制台,更糟糕的是,一旦向下滚动大约一百行,就会再生成一百行。
推荐阅读
- 一个普通的开发日常-记一次缓存问题在实际开发中的解决方案
- #聊一聊WuKong编辑器#7 赞 6 建议 5 改进
- 02~文件通配符用户及用户组
- linux之拖拽上传文件
- #yyds干货盘点# Golang Gin 框架上传介绍
- oeasy教您玩转vim - 67 - # 批量替换
- 谈ansible配置host_key_checking = False
- 在WordPress中添加style.css,正确的方法
- 在wp_nav_menu的第一个孩子之前添加img