ListView滑动到指定位置

550 字

3 分钟

ListView滑动到指定位置

2021-11-22

2026-10-12

Flutter

无标签

前言#

在进行列表视图的开发场景中，通过索引快速滑动到指定 section 是常见的功能。那么在 flutter 中我们该如何实现这种功能呢？本文就将以联系人页面为例进行讲解。

分析ListView#

在 iOS 开发中我们常使用 open func scrollToItem(at indexPath: IndexPath, at scrollPosition: UICollectionView.ScrollPosition, animated: Bool) 这类方法来实现 CollectionView 和 TableView 下的滚动到指定位置的效果。

但 flutter 的 ListView 并不含有这种分组的概念，也没有提供这种便利的方法，但是有基础API可以为我们提供一些思路。

ScrollController#

我们可以在为 ListView 绑定一个 ScrollController ，它的作用可以理解为我们进行 iOS 开发中的相关代理，但是他的作用会更富一些。

为来滚动到指定位置，这里提供了两个 API，更具体的说明可以点进头文件查看注释，这里就不再赘述。

animateTo

有动画

1
  Future<void> animateTo(
2
    double offset, {
3
    required Duration duration,
4
    required Curve curve,
5
  }) async {
6
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
7
    await Future.wait<void>(<Future<void>>[
8
      for (int i = 0; i < _positions.length; i += 1) _positions[i].animateTo(offset, duration: duration, curve: curve),
9
    ]);
10
  }

jumpTo

无动画

1
  void jumpTo(double value) {
2
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
3
    for (final ScrollPosition position in List<ScrollPosition>.from(_positions))
4
      position.jumpTo(value);
5
  }

这里为了实现通讯录滑动到组头部的效果，选择使用 jumpTo。

提前计算好每组的偏移量#

1
class _ContactsPageState extends State<ContactsPage> {
2
  final List<Friends> _contacts = [];// 联系人数组
3
  final List<Friends> _systems = []; // 顶部系统入口数组
4
  final List<String> _indexs = []; // 索引
5
  ScrollController _scroller = ScrollController();
6
  Map<int, double> _indexOffsets = {}; // 偏移量Map
7

8
  @override
9
  void initState() {
10
    super.initState();
11

12
    double offsetY = 0;
13

14
    _contacts
15
      ..addAll(friendsData)
16
      ..addAll(friendsData)
17
      ..sort((a, b) {
18
        if (a.indexLetter == null || b.indexLetter == null) {
19
          return 0;
20
        }
21
        return a.indexLetter!.compareTo(b.indexLetter!);
22
      });
23

24
    _systems
25
        .addAll(friendsHeaderData);
26

27
    offsetY = ContactCell.baseCellHeight * friendsHeaderData.length.toDouble();// 第一个联系人组的顶部偏移量为顶部系统入口的总高度
28

29
    var index = 0;
30

31
    _contacts.forEach((element) {
32
      if (element.indexLetter != null && _indexs.contains(element.indexLetter) == false) {
33
        _indexs.add(element.indexLetter!);
34

35
        _indexOffsets.addAll({ index : offsetY });
36

37
        index += 1;
38
        // 基础Cell高度，加上顶部分组头部高度
39
        offsetY += ContactCell.baseCellHeight + ContactCell.indexHeight;
40
      }
41
      else {
42
        // 基础Cell高度
43
        offsetY += ContactCell.baseCellHeight;
44
      }
45
    });
46
  }
47

48
  ...
49
}

IndexBar的事件处理#

1
IndexBar(
2
    dataSource: _indexs,
3
    callBack: (index, title) {
4
        if (_indexOffsets[index] != null) {
5
        _scroller.jumpTo(_indexOffsets[index]!);
6
        }
7
    },
8
)