본문 바로가기

춘기IT/춘기개발

Flutter View 위젯 - ListView

Flutter는 화면에 보여지는 모든 요소가 위젯으로 구성되어 있습니다.

그 중에서도 화면에 출력되는 시각적 구성 요소를 다루는 위젯을 View 위젯이라고 합니다. 

 

📜 ListView - 세로로 쭉 나열되는 리스트

- ListView는 스크롤 가능한 위젯 목록을 표시하는데 사용됩니다.

- 가로/세로 스크롤 할 수 있는 긴 항목 목록을 만드는 데 사용할 수 있고,

   채팅 화면, 게시판, 쇼핑 목록 등에서 흔하게 사용됩니다.

📌 자주 사용되는 ListView 위젯의 옵션

1. scrollDirection
- scrollDirection 옵션은 Axis enum 타입의 값을 지정해야 하며 horizontal 과 vertical 두 가지를 설정할 수 있습니다.
- 기본값은 세로(Axis.vertical)입니다.

2. reverse
- 스크롤 방향을 반대로 정렬한다는 뜻입니다.
- 기본 값은 false이며 true로 설정할 경우 가장 마지막에 배치된 것이 가장 위로 보이게 됩니다.
   ㄴ 보통 채팅 앱에서 최신 데이터가 가장 밑에 보이는 것이 reverse 옵션을 true 설정한 것입니다.
//ListView 옵션 reverse 예

reverse: true,​

3. controller
- controller 옵션에 등록할 ScrollController 클래스를 통해서
  원하는 스크롤 위치로 이동하게 하거나
  현재 스크롤링 되고 있는 위치를 실시간으로 전달받는 등의 이벤트 처리를 할 수 있습니다.
- 보통 controller 없이 등록을 하여 사용하지만,
  특정 요구사항이나 무한 스크롤링의 경우
  마지막 스크롤 위치에서 다음 페이지를 호출하게 하기 위한 이벤트 처리를 scrollController를 등록하여 처리할 수 있습니다.

4. physics
- physics 옵션은 ListView 위젯에서 스크롤 동작을 결정하는 속성입니다.
  이 속성을 통해 스크롤 동작을 커스터마이즈하여 사용자가 앱에서 더 나은 스크롤 경험을 할 수 있습니다.
- physics 옵션에 들어갈 수 있는 다양한 효과의 경우 다음과 같이 정리할 수 있습니다.
  1) BouncingScrollPhysics
     - 스크롤 범위가 내부 콘텐츠보다 큰 경우 스크롤 끝에서 반사 효과를 제공합니다. (iOS 스크롤 동작과 유사)       
  2) ClampingScrollPhysics
     - 스크롤 범위가 내부 컨텐츠보다 클 때 끝에서 반사 효과 대신 스크롤을 클램핑합니다. (Android 스크롤 동작과 유사)
  3) FixedExtentScrollPhysics
     - 모든 아이템이 동일한 크기를 가지는 경우 사용되고 스크롤을 균일한 단위로 이동합니다.
   4) NeverScrollableScrollPhysics
     - 스크롤이 비활성화된 상태입니다.

5. padding
- 리스트 뷰 내부에 padding을 통해 간격을 설정 할 수 있습니다.

6. cacheExtent
- ListView 위젯에서 cacheExtent 옵션은 리스트 뷰에서 양쪽 방향으로 스크롤 할 때
  캐시 할 수 있는 추가적인 영역을 정의하는 속성입니다. (캐시 된 아이템은 스크롤 시 더 빠르게 로드됨)
  ㄴ 예) cacheExtent를 1000.0으로 설정하면, 사용자가 리스트 뷰의 하단으로 스크롤 할 때 1000.0 높이의 캐시가 생성되고,
            이는 다음에 사용자가 상단으로 스크롤 할 때, 이전에 캐시 된 아이템이 즉시 로드되어 보여줄 수 있습니다.
- cacheExtent 속성은 리스트 뷰의 성능을 향상시키는 데 도움이 됩니다.
   그러나 이 값이 너무 크면 리스트 뷰를 초기화할 때 시간이 오래 걸리기도 합니다.
   따라서 적절한 cacheExtent 값은 리스트 뷰의 크기와 컨텐츠 양에 따라 달라집니다.