Flutter CustomScrollView和SingleChildScrollView的区别。

1,073 阅读1分钟

Flutter有很多ScrollView Widget。但是在最基础的实现上是CustomScrollView和SingleChildScrollView。那两者有何区别呢?

当需要构建比较长的页面时,如果直接使用SingleChildScrollView,会将整个页面的内容一次性渲染到内存中,这可能会导致内存用过高,影响应用的性能和体验。特别是还有不定高度的ListViewGridView

虽然我们可以将ListView如下设置来固定高度

 ListView.builder(
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
      return _buildItemWidget(index);
    },
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
  )

但会将ListView的所有内容都加载到内存里,当list的数量很多时,就会卡顿、掉帧。

相比之下,使用CustomScrollView可以将页面划分为多个Sliver,每个Sliver只在需要显示时才会被渲染到内存中。这种方式可以大大减少内存的占用,并且可以更好地处理滚动事件。例如,在滚动时,CustomScrollView可以只渲染当前可见区域内的Sliver,而不是整个页面的内容。

此外,CustomScrollView还提供了一些方便的特性,如SliverAppBarSliverPersistentHeader等,可以方便地实现吸顶效果、折叠效果等,使页面的展示更加灵活和美观。

因此,在需要构建特别长的页面时,使用CustomScrollView会比直接使用SingleChildScrollView更加优秀。但是需要注意,CustomScrollView的使用也需要谨慎,特别是在需要频繁切换页面或者有大量动态数据的情况下,需要注意内存的使用和管理。

ListViewGridView是对CustomScrollViewSliverList进行的不同封装。