Flutter之ListView实现自动滑动到底部

最新推荐文章于 2024-03-12 15:45:21 发布

原创

最新推荐文章于 2024-03-12 15:45:21 发布 · 7.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #listview #Scroll #dart

本文介绍了在Flutter中实现社交应用中消息列表自动滑动到底部的功能。通过使用ScrollController的jumpTo和animateTo方法，结合延迟执行来确保在数据更新后正确滚动。在实际操作中发现，由于滚动操作发生在数据更新之前，导致滚动位置不准确。为解决此问题，采用Future.delayed延迟500毫秒执行滑动操作，确保列表数据已更新，从而实现顺畅的用户体验。

文章目录

使用场景
思路
- ScrollPostion
实现

使用场景

在常见社交App中，发送消息或者接收到他人消息后，消息列表都会自动滑动到底部，不需要我们手动滑动，这样的用户体验好。

思路

ListView使用ScrollController来控制滑动，其中有jumpTo、animateTo2个方法滑动到指定的位置。

/// packages/flutter/lib/src/widgets/scroll_controller.dart

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

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