Flutter 플러터 ListView 레이지 로딩, Flutter ListView lazy loading

질문

How can I realize items lazy loading for endless listview? I want to load more items by network when user scroll to the end of listview.

답변

당신은 ScrollController를 들을 수 있습니다.

ScrollController에는 스크롤 오프셋과 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'));
      });
    }
  }
}

---

스크롤의 끝에 도달하면 더 많은 항목을 로드하여 스크롤바가 확장되는 것을 분명히 볼 수 있습니다.