[解決済み] ListViewの最後までプログラム的にスクロールさせる
2022-04-21 02:32:42
質問
スクロール可能な
ListView
ここで、項目の数は動的に変更することができます。新しい項目がリストの末尾に追加されるたびに、プログラムによって
ListView
を最後まで表示します。(例: チャットメッセージリストのように、新しいメッセージを最後に追加できるようなもの)
私が思うに、このような場合に必要なのが
ScrollController
の中で
State
オブジェクトを作成し、それを手動で
ListView
のコンストラクタを呼び出すことができます。
animateTo()
/
jumpTo()
メソッドをコントローラ上で実行します。しかし、最大スクロールオフセットを簡単に決定することができないため、単純に
scrollToEnd()
タイプの操作を行うことができます。
0.0
で初期位置までスクロールさせることができます)。
これを簡単に実現する方法はありますか?
使用方法
reverse: true
に収まる項目が少ない場合、項目を上部に整列させたいので、完璧な解決策ではありません。
ListView
ビューポートに表示されます。
解決方法は?
を使用する場合、シュリンクラップは
ListView
と
reverse: true
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),
);
}
),
);
}
}
関連
-
[解決済み] Dartは参照渡しになりますか?[重複あり]
-
[解決済み] 水平スクロール フラッターのテキスト
-
[解決済み] Flutterで丸みを帯びたボタン/border-radius付きボタンを作成する
-
Solve flutter Android ライセンスの状態が不明です。Android SDK Managerを再インストールまたはアップデートしてみてください。
-
[解決済み】Flutterで背景画像を設定する方法は?
-
[解決済み】Flutterのテキストウィジェットの下に黄色い線が?
-
[解決済み】FlutterでStateful Widgetにデータを渡す
-
[解決済み] サブツリー内に同じタグを共有するヒーローが複数存在する
-
[解決済み] dispose() の後に setState() が呼ばれる。
-
[解決済み] Flutterアプリのビルド番号とバージョン番号を取得する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Flutter TextButton splashColor プロパティ
-
[解決済み] FlutterでborderRadiusを使用してコンテナにボーダーを追加する
-
flutter,コマンド PhaseScriptExecution が 0 以外の終了コードで失敗しました。
-
[解決済み] Flutterでgoogleとyoutubeの両方にログインする
-
[解決済み】起動ロックを解除するために別のflutterコマンドを待機する
-
[解決済み】flutterのwrap_contentとmatch_parentに相当するもの?
-
[解決済み】flutterはアプバー上の戻るボタンを削除します。
-
[解決済み] appBarのバックボタンの色を変更する方法
-
[解決済み] Flutterアプリケーションがデバッグで動作していることを確認する方法は?
-
[解決済み] Flutter プログラムでアプリを終了させる方法