flutter :CustomScrollView+SliverGrid+SliverList

在实际业务场景中经常见到这样的布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动的时候作为一个整体,这时候就需要使用CustomScrollView+SliverGrid+SliverList来实现。

  1. CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。使用场景:(1)ListView和GridView相互嵌套场景(2)一个页面顶部appBar,然后是GridView,最后是ListView,这 3个区域以整体来滚动,AppBar具有吸顶效果。
  2. Sliver系列组件:
SLiver名称 功能 对应的可滚动组件
SliverList 列表 ListView
SliverFixedExtentList 高度固定的列表 ListView,指定itemExtent时
SliverAnimatedList 添加/删除列表项可以执行动画 AnimatedList
SliverGrid 网格 GridView
SliverPrototypeExtentList 根据原型生成高度固定的列表 ListView,指定prototypeItem 时
SliverFillViewport 包含多个子组件,每个都可以填满屏幕 PageView

除了和列表对应的 Sliver 之外还有一些用于对 Sliver 进行布局、装饰的组件,它们的子组件必须是 Sliver,我们列举几个常用的:

Sliver名称 对应 RenderBox
SliverPadding Padding
SliverVisibility、SliverOpacity Visibility、Opacity
SliverFadeTransition FadeTransition
SliverLayoutBuilder LayoutBuilder

还有一些其它常用的 Sliver:

Sliver名称 说明
SliverAppBar 对应 AppBar,主要是为了在 CustomScrollView 中使用。
SliverToBoxAdapter 一个适配器,可以将 RenderBox 适配为 Sliver,后面介绍。
SliverPersistentHeade 滑动到顶部时可以固定住

SliverAppBar:

  • expandedHeight:展开时AppBar的高度。
  • flexibleSpace:空间大小可变的组件。
  • floating:向上滚动时,AppBar会跟随滑出屏幕;向下滚动时,会有限显示AppBar,只有AppBar展开时才会滚动ListView。
  • pinned:当SliverAppBar内容滑出屏幕时,将始终渲染一个固定在顶部的收起状态AppBar。
  • snap:当手指离开屏幕时,AppBar会保持跟手指滑动方向一致的状态,即手指上滑则AppBar收齐,手指下滑则AppBar展开。
  • stretch:是否拉伸
  • 只有floating设置为true时,snap才可以设置为true。

参考文章

如果在CustomScrollView中用到了其他非Sliver系列的组件,需要使用SliverToBoxAdapter将这些组件包裹起来。

你可能感兴趣的:(Flutter知识点,flutter)