Flutter CustomScrollView 组件的使用详解

15 min read

Flutter 中的 CustomScrollView 组件是一个强大的滚动组件,允许您在同一个页面上嵌入多个滚动视图,同时支持不同样式的滚动视图。

CustomScrollView 组件概述

CustomScrollView 组件可以通过多个子组件来实现多个滚动视图的嵌套。CustomScrollView 组件的子组件可以是 Sliver 组件,Sliver 组件可以理解成是支持滑动和浮动的组件。

Flutter 中的 Sliver 组件包括 SliverAppBar、SliverList、SliverGrid、SliverFixedExtentList、SliverPadding 等。每个 Sliver 组件都被包含在 CustomScrollView 组件中的 Sliver 列表中。

在 CustomScrollView 中滚动视图的滚动样式由它的 Sliver 组件的样式确定。

CustomScrollView 组件常用属性

常用的属性如下:

  • scrollDirection:滚动方向,可以是纵向或横向。
  • physics:滚动控制器,可以设置滚动视图的滚动方式,如 BouncingScrollPhysics、AlwaysScrollableScrollPhysics、ClampingScrollPhysics 等。
  • controller:滚动控制器,可以设置滚动视图的初始滚动位置、滚动监听等。
  • slivers:CustomScrollView 的子组件,是一个 Sliver 列表。

滚动控制器的使用方式如下:

ScrollController _scrollController = ScrollController();
...
CustomScrollView(
  controller: _scrollController,
  ...
)

通过设置 ScrollController 可以对滚动视图进行控制,如设置初始滚动位置、监听滚动事件等。

CustomScrollView 中的 Sliver 组件使用方式如下:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      ...
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        ...
      }),
    ),
  ],
  ...
)

在 CustomScrollView 组件中,通过添加多个 Sliver 组件的列表来实现多个滚动视图的效果。在上面的例子中,我们添加了 SliverAppBar 和 SliverList 组件。

SliverAppBar 组件用于实现带有应用栏的滚动视图,而 SliverList 组件则用于实现带有列表的滚动视图。注意,SliverList 组件的 delegate 参数必须是一个 SliverChildBuilderDelegate 对象。

总结

CustomScrollView 组件是一个非常强大的滚动组件,可以实现复杂的滚动视图布局和交互。使用 CustomScrollView 组件,你可以在同一个页面中嵌入多个滚动视图,并支持不同样式的滚动视图。同时,CustomScrollView 组件还支持多种滚动控制器和滚动管理器,可以让你更加灵活地控制页面上的滚动行为。