Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to optimize the Android ListView list". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to optimize the Android ListView list.

Optimization point 1: build lists using builder

When your list elements are growing dynamically (such as loading more from the pull-up), please don't use children directly, keep adding components to the children array, that would be bad.

/ / Bad usage ListView (children: [item1, item2, item3,...],) / / correct usage ListView.builder (itemBuilder: (context, index) = > ListItem (), itemCount: itemCount,)

For ListView.builder, you build list elements on demand, that is, only those visible elements call itemBuilder build elements, so the performance overhead for large lists is naturally much lower.

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 addAutomaticKeepAlives and addRepaintBoundaries features

Both properties are designed to optimize the user experience during scrolling. The addAutomaticKeepAlives feature defaults to true, which means that the list element can be kept in its state after it is invisible, so that it can be quickly built when it appears on the screen again. This is actually a way to trade space for time, which will result in a certain degree of memory overhead. It can be set to false to turn this feature off. The disadvantage is that a short white screen may appear when you slide too fast (it rarely happens in practice).

AddRepaintBoundaries wraps list elements with a redraw boundary (Repaint Boundary) so that redrawing can be avoided when scrolling. If the list is easy to draw (where the layout of the list elements is relatively simple), you can turn off this feature to improve the fluency of scrolling.

AddAutomaticKeepAlives: false,addRepaintBoundaries: false, optimization point 3: use const to decorate immutable components in list elements as much as possible

Using const is equivalent to caching elements for sharing, and if some parts of the list element remain the same, you can use const modification.

Return Padding (child: Row (children: [const ListImage (), const SizedBox (width: 5.0,5), Text ('$index element'),],), padding: EdgeInsets.all (10.0),); optimization point 4: use itemExtent to determine the scrolling direction of list elements

For many lists, our dimensions in the scrolling direction can be known in advance according to the UI design draft, and if we can know, then using the itemExtent attribute to set the size of the list elements in the scrolling direction can improve performance. This is because, if not specified, during scrolling, you need to calculate the size of each element in the scrolling direction, thus consuming computing resources.

ItemExtent: 120, optimize the instance

Here is a list of unmodified code at first, well, it can be considered junk code.

Class LargeListView extends StatefulWidget {const LargeListView ({Key? Key}): super (key: key); @ override _ LargeListViewState createState () = > _ LargeListViewState () } class _ LargeListViewState extends State {@ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text), brightness: Brightness.dark,), body: ListView (children: List.generate (1000, (index) = > Padding (padding: EdgeInsets.all) Child: Row (children: [Image.network ('https://cache.yisu.com/upload/information/20220517/112/2097.jpg', width: 200,), const SizedBox (width: 5.0,) Text ('$index element'),],),) }}

Of course, you don't actually use List.generate to generate list elements, but don't use a List list object to add list elements to it all the time, and then use the list as the children of ListView! The modified code is shown below, because splitting the list elements into smaller pieces will result in more code, but much better performance.

Import 'package:flutter/material.dart';class LargeListView extends StatefulWidget {const LargeListView ({Key? Key}): super (key: key); @ override _ LargeListViewState createState () = > _ LargeListViewState () } class _ LargeListViewState extends State {@ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('big list'), brightness: Brightness.dark,), body: ListView.builder (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 this.index}): super (key: key); @ override Widget build (BuildContext context) {return Padding (child: Row (children: [const ListImage (), const SizedBox (width: 5.0,), Text ('$index element'),],), padding: EdgeInsets.all }} class ListImage extends StatelessWidget {const ListImage ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return Image.network ('https://cache.yisu.com/upload/information/20220517/112/2097.jpg', width: 200,) }} Thank you for your reading, the above is the content of "how to optimize the Android ListView list". After the study of this article, I believe you have a deeper understanding of how to optimize the Android ListView list, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.