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

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

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

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


当前回答

_controller.jumpTo(_controller.position.maxScrollExtent);
_controller.animateTo(_controller.position.maxScrollExtent);

这些调用不能很好地用于动态大小的项列表。在调用jumpTo()时,我们不知道列表有多长,因为所有的项都是变量,并且是在向下滚动列表时惰性构建的。

这可能不是聪明的方法,但作为最后的手段,你可以这样做:

Future scrollToBottom(ScrollController scrollController) async {
  while (scrollController.position.pixels != scrollController.position.maxScrollExtent) {
    scrollController.jumpTo(scrollController.position.maxScrollExtent);
    await SchedulerBinding.instance!.endOfFrame;
  }
}

其他回答

为了得到完美的结果,我将Colin Jackson和CopsOnRoad的答案结合如下:

_scrollController.animateTo(
    _scrollController.position.maxScrollExtent,
    curve: Curves.easeOut,
    duration: const Duration(milliseconds: 500),
 );

截图:

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); }

你可以使用0.09*height作为列表中一行的高度,_controller的定义如下:_controller = ScrollController();

(BuildContext context, int pos) {
    if(pos != 0) {
        _controller.animateTo(0.09 * height * (pos - 1), 
                              curve: Curves.easeInOut,
                              duration: Duration(milliseconds: 1400));
    }
}

不要将widgetBinding放在初始化状态,相反,您需要将它放在从数据库获取数据的方法中。比如,像这样。如果将scrollcontroller置于initstate,它将不会附加到任何listview。

    Future<List<Message>> fetchMessage() async {

    var res = await Api().getData("message");
    var body = json.decode(res.body);
    if (res.statusCode == 200) {
      List<Message> messages = [];
      var count=0;
      for (var u in body) {
        count++;
        Message message = Message.fromJson(u);
        messages.add(message);
      }
      WidgetsBinding.instance
          .addPostFrameCallback((_){
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        }
      });
      return messages;
    } else {
      throw Exception('Failed to load album');
    }
   }

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

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

这里200是额外的距离