Flutter ListView控件

ListView是flutter中线性排列的可滚动的列表部件。ListView 是最常用的滚动小部件。它在滚动方向上一个接一个地显示其子项。在交叉轴上，子项需要填满 ListView。

如果非空，则 itemExtent 会强制子项在滚动方向上具有给定的范围。

如果非空，则prototypeItem 会强制子项在滚动方向上具有与给定小部件相同的范围。指定 itemExtent 或prototypeItem 比让子项确定自己的范围更有效，因为滚动机制可以利用对子项范围的预知来节省工作，例如当滚动位置发生剧烈变化时。您不能同时指定 itemExtent 和prototypeItem，只能指定其中一个或不指定其中任何一个。

构建 ListView 有四种选项

1.默认构造函数采用显式 List<Widget> 子项

此构造函数适用于子项数量较少的列表视图，因为构造 List 需要为列表视图中可能显示的每个子项（而不仅仅是实际可见的子项）执行工作。默认 List 方式，是把数据添加到列表中,然后直接添加到 ListView。 Tips: 如果需要设置分割线，使用ListTile.divideTiles。

 child: ListView(padding: const EdgeInsets.all(8),children: <Widget>[Container(height: 50,color: Colors.amber[600],child: const Center(child: Text("Entry A")),),Container(height: 50,color: Colors.amber[500],child: const Center(child: Text("Entry B")),),Container(height: 50,color: Colors.amber[100],child: const Center(child: Text("Entry C")),)],)

2.ListView.builder 构造函数采用 IndexedWidgetBuilder，它根据需要构建子项

