ListViewアイテムの数を動的に変更できるスクロール可能なものがあります。リストの最後に新しいアイテムが追加されるたびに、プログラムでListView最後までスクロールしたいと思います。（たとえば、最後に新しいメッセージを追加できるチャットメッセージリストのようなもの）
私の推測ではScrollController、Stateオブジェクトにを作成して手動でListViewコンストラクターに渡す必要があるので、後でコントローラーでanimateTo()/jumpTo()メソッドを呼び出すことができます。ただし、最大スクロールオフセットを簡単に決定できないため、ある種scrollToEnd()の操作を単純に実行することは不可能のようです（ただし、簡単にパス0.0して初期位置にスクロールさせることができます）。
これを達成する簡単な方法はありますか？
ビューポートreverse: true内に収まるアイテムの数が少ないときにアイテムを上部に配置したいので、使用することは私にとって完璧な解決策ではありませんListView。
回答:
でシュリンクラップListViewを使用する場合は、reverse: true0.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),
);
}
),
);
}
}
これを達成するためのScrollController.jumpTo()またはScrollController.animateTo()方法を使用します。
例：
final _controller = ScrollController();
@override
Widget build(BuildContext context) {
// After 1 second, it takes you to the bottom of the ListView
Timer(
Duration(seconds: 1),
() => _controller.jumpTo(_controller.position.maxScrollExtent),
);
return ListView.builder(
controller: _controller,
itemCount: 50,
itemBuilder: (_, __) => ListTile(title: Text('ListTile')),
);
}
スムーズなスクロールが必要な場合は、jumpTo上記を使用する代わりに
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) 最も簡単な方法です。
スクロールコントローラーを使用してリストの一番下に移動しようとすると、非常に多くの問題が発生するため、別のアプローチを使用します。
リストを一番下に送信するイベントを作成する代わりに、逆のリストを使用するようにロジックを変更します。
ですから、新しいアイテムを手に入れるたびに、リストの一番上に挿入して作成しました。
// add new message at the begin of the list
list.insert(0, message);
// ...
// pull items from the database
list = await bean.getAllReversed(); // basically a method that applies a descendent order
// I remove the scroll controller
new Flexible(
child: new ListView.builder(
reverse: true,
key: new Key(model.count().toString()),
itemCount: model.count(),
itemBuilder: (context, i) => ChatItem.displayMessage(model.getItem(i))
),
),
widgetBindingをinitstateに配置しないでください。代わりに、データベースからデータをフェッチするメソッドにwidgetBindingを配置する必要があります。たとえば、このように。initstateに入れると、はscrollcontrollerリストビューに添付されません。
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');
}
}