1. ホーム
  2. flutter

[解決済み] 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 がないことを意味します。

結局のところ、最も簡単な解決策は、あなたの ListViewSingleChildScrollView で囲み、子プロセスを 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 で動作します。