我有一个可滚动的ListView,其中项目的数量可以动态变化。每当一个新项目被添加到列表的末尾时,我希望以编程的方式将ListView滚动到末尾。(例如,类似聊天消息列表的东西,可以在最后添加新消息)
我的猜测是,我需要在我的State对象中创建一个ScrollController,并手动将其传递给ListView构造函数,这样我就可以稍后在控制器上调用animateTo() / jumpTo()方法。然而,由于我不容易确定最大滚动偏移量,因此似乎不可能简单地执行scrollToEnd()类型的操作(而我可以轻松地传递0.0使其滚动到初始位置)。
有没有简单的方法来实现这个目标?
使用reverse: true对我来说不是一个完美的解决方案,因为当只有少量的项目适合ListView视口时,我希望项目在顶部对齐。
截图:
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);
}
根据这个答案,我已经创建了这个类,只是发送你的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,
);
});
}
}
_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;
}
}