我有一个可滚动的ListView, 其中的项目数量可以动态更改。每当添加一个新项目到列表末尾时，我希望能够编程滚动ListView到末尾。(例如，类似聊天消息列表的东西，新消息可以添加到末尾)
我猜想我需要在我的State对象中创建一个ScrollController并手动传递给ListView构造函数，以便稍后调用控制器上的animateTo() / jumpTo()方法。然而，由于我无法轻松确定最大滚动偏移量，因此似乎不可能简单地执行scrollToEnd()类型的操作(而我可以轻松地传递0.0使其滚动到初始位置)。
是否有一种简单的方法来实现这一点？
使用reverse: true对我来说不是完美的解决方案，因为当只有少量项目适合ListView视口时，我希望项目对齐在顶部。
带有动画的滚动：
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')),
),
);
}
不带动画的滚动：
将上面的_scrollDown方法替换为以下内容：
void _scrollDown() {
_controller.jumpTo(_controller.position.maxScrollExtent);
}
如果使用带有 reverse: true 属性的预设 ListView，将其滚动到 0.0 将会达到您想要的效果。
import 'dart:collection';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Example',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Widget> _messages = <Widget>[new Text('hello'), new Text('world')];
ScrollController _scrollController = new ScrollController();
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Container(
decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),
width: 100.0,
height: 100.0,
child: new Column(
children: [
new Flexible(
child: new ListView(
controller: _scrollController,
reverse: true,
shrinkWrap: true,
children: new UnmodifiableListView(_messages),
),
),
],
),
),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add),
onPressed: () {
setState(() {
_messages.insert(0, new Text("message ${_messages.length}"));
});
_scrollController.animateTo(
0.0,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
}
),
);
}
}
listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent)是最简单的方法。
.position.maxScrollExtent。_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 500),
);
虽然所有答案都能产生期望的效果，但是我们应该做一些改进。
首先，在大多数情况下（关于自动滚动），使用postFrameCallbacks是无用的，因为一些内容可能会在ScrollController附加（通过attach方法）之后渲染，控制器将滚动到它所知道的最后位置，而该位置可能不是视图中的最新位置。
使用reverse:true是一个不错的技巧来“尾随”内容，但是物理上会被反转，因此当您尝试手动移动滚动条时，必须将其移动到相反的方向->不好的用户体验。
在设计图形界面时，使用计时器是一种非常糟糕的做法->计时器在更新/生成图形造成干扰。
无论怎样，正确完成任务的方法是使用jumpTo方法和hasClients方法作为保护条件。
是否有任何ScrollPosition对象使用attach方法附加到ScrollController。
如果这是false，则不能调用与ScrollPosition交互的成员，例如position、offset、animateTo和jumpTo。
在代码中，可以简单地这样做：
if (_scrollController.hasClients) {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
无论如何，这段代码还不够好，即使可滚动区域没有到屏幕底部，该方法也会被触发，因此，如果您手动移动滚动条，该方法将被触发并执行自动滚动。
我们可以做得更好，借助一个监听器和一对 bool 变量就可以了。
我正在使用这个技巧来在 SelectableText 中可视化一个大小为 100000 的 CircularBuffer 的值，内容保持正确更新，自动滚动非常平滑，即使是非常非常长的内容也没有性能问题。也许正如其他答案中有人所说的那样，animateTo 方法可能会更流畅、更可定制，所以请随意尝试。
ScrollController _scrollController = new ScrollController();
bool _firstAutoscrollExecuted = false;
bool _shouldAutoscroll = false;
void _scrollToBottom() {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
void _scrollListener() {
_firstAutoscrollExecuted = true;
if (_scrollController.hasClients && _scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
_shouldAutoscroll = true;
} else {
_shouldAutoscroll = false;
}
}
initState中进行注册：@override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
}
dispose中移除监听器：@override
void dispose() {
_scrollController.removeListener(_scrollListener);
super.dispose();
}
setState中触发_scrollToBottom:setState(() {
if (_scrollController.hasClients && _shouldAutoscroll) {
_scrollToBottom();
}
if (!_firstAutoscrollExecuted && _scrollController.hasClients) {
_scrollToBottom();
}
});
解释
_scrollToBottom() 以避免代码重复;_scrollListener() 并将其附加到_scrollController中的 initState -> 在滚动条移动后第一次触发。在此侦听器中，我们更新布尔值_shouldAutoscroll的值，以了解滚动条是否位于屏幕底部。dispose中删除侦听器，以确保在小部件处置后不做无用的操作。setState中，当我们确定_scrollController已附加且该控制器位于底部（检查shouldAutoscroll的值）时，我们可以调用_scrollToBottom()。_firstAutoscrollExecuted的值来强制短路_scrollToBottom()。scrollcontroller将不会附加到任何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);
_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;
}
}
当我使用StreamBuilder小部件从我的数据库获取数据时，遇到了这个问题。我在小部件的build方法顶部放置了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，但好像没有起作用。 _controller.jumpTo(_controller.position.maxScrollExtent + 200);
这里会额外增加200的距离。
根据这个答案，我创建了这个类，只需发送您的滚动控制器，如果您想要相反的方向，请使用reversed参数。
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,
);
});
}
}