我有一个可滚动的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); }
其他回答
对我来说，问题是scrollController.position.maxScrollExtent总是返回0.0。原因是我的ListView在ScrollView里面。
删除ScrollView修复了这个问题。
我在使用StreamBuilder小部件从数据库中获取数据时遇到了这个问题。我把WidgetsBinding.instance.addPostFrameCallback放在小部件的构建方法的顶部，它不会一直滚动到最后。我是这样解决的:
...
StreamBuilder(
stream: ...,
builder: (BuildContext context, AsyncSnapshot snapshot) {
// Like this:
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_controller.hasClients) {
_controller.jumpTo(_controller.position.maxScrollExtent);
} else {
setState(() => null);
}
});
return PutYourListViewHere
}),
...
我尝试了_controller。animateTo太，但它似乎没有工作。
不要将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');
}
}
根据这个答案，我已经创建了这个类，只是发送你的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,
);
});
}
}
我使用的是一个动态列表视图，但scrollController.animateTo()不会工作在这里提到的动态列表https://stackoverflow.com/a/67561421/13814518，我甚至没有在以前的答复中找到任何好的解决方案。下面是我解决这个问题的方法。
void scrollToMaxExtent() {
WidgetsBinding.instance.addPostFrameCallback((_) {
scrollController.animateTo(
scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn,
);
});
}