此构造函数适用于子项数量较多（或无限）的列表视图，因为仅对实际可见的子项调用构建器。

 child: ListView.builder(controller: _scrollController,itemBuilder: (context, index) {return Card(child: Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item $index"),),);},itemCount: 200,),

如果要添加分割线可以通过一个Column包裹Container和一个Divider。

    child: ListView.builder(controller: _scrollController,itemBuilder: (context, index) {return Card(child:Column(children: [Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item $index"),),new Divider()],),);},

3.ListView.separated 构造函数采用两个 IndexedWidgetBuilder：itemBuilder 根据需要构建子项，separatorBuilder 类似地构建出现在子项之间的分隔符子项

此构造函数适用于子项数量固定的列表视图。通过 separatorBuilder 直接添加分割线。

  final List<String> entries = <String>['C', 'Y', 'Z', 'Y'];final List<int> colorCodes = <int>[600, 500, 300, 100];child: ListView.separated(itemBuilder: (BuildContext context, int index) {return Container(height: 50,color: Colors.amber[colorCodes[index]],child: Center(child: Text('Entry ${entries[index]}')),);},separatorBuilder: (context, index) {return const Divider();},itemCount: entries.length),

4.ListView.custom 构造函数采用 SliverChildDelegate，它提供了自定义子模型其他方面的功能。

例如，SliverChildDelegate 可以控制用于估计实际不可见的子项大小的算法。

List<String> entries = <String>['C', 'Y', 'Z', 'Y'];class KeepAliveItem extends StatelessWidget {const KeepAliveItem({required Key super.key,required this.data,});final String data;@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,child: Text(data),);}
}child: ListView.custom(childrenDelegate: SliverChildBuilderDelegate((BuildContext context, int index) {return KeepAliveItem(data: entries[index],key: ValueKey<String>(entries[index]),);},childCount: entries.length,))

ScrollController

要控制滚动视图的初始滚动偏移，请提供一个已设置其 ScrollController.initialScrollOffset 属性的控制器(ScrollController)。

ScrollController：可用于控制此滚动视图滚动到的位置的对象。

ScrollController.initialScrollOffset：控制初始滚动位置。

  final ScrollController _scrollController = ScrollController(initialScrollOffset: 120);child: ListView.builder(controller: _scrollController,itemBuilder: (context, index) {return Card(child: Column(children: [Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item $index"),),new Divider()],),// child: Container(//   height: 60,//   alignment: Alignment.centerLeft,//   child: Text("Item $index"),// ),);},itemCount: 200,)

效果如下，打开时会有120的偏移：(Item0上移了)

ScrollController.keepScrollOffset：用于控制滚动视图是否应自动保存和恢复其在 PageStorage 中的滚动位置。每次滚动完成时，使用 PageStorage 保存当前滚动偏移量，如果重新创建此控制器的可滚动项，则恢复它。

ScrollController.offset:用于读取当前滚动位置或更改它。（可以动态获取偏移量）

  final ScrollController _scrollController = ScrollController();_scrollController.addListener(() {setState(() {offset = _scrollController.offset;isEnd = _scrollController.position.pixels ==_scrollController.position.maxScrollExtent;});});child: ListView.builder(controller: _scrollController,itemBuilder: (context, index) {return Card(child: Column(children: [Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item $index"),),new Divider()],),// child: Container(//   height: 60,//   alignment: Alignment.centerLeft,//   child: Text("Item $index"),// ),);},itemCount: 200,)

如下图所示：position：114 表示上滑过程中计算出来的偏移量。

子元素的生命周期

Creation

在布局列表时，可见子元素、状态和渲染对象将基于现有小部件（例如使用默认构造函数时）或延迟提供的小部件（例如使用 ListView.builder 构造函数时）延迟创建。

Destruction

当子元素滚动出视图时，关联的元素子树、状态和渲染对象将被销毁。当滚动回时，列表中相同位置的新子元素将与新元素、状态和渲染对象一起延迟重新创建。

Destruction mitigation

为了在子元素滚动进出视图时保留状态，可以使用以下选项：

要将UI 状态与业务逻辑的分离。在子窗口小部件子树中使用 StatefulWidgets 仅存储即时 UI 状态。

ListView属性含义

itemExtent: 指定Item在滑动方向上列表项的高度，用来提高滑动性能。告诉ListView在构建列表时使用固定大小的缓冲区。如果item的高度固定，将itemExtent设置固定值，有利于Flutter更有效的管理列表的布局，并且在滚动时可以提高性能。
padding: 用来设置子控件与父控件的间距。
cacheExtent：可见区域的前后会有一定高度的空间去缓存子控件，当滑动时就可以迅速呈现。ListView可以通过设置cacheExtent来设置预先加载的内容大小。通过预先加载可以提升view渲染的速度。但是这个值需要合理设置，并非越大越好。因为预加载缓存越大，对页面整体内存的压力就越大。
shrinkWrap: scroll view在滑动方向上的高度是否由内容高度决定，false：则高度为滑动方向上的最大允许高度；如果在滑动方向上没有设置约束，则这个字段必须设置为true，否则会报错。注意：shrinkWrap:true会将列表所有的item都构建完成，尽管他们还远没有展示出来，所以shrinkWrap让ListView失去了懒加载的作用，导致内存性能问题。
addAutomaticKeepAlives：是否将子控件包裹在AutomaticKeepAlive控件内。addAutomaticKeepAlives为true表示将item包裹在AutomaticKeepAlive组件中，当item滑出屏幕时不会被GC(垃圾回收)，会使用KeepAliveNotification来保存其状态，从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法，会造成一定程度的内存开销。
addRepaintBoundaries：true：是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘，当列表滚动时，包裹在RepaintBoundary中的item可以避免重绘，当item重绘的开销特别小时(比如一个颜色块，一个较短的文本)，不添加RepaintBoundary反而更高效即（把这个字段设置为false性能会更好）。
```
scrollDirection:滚动方向
```

enum Axis {/// Left and right.////// See also://////  * [TextDirection], which disambiguates between left-to-right horizontal///    content and right-to-left horizontal content.horizontal,/// Up and down.vertical,
}

scrollController：对滚动位置的控制。
reverse：决定滚动方向。
primary：内容不足以滚动时，是否支持滚动。
ScrollPhysics：控制用户滚动视图的交互。

参考：https://api.flutter.dev/flutter/widgets/ListView-class.html?_gl=1*1kk33gn*_ga*NjkxNDYxMjU2LjE3MTMyMzA4MTE.*_ga_04YGWK0175*MTcyNDMzMDgzMi4xNi4xLjE3MjQzMzA5MTcuMC4wLjA.