강의를 보다 listview 기능에 의문이 생겨 질문드립니다.

안녕하세요 답변 감사합니다.

우선 제가 느려진다고 표현한 부분은 TabBar환경에서 예를들어

3개의 탭에서 첫번째 탭에 ListView.builder가 있고 거기에 많은 양의 정적인 데이터가 표시되고 있는 상태에서 

2번탭 또는 3번탭을 이동 후 다시 1번탭으로 복귀할 시 이동되기 전 딜레이가 걸립니다.

혹시 이 부분에 해결책이 있는지 궁금합니다.

이상하네요. 제가 테스트 했을 때 3개의 탭을 만들고 ListView.builder 로 5만개의 정적 데이터를 표시하는데 탭을 이동할 때 느려지지 않거든요.

뭔가 다른 요인이 있을 것 같은데요.

안녕하세요. 답변 감사합니다.

우선 제가 상황 설명이 조금 부족했던것같습니다.

제가 설계하려는 화면의 조건은

TabBar

TabBar 내부의 Tab에 ListView가 있는(대량의 데이터) 화면

탭 이동 후 복귀 시 스크롤 위치 유지 - PageStorageKey 사용

이정도 입니다.

여기서 제가 말한 지연이 발생하는 조건은

ListView를 하단으로 스크롤 하여 많은 데이터가 화면에 표시됨(약 1천개 이상) 

다른 탭으로 이동 (이동이 완전히 멈춘 상태)

ListView 탭으로 복귀

입니다.

이 때 ListView에 그려진 아이템의 개수가 많아질수록 지연은 비례해서 길어지고있습니다.

기종의 차이일 수는 있지만 ios 보다는 android에서 지연시간이 길게 발생하고있습니다.

해당 이슈를 검색해봤을 때 자료는 많이 않았지만 해결방법으로 ListView의 itemExtent에 값을 명시적으로 부여하는것은데 이 방법을 사용할 경우 ListView 내부의 아이템의 높이가 모두 같게 고정됩니다.

하지만 많은 모바일 앱이 그렇듯 모든 아이템의 높이가 같은 경우는 드물기에 저도 이 방법 외의 방법이 궁금합니다.

지식인 앱이 flutter로 개발되었다고 하여 해당 앱으로 테스트해본 결과 해당 앱에서도 똑같은 이슈가 발생하고있었습니다.

(지식인 앱 -> 홈 화면 스크롤 하단의 '지식iN에서 배워요'의 전체보기 -> 아무 탭에서 스크롤 하단으로 이동하여 많은 아이템 생성 -> 다른 탭 이동 -> 해당 탭으로 복귀)

해당 이슈가 화면의 코드도 같이 남기겠습니다.

class ListBuilderTest extends StatefulWidget {
  const ListBuilderTest({Key? key}) : super(key: key);

  @override
  State<ListBuilderTest> createState() => _State();
}

class _State extends State<ListBuilderTest> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(
                bottom: const TabBar(
              tabs: [Tab(text: "tab1"), Tab(text: "tab2"), Tab(text: "tab3")],
            )),
            body: TabBarView(
              children: [
                ListView.builder(
                  itemExtent: ,
                  key: const PageStorageKey(1),
                  itemCount: 50000,
                  itemBuilder: (BuildContext context, int index) {
                    return Text("$index");
                  },
                ),
                const Text("tab2"),
                const Text("tab3")
              ],
            )));
  }
}

보내주신 코드로 해 봤을 때도 저는 느려지지 않았습니다.

아니면 pagenation을 도입하시는 것도 하나의 방법일 듯 싶습니다.

https://pub.dev/packages/infinite_scroll_pagination