Flutter——最详细(CustomScrollView)使用教程

CustomScrollView简介

创建一个 [ScrollView]，该视图使用薄片创建自定义滚动效果。 [SliverList]，这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]，这是一种更高效的薄片，它显示沿滚动轴具有相同范围的子级的线性列表。 [SliverGrid]，这是一个显示子项 2D 数组的薄片。 [SliverPadding]，这是一个在另一个薄片周围添加空白空间的薄片。 [SliverAppBar]，这是一个显示标题的条形，该标题可以在滚动视图滚动时展开和浮动。[ScrollNotification] 和 [NotificationListener]，可用于在不使用 [ScrollController] 的情况下监视滚动位置。[索引语义] ，它允许使用滚动公告的索引来批注子列表。

使用场景：

当列表高度超出屏幕，则需要使用该组件，进而实现布局上下滑动。 我们需要注意的是 slivers 这个数组必须使用带Sliver开头的组件。

属性作用scrollDirection滑动方向reverse数据列表反向显示controller滑动列表参数配置primary自行查看physics滑动到底部之后的滑动动画scrollBehavior自行查看shrinkWrap确定滚动视图的高度cacheExtent设置缓存范围semanticChildCount设置子视图的个数keyboardDismissBehavior键盘关闭模式clipBehavior布局裁剪模式slivers它是数组格式，填充Widget

SliverPadding组件：相当于一个Padding组件，设置内边距；

SliverPadding( padding: EdgeInsets.all(20.w), sliver: SliverToBoxAdapter( child: Container( color: Colors.black54, child: Text("SliverToBoxAdapter"), ), ), )

绿色外部红色内部则是设置的padding间距

SliverToBoxAdapter组件：相当于一个Container布局容器；

SliverToBoxAdapter( child: Container( color: Colors.black54, child: Text("SliverToBoxAdapter"), ), )

SliverGrid组件：相当于一个GridView网格布局容器； 分为：SliverGrid.extent()、SliverGrid.count()、 SliverGrid.builder()、这几个属性可以自行去源码查看

SliverGrid.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, childAspectRatio: 1, ), itemCount: data.length, itemBuilder: (BuildContext context, int index) { var item = data[index]; return Card( elevation: 1, clipBehavior: Clip.hardEdge, child: Text( item.toString(), style: TextStyle( color: Colors.blueAccent, fontSize: 26, ), ), ); }, )

绿色部分是 SliverGrid组件实现

SliverList组件：相当于一个ListView网格布局容器； 分为：SliverList.separated()、SliverList.list()、 SliverList.builder()、这几个属性可以自行去源码查看

SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('SliverList Item $index'), ); }, childCount: 10, // 列表项的个数 ), ),

SliverFixedExtentList组件：相当于一个ListView网格布局容器；多了一个itemExtent固定item高度属性。可以提高滑动效率。 分为：SliverFixedExtentList.list()、 SliverFixedExtentList.builder()、这几个属性可以自行去源码查看

SliverFixedExtentList( itemExtent: 50, // 列表项的高度 delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('FixedExtent Item $index'), ); }, childCount: 10, // 列表项的个数 ), ),

SliverAppBar组件：相当于一个AppBar容器；

title：指定应用栏的标题部分。 floating：当向上滚动时，设置为true会将应用栏固定在屏幕顶部。默认值为false。pinned：设置为true时，应用栏始终可见，无论向上滚动多少。默认值为false。expandedHeight：设置应用栏展开的高度。flexibleSpace：可以将FlexibleSpaceBar作为应用栏的子项，以添加背景图像、渐变效果等。

SliverAppBar、SliverPersistentHeader、SliverFixedExtentList三个组件同时使用；

SliverPersistentHeader( delegate: MyPersistentHeaderDelegate(), // 委托对象，控制头部视图的行为和外观 pinned: true, // 是否始终显示头部视图，无论向上滚动多少 ), SliverFixedExtentList( itemExtent: 50, // 列表项的高度 delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('FixedExtent Item $index'), ); }, childCount: 20, // 列表项的个数 ), ),

SliverAppBar( title: Text( 'My App', style: TextStyle(color: Colors.red), ), floating: true, // 当向上滚动时，是否将应用栏固定在屏幕顶部 pinned: true, // 是否始终显示应用栏，无论向上滚动多少 expandedHeight: 100, // 展开的高度 flexibleSpace: FlexibleSpaceBar( background: Image.asset('assets/googleplay.png', fit: BoxFit.cover), ), ), SliverPersistentHeader( delegate: MyPersistentHeaderDelegate(), // 委托对象，控制头部视图的行为和外观 pinned: true, // 是否始终显示头部视图，无论向上滚动多少 ), SliverFixedExtentList( itemExtent: 50, // 列表项的高度 delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('FixedExtent Item $index'), ); }, childCount: 20, // 列表项的个数 ), ),

SliverOpacity 对应组件：Opacity SliverAnimatedOpacity 对应组件： AnimatedOpacity SliverFadeTransition 对应组件：FadeTransition SliverIgnorePointer 对应组件：IgnorePointer SliverLayoutBuilder 对应组件：LayoutBuilder SliverOffstage 对应组件：Offstage SliverPadding 对应组件：Padding SliverReorderableList 对应组件：ReorderableList SliverSafeArea 对应组件：SafeArea SliverVisibility 对应组件：Visibility 这些具体使用请看源码自行了解；