[解決済み] Flutter ListViewでウィジェットにスクロールする
2022-08-14 05:06:04
質問
の中の特別なウィジェットにスクロールするにはどうしたらよいでしょうか。
ListView
?
たとえば、私は自動的に
Container
の中にある
ListView
を押すと、特定のボタンが表示されます。
ListView(children: <Widget>[
Container(...),
Container(...), #scroll for example to this container
Container(...)
]);
どのように解決するのですか?
最も簡単な解決策は
Scrollable.ensureVisible(context)
. これはあなたに代わってすべてを行い、どのようなウィジェットサイズでも動作するようにします。コンテキストを取得するには
GlobalKey
.
問題は
ListView
が可視でない項目をレンダリングしないことです。つまり、あなたのターゲットは、ほとんどの場合、ビルドされることのない
で
. つまり、ターゲットには
context
がないことを意味します。
結局のところ、最も簡単な解決策は、あなたの
ListView
を
SingleChildScrollView
で囲み、子プロセスを
Column
. 例.
class ScrollView extends StatelessWidget {
final dataKey = new GlobalKey();
@override
Widget build(BuildContext context) {
return new Scaffold(
primary: true,
appBar: new AppBar(
title: const Text('Home'),
),
body: new SingleChildScrollView(
child: new Column(
children: <Widget>[
new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
// destination
new Card(
key: dataKey,
child: new Text("data\n\n\n\n\n\ndata"),
)
],
),
),
bottomNavigationBar: new RaisedButton(
onPressed: () => Scrollable.ensureVisible(dataKey.currentContext),
child: new Text("Scroll to data"),
),
);
}
}
注意 : これは目的の項目まで簡単にスクロールできますが、この方法は小さな定義済みリストのためだけのものだと考えてください。より大きなリストに関しては、パフォーマンスの問題が発生するでしょう。
しかし
Scrollable.ensureVisible
で動作させることは可能です。
ListView
で動作します。
関連
-
[解決済み] FlutterでListViewをColumnに追加する方法とは?
-
[解決済み] AndroidのListViewで画像を遅延ロードする方法
-
[解決済み] AndroidのPull-to-Refreshの実装方法
-
[解決済み] スクロールすると背景のListViewが黒くなる
-
[解決済み】行ごとに異なるレイアウトのAndroid ListView
-
[解決済み】RecyclerViewとListViewの比較
-
[解決済み] FlutterのColumnの子供の間のスペース
-
[解決済み] Flutter。画面の向きをオンデマンドで設定・ロックする方法
-
[解決済み] FlutterのコードからWebブラウザ(URL)を開くには?
-
[解決済み] CircularProgressIndicatorにサイズを設定するには?
最新
-
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 実装 サイバーパンク風ボタン