以编程方式滚动到ListView的末尾 [英] Programmatically scrolling to the end of a ListView
问题描述
我有一个可滚动的ListView
,其中项目数可以动态更改.每当将新项目添加到列表的末尾时,我都希望以编程方式将ListView
滚动到末尾. (例如,像聊天消息列表之类的,可以在末尾添加新消息)
I have a scrollable ListView
where the number of items can change dynamically. Whenever a new item is added to the end of the list, I would like to programmatically scroll the ListView
to the end. (e.g., something like a chat message list where new messages can be added at the end)
我的猜测是,我需要在State
对象中创建一个ScrollController
并将其手动传递给ListView
构造函数,以便以后可以在控制器上调用animateTo()
/jumpTo()
方法.但是,由于我无法轻松确定最大滚动偏移量,因此似乎不可能简单地执行scrollToEnd()
类型的操作(而我可以轻松地通过0.0
使其滚动到初始位置).
My guess is that I would need to create a ScrollController
in my State
object and pass it manually to the ListView
constructor, so I can later call animateTo()
/ jumpTo()
method on the controller. However, since I cannot easily determine the maximum scroll offset, it seems impossible to simply perform a scrollToEnd()
type of operation (whereas I can easily pass 0.0
to make it scroll to the initial position).
有没有简单的方法来实现这一目标?
Is there an easy way to achieve this?
对于我来说,使用reverse: true
并不是一个完美的解决方案,因为当ListView
视口内只有少量项目时,我希望这些项目在顶部对齐.
Using reverse: true
is not a perfect solution for me, because I would like the items to be aligned at the top when there are only a small number of items that fit within the ListView
viewport.
推荐答案
如果将收缩包装的ListView
与reverse: true
一起使用,则将其滚动到0.0即可满足您的要求.
If you use a shrink-wrapped ListView
with reverse: true
, scrolling it to 0.0 will do what you want.
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),
);
}
),
);
}
}
这篇关于以编程方式滚动到ListView的末尾的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!