Flutter列表滚动定位超强辅助库使用示例详解

更新时间：2022年08月10日 09:27:22 作者：LinXunFeng

这篇文章主要为大家介绍了Flutter列表滚动定位超强辅助库使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

一、痛点

痛点一：Flutter 官方提供了 ScrollController，调用下方两个方法可以滚动到指定偏移处

void jumpTo(double value)

Future<void> animateTo(
  double offset, {
  required Duration duration,
  required Curve curve,
})

但是官方没有提供滚动到指定下标位置的功能

痛点二：

为了解决痛点一，业内有很多第三方库实现了这个功能，其中最知名的莫过于谷歌的 scrollable_positioned_list

而这些库都有一些相同的问题：

侵入性强，必须使用他们提供的 Widget 来构建列表视图
不支持 GridView

对此，我决定自己编写一个库（flutter_scrollview_observer）来实现这个功能，以及解决以上的问题。

二、优点

侵入性低，不会限制你的列表视图实现，只要求将列表视图做为 ViewObserver 的 child，如果不想用了，直接移除掉 ViewObserver 即可。
基于【不会限制你的列表视图实现】这一点， flutter_scrollview_observer 支持所有的列表Widget，如:ListView、GridView，甚至 CustomSrollView
防抖动，如果在滚动到指定下标时，列表尾部的可滚动区域已不足以支撑滚动到相应位置，则会自动滚动到最底部，避免回弹的问题

下面正式介绍一下这个库的使用

三、使用

1、ListView

正常创建和使用 ScrollController 实例

这里你可以使用 ListView 或者 CustomSrollView 的 SliverList

ScrollController scrollController = ScrollController();
ListView _buildListView() {
  return ListView.separated(
    controller: scrollController,
    ...
  );
}

创建 ListObserverController 实例并将其传递给 ListViewObserver

ListObserverController observerController = ListObserverController(controller: scrollController);
ListViewObserver(
  controller: observerController,
  child: _buildListView(),
  ...
)

注意：创建 ListObserverController 实例时需要传入列表的 ScrollController 实例。这一步很重要，因为 flutter_scrollview_observer 内部实现原理是基于官方 ScrollController 提供的 jumpTo 和 animateTo 方法

现在即可滚动到指定下标位置了

// 无动画滚动至下标位置
observerController.jumpTo(index: 100)
// 动画滚动至下标位置
observerController.animateTo(
  index: 100,
  duration: const Duration(seconds: 1),
  curve: Curves.ease,
);

2、GridView

内容与 ListView 基本一致

正常创建和使用 ScrollController 实例

Widget _buildGridView() {
  return GridView.builder(
    ...
    controller: scrollController,
    ...
  );
}

创建 GridObserverController 实例并将其传递给 GridViewObserver

GridObserverController observerController = GridObserverController(controller: scrollController);
GridViewObserver(
  controller: observerController,
  child: _buildGridView(),
)

现在即可滚动到指定下标位置了

observerController.jumpTo(
  index: 40,
);
observerController.animateTo(
  index: 40,
  duration: const Duration(seconds: 1),
  curve: Curves.ease,
);

3、CustomSrollView

支持 SliverList 和 SliverGrid 混合使用的情况！

如上图所示，CustomSrollView 的 slivers 中包含有 SliverList 和 SliverGrid

点击右下角第一个按钮可滚动到 SliverList 的第 29 行
点击第二个按钮可滚动到 SliverGrid 的第 10 的子部件所在行

正常创建和使用 ScrollController 实例

Widget _buildScrollView() {
  return CustomScrollView(
    controller: scrollController,
    // scrollDirection: Axis.horizontal,
    slivers: [
      _buildSliverListView(),
      _buildSliverGridView(),
    ],
  );
}

正常创建你的 SliverList 和 SliverGrid，并将它们的 BuildContext 记录起来

Widget _buildSliverListView() {
  return SliverList(
    delegate: SliverChildBuilderDelegate(
      (ctx, index) {
        _sliverListCtx ??= ctx;
        ...
      },
      ...
    ),
  );
}
Widget _buildSliverGridView() {
  return SliverGrid(
    ...
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        _sliverGridCtx ??= context;
        ...
      },
      ...
    ),
  );
}

创建 SliverObserverController 实例并将其传递给 SliverViewObserver

注意：在 sliverListContexts 里返回刚才记录的两个 Sliver 的 BuildContext

SliverObserverController observerController = SliverObserverController(controller: scrollController);
SliverViewObserver(
  controller: observerController,
  child: _buildScrollView(),
  sliverListContexts: () {
    return [
      if (_sliverListCtx != null) _sliverListCtx!,
      if (_sliverGridCtx != null) _sliverGridCtx!,
    ];
  },
  ...
),

现在即可滚动到指定下标位置了

observerController.animateTo(
  sliverContext: _sliverListCtx,
  index: 29,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);
observerController.animateTo(
  sliverContext: _sliverGridCtx,
  index: 10,
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

四、说明

1、ViewObserver 的选择

建议使用相应的 ViewObserver：

如果是 ListView 或者纯 SliverList，建议使用 ListViewObserver
如果是 GridView 或者纯 SliverGrid，建议使用 GridViewObserver
如果是 SliverList 和 SliverGrid，则使用 SliverViewObserver

这样在 onObserve 回调中拿到数据模型后不用再对其进行类型判断与转换。

2、isFixedHeight

子部件为固定高度的情况下，请设置 isFixedHeight 为 true，以提升性能！

observerController.jumpTo(
  index: 100, 
  isFixedHeight: true
);
observerController.animateTo(
  index: 100,
  isFixedHeight: true,
  duration: const Duration(seconds: 1),
  curve: Curves.ease,
);

3、sliverContext 是否需要传

jumpTo({
  required int index,
  BuildContext? sliverContext,
  bool isFixedHeight = false,
})
animateTo({
  required int index,
  required Duration duration,
  required Curve curve,
  BuildContext? sliverContext,
  bool isFixedHeight = false,
})

如上，jumpTo 和 animateTo 方法中都有一个 sliverContext 参数，这是用来指定哪个 sliver 进行滚动操作的。

如果不传 sliverContext，则默认会是列表中的第一个 sliver，只有你想让非第一个 sliver 进行滚动的时候才需要传该值

五、可现实的功能

1、获得当前视窗中的子部件信息

如上图控制台所示，在滚动的过程中可以实时获取正在显示的子部件的数据。

2、视频列表自动播放

这种功能很常见，在列表滚动的时候，指定区域内的被命中的视频便会自动进行播放。

3、模块定位

一般详情页中都会有的功能，在列表视图滚动的时候，顶部定位导航视图跟着更新下标，点击导航视图某个下标则会定位到对应的模块

六、最后

如果这个库对你很有帮助，请不吝给个 star 吧

GitHub: flutter_scrollview_observer

以上就是Flutter列表滚动定位超强辅助库使用示例详解的详细内容，更多关于Flutter列表滚动定位辅助库的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

iOS实现点击状态栏自动回到顶部效果详解
在IOS开发过程中，经常会有这种需求，需要通过点击状态栏返回到顶部，给用户更好的体验效果，下面这篇文章给大家详细介绍了实现过程，有需要的可以参考借鉴。
2016-09-09
用iOS模拟器安装App的方法
下面小编就为大家分享一篇用iOS模拟器安装App的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
iOS开发image背景图片拉伸问题解决分析
这篇文章主要为大家介绍了iOS开发image背景图片拉伸问题解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
IOS开发QQ空间/朋友圈类界面的搭建
本篇文章主要介绍了iOS开发之类似朋友圈的社交界面实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
详解 swift3.0 可选绑定共用同一块内存空间的实例
这篇文章主要介绍了详解 swift3.0 可选绑定共用同一块内存空间的实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
iOS实现换肤功能的简单处理框架（附源码）
这篇文章主要给大家介绍了关于iOS实现换肤功能的简单处理框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
Flutter CustomPaint自定义绘画示例详解
这篇文章主要为大家介绍了Flutter CustomPaint自定义绘画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
IOS 静态库和Framework区别
这篇文章主要介绍了IOS 静态库和Framework区别的相关资料,这里对动态库与静态库做比较，选择什么时候使用库文件，需要的朋友可以参考下
2016-12-12
iOS 使用UITextField自定义搜索框实现用户输入完之后“实时搜索”功能
这篇文章主要介绍了iOS 使用UITextField自定义搜索框实现用户输入完之后“实时搜索”功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
IOS 仿Android吐司提示框的实例(分享)
下面小编就为大家分享一篇IOS 仿Android吐司提示框的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12