我有一个可滚动的ListView,其中项目的数量可以动态变化。每当一个新项目被添加到列表的末尾时,我希望以编程的方式将ListView滚动到末尾。(例如,类似聊天消息列表的东西,可以在最后添加新消息)

我的猜测是,我需要在我的State对象中创建一个ScrollController,并手动将其传递给ListView构造函数,这样我就可以稍后在控制器上调用animateTo() / jumpTo()方法。然而,由于我不容易确定最大滚动偏移量,因此似乎不可能简单地执行scrollToEnd()类型的操作(而我可以轻松地传递0.0使其滚动到初始位置)。

有没有简单的方法来实现这个目标?

使用reverse: true对我来说不是一个完美的解决方案,因为当只有少量的项目适合ListView视口时,我希望项目在顶部对齐。


当前回答

如果你想看到最后一项从底部填充可见,然后添加额外的距离像这样

 _controller.jumpTo(_controller.position.maxScrollExtent + 200);

这里200是额外的距离

其他回答

截图:

Scrolling with animation: final ScrollController _controller = ScrollController(); // This is what you're looking for! void _scrollDown() { _controller.animateTo( _controller.position.maxScrollExtent, duration: Duration(seconds: 2), curve: Curves.fastOutSlowIn, ); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton.small( onPressed: _scrollDown, child: Icon(Icons.arrow_downward), ), body: ListView.builder( controller: _controller, itemCount: 21, itemBuilder: (_, i) => ListTile(title: Text('Item $i')), ), ); } Scrolling without animation: Replace above _scrollDown method with this: void _scrollDown() { _controller.jumpTo(_controller.position.maxScrollExtent); }

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent)是最简单的方法。

如果你想看到最后一项从底部填充可见,然后添加额外的距离像这样

 _controller.jumpTo(_controller.position.maxScrollExtent + 200);

这里200是额外的距离

_scrollController.animateTo ( _scrollController.position.maxScrollExtent, duration: const持续时间(毫秒:400), 曲线:Curves.fastOutSlowIn); });

根据这个答案,我已经创建了这个类,只是发送你的scroll_controller,如果你想要相反的方向使用反向参数

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class ScrollService {
  static scrollToEnd(
      {required ScrollController scrollController, reversed = false}) {
    SchedulerBinding.instance!.addPostFrameCallback((_) {
      scrollController.animateTo(
        reverced
            ? scrollController.position.minScrollExtent
            : scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    });
  }
}