Flutter ListViewのレイジーローディング

質問内容

エンドレスリストビューのアイテムの遅延ロードを実現するにはどうしたらいいですか？ユーザーがリストビューの最後までスクロールしたときに、ネットワークによってより多くのアイテムをロードしたいです。

どのように解決するのですか？

を聴くことができます。 ScrollController .

ScrollController には、scrolloffset や ScrollPosition .

あなたの場合、興味深いのは controller.position であり、これは現在表示されている ScrollPosition . これは、スクロール可能なセグメントを表します。

ScrollPosition は、スクロール可能な内部での位置に関する情報を含んでいます。例えば extentBefore と extentAfter . また、サイズについては extentInside .

これを考慮すると、サーバコールのトリガーとして extentAfter に基づいてサーバーの呼び出しをトリガーすることができます。

ここで、私が言ったことを使った基本的な例を示します。

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  ScrollController controller;
  List<String> items = List.generate(100, (index) => 'Hello $index');

  @override
  void initState() {
    super.initState();
    controller = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: ListView.builder(
          controller: controller,
          itemBuilder: (context, index) {
            return Text(items[index]);
          },
          itemCount: items.length,
        ),
      ),
    );
  }

  void _scrollListener() {
    print(controller.position.extentAfter);
    if (controller.position.extentAfter < 500) {
      setState(() {
        items.addAll(List.generate(42, (index) => 'Inserted $index'));
      });
    }
  }
}

スクロールの終わりに達したとき、より多くのアイテムを読み込んだため、スクロールバーが消費されていることがよくわかります。