Preface
ListView is the most common component in an application, and lists often carry many elements. When there are many elements, especially when the image files are large, it may cause list lag, and in severe cases, it may cause application crash. This article introduces how to optimize the list.
Optimization point 1: Use builder to build the list
When your list elements are growing dynamically (such as pulling up to load more), please do not use them directlychildrenThe way, keep goingchildrenAdding components to an array will be bad.
//Bad usageListView( children: [ item1, item2, item3, ... ], ) //Correct usage( itemBuilder: (context, index) => ListItem(), itemCount: itemCount, )
For the on-demand build list elements, that is, only those visible elements will call itemBuilder to build elements, so the performance overhead will naturally be much smaller for large lists.
Creates a scrollable, linear array of widgets that are created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
Optimization Point 2: Disable the addAutomaticKeepAlives and addRepaintBoundaries features
Both attributes are designed to optimize the user experience during the scrolling process.addAutomaticKeepAlivesThe default feature istrue, meaning that the element can be maintained after the list element is invisible, so that it can be quickly built when it appears on the screen again. This is actually a way to exchange space for time, which will cause a certain degree of memory overhead. Can be set asfalseTurn off this feature. The disadvantage is that a brief white screen may appear when sliding too fast (it will rarely happen).
addRepaintBoundariesIt is to wrap the list elements with a Repaint Boundary, so that redrawing can be avoided when scrolling. If the list is easy to draw (the layout of the list element is relatively simple), you can turn off this feature to improve the smoothness of the scrolling.
addAutomaticKeepAlives: false, addRepaintBoundaries: false,
Optimization point 3: Use const to modify the unchanged components in the list element as much as possible.
useconstIt is equivalent to cache elements to achieve common use. If some parts of the list element remain unchanged, then you can useconstModification.
return Padding(
child: Row(
children: [
const ListImage(),
const SizedBox(
width: 5.0,
),
Text('The $index element'),
],
),
padding: (10.0),
);
Optimization point 4: Use itemExtent to determine the size of the scrolling direction of the list element
For many lists, we can know the size in the scrolling direction in advance based on the UI design draft. If we can know it, then useitemExtentAttribute setting the size of the list element in the scrolling direction can improve performance. This is because, if not specified, during the scrolling process, it will be necessary to calculate the size of each element in the scrolling direction to consume computing resources.
itemExtent: 120,
Optimization example
Below is a list of unmodified at the beginning, well, it can be consideredGarbage code。
class LargeListView extends StatefulWidget {
const LargeListView({Key? key}) : super(key: key);
@override
_LargeListViewState createState() => _LargeListViewState();
}
class _LargeListViewState extends State<LargeListView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Big List'),
brightness: ,
),
body: ListView(
children: (
1000,
(index) => Padding(
padding: (10.0),
child: Row(
children: [
(
'/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~',
width: 200,
),
const SizedBox(
width: 5.0,
),
Text('The $index element'),
],
),
),
),
),
);
}
}
Of course, it won't actually be used To generate a list element, but don't use oneList<Widget>The list object always adds a list element to it, and then uses this list asListViewofchildren! The modified code is shown below, because the list elements are split more finely, the code volume is more, but the performance will be much better.
import 'package:flutter/';
class LargeListView extends StatefulWidget {
const LargeListView({Key? key}) : super(key: key);
@override
_LargeListViewState createState() => _LargeListViewState();
}
class _LargeListViewState extends State<LargeListView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Big List'),
brightness: ,
),
body: (
itemBuilder: (context, index) => ListItem(
index: index,
),
itemCount: 1000,
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
itemExtent: 120.0,
),
);
}
}
class ListItem extends StatelessWidget {
final int index;
ListItem({Key? key, required }) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
child: Row(
children: [
const ListImage(),
const SizedBox(
width: 5.0,
),
Text('The $index element'),
],
),
padding: (10.0),
);
}
}
class ListImage extends StatelessWidget {
const ListImage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return (
'/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~',
width: 200,
);
}
}Summarize
This article introduces FlutterListView4 optimization points, very practical! In fact, you can find the corresponding explanations from the official website’s documents. Therefore, if you encounter performance problems, in addition to search engines, it is also recommended to read more official documents. Another thing is that for list pictures, sometimes front-end cooperation is required. For example, the current mobile phones are all 100 million pixels. If the original picture is uploaded directly when uploading, then loading such a large picture will definitely consume a lot of resources. For this case, it is recommended to generate a list thumbnail (which may require different thumbnails to be generated for different screen sizes).
The above is a detailed explanation of the Android ListView list optimization method. For more information about Android ListView list optimization, please pay attention to my other related articles!