--- highlight: androidstudio --- 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，[点击查看活动详情](https://juejin.cn/post/7123120819437322247 "https://juejin.cn/post/7123120819437322247") ## 前言

ListView.build 组件创建的列表是基于Sliver的懒加载创建的，会根据页面需要的数据进行加载和预加载数据，能够有效提升项目性能。但在一些特殊的情况下 ListView.build 组件会失去懒加载的功能，导致页面性能丢失的问题。

## ListView.build 简介

listView.builder 组件具备可滚动和无限高度特性，仅对那些实际可见的子级调用构建器，适用于具有大量（或无限）子级的列表视图。

> 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. ```Dart ListView.builder( itemCount: 100, itemBuilder: (context, index) { print(index); return Container( height: 200, color: Colors.orange[index % 5 * 100], child: Center(child: Text('$index')), ); }, ), ``` ```Dart /// 控制台输出结果，只输出页面加载可见的数据和预加载部分数据 flutter: init called screen_utils flutter: 0 flutter: 1 flutter: 2 flutter: 3 flutter: 4 flutter: 5 Reloaded 0 libraries in 368ms. ``` ## 懒加载失效

在实际的项目开发过程中， listView.builder 组件往往不会单独出现，它会存在在多种嵌套或有大量数据交互的界面里。根据实际需求的不同， listView.builder 可能需要嵌套在其他滚动组件内部（如ListView，SingleChildScrollView等），这样会导致页面出现报错的情况：" Dart Unhandled Exception: Vertical viewport was given unbounded height. "，因为 listView.builder 组件具有无限高度的特性，不可以被套用在另一个无限高度的组件内。为确保页面正常显示，需要修改 listView.builder 两个属性值:

```Dart shrinkWrap: true, ///在滑动方向上的高度是否由内容高度决定 physics: const NeverScrollableScrollPhysics(), ///控制用户滚动视图的交互 ```

存在问题：重新运行项目后页面能够正常加载数据，但是通过控制台打印数据能够发现，由于修改了shrinkWrap和 physics这两个属性，在滑动页面内数据会一次性加载完成，ListView.builder会失去懒加载的功能；如果页面存在大量数据交互的话，这将会造成性能的严重损耗。

```Dart ListView( children: [ const FlutterLogo(size: 100), /// 页面可能存在其他组件 ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), itemCount: 100, itemBuilder: (context, index) { print(index); return Container( height: 200, color: Colors.orange[index % 5 * 100], child: Center(child: Text('$index')), ); }, ), ], ), ``` ```Dart /// 控制台输出结果，数据一次性加载完成 flutter: init called screen_utils flutter: 0 flutter: 1 flutter: 2 flutter: 3 flutter: 4 ······ flutter: 96 flutter: 97 flutter: 98 flutter: 99 Reloaded 1 of 2339 libraries in 704ms. ``` ## 优化方案

在套用多层滚动组件的页面，可以使用Sliver系列组件代替普通组件进行布局。 SliverList 嵌套在 CustomScrollView 组件内可以实现懒加载功能，对页面加载性能进行优化。

```Dart /// [CustomScrollView] 允许直接提供 [slivers] 以创建各种滚动效果 CustomScrollView( slivers: [ /// [SliverToBoxAdapter] 是一个基本的 sliver，通过它可以在 [slivers] 组件内书写普通组件。 const SliverToBoxAdapter(child: FlutterLogo(size: 100)), SliverList( delegate: SliverChildBuilderDelegate( (context, index) { print(index); return Container( height: 200, color: Colors.orange[index % 5 * 100], child: Center(child: Text('$index')), ); }, childCount: 100, ), ), ], ) ``` ```Dart /// 控制台输出结果，恢复懒加载，只输出页面加载可见的数据和预加载部分数据 flutter: init called screen_utils flutter: 0 flutter: 1 flutter: 2 flutter: 3 flutter: 4 Reloaded 0 libraries in 200ms. ``` ## 小结

ListView.build 组件大部分情况下都能够实现我们的需求，但是在部分情况下容易失去懒加载功能，我们可以使用 SliverList 组件代替 ListView.build 进行布局。在Sliver大家族中，除 SliverList 以外，还有着许许多多强大的功能组件，可以实现许多复杂的滑动嵌套布局，有待进一步学习。