Flutter - 스크롤

Flutter 에는 다양한 위젯들이 있습니다.

이중에서 SingleChildScrollView, ListView를 간략히 알아 보겠습니다.

 

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

SingleChildScrollView class - widgets library - Dart API

SingleChildScrollView는 기본적인 Widget으로 스크롤이 되지 않는 상황에서 스크롤이 되도록 처리 합니다.

정말 기본적인것이기 때문에 큰 기능은 없습니다.

다만 몇몇상황에서 굉장히 유용하게 처리됩니다.

일반 상태

키보드가 열린 상태

위의 이미지와 같이 Container를 사용하게 된다면 키보드가 나온 상태에서는 화면이 가려져 버리고 키보드에 가려진 부분을 사용하지 못하게 됩니다.

SingleChildScrollView로 변경하고 컨텐츠가 스크롤 된 모습

이 부분을 SingleChildScrollView로 바꾸게 되면 속에 있는 컨텐츠를 스크롤 할 수 있습니다.

키보드가 닫아지게 된다면 스크롤된 영역이 자동으로 맞춰지게 되어 아주 편리하고 유용하게 사용 할 수 있습니다.

 

 

https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView class - widgets library - Dart API

이름에서부터 알 수 있겠지만 SingleChildScrollView는 하위 객체를 하나만 가지게 되고 ListView는 다수의 하위 객체를 가질 수 있습니다.

ListView를 일반적으로 쓰게 된다면 SingleChildScrollView와 비슷하게 사용할 수 있습니다.

 

ListView의 유용한 추가 사용방법은 다음과 같습니다.

기본사용 : SingleChildScrollView와 비슷하지만 다수의 하위 객체를 가질 수 있습니다.

builder : itemBuilder 함수에서 위젯을 반환시켜 하나의 반복되는 객체로 리스트를 구성 할 수 있습니다.

화면에 보이는 객체만 렌더링을 위해 생성하기 때문에 일반적인 사용보다 좋은 성능을 낼 수 있습니다.

separated : itemBuilder와 같지만 separatorBuilder를 추가 해 줄 수 있습니다.

아이템의 인덱스가 몇번인지 계산해서 수동으로 그려주는 귀찮은 짓을 하지 않아도 알아서 잘 처리해 줍니다.

 

builder를 사용하면 화면을 기준으로 객체가 생성/파괴 됩니다.

[1 2 3] 4 5

리스트상 1, 2, 3만 보이는 상태라면 4, 5는 아직 생성이 안된 상태이고

1 2 [3 4 5]

위와 같이 스크롤이 된다면 1, 2는 파괴되는 상태 입니다.

이떄 객체가 무엇인가(예를 들면 애니메이션 이나 시간 체크 등) 처리하는 상태라고 한다면 다시 생성된다면 문제가 될 수 있기 때문에 파괴되는 것을 막아야 합니다.

이때 사용하는 것은 KeepAlive()위젯으로 객체를 한번 감싸주기만 하고 keepAlive 상태를 true로 주면 객체가 파괴되는 상황을 막을 수 있습니다.

다만 성능문제로 객체를 파괴하는 것이기 때문에 꼭 필요한 경우가 아니라면 쓰지 않는 것이 좋을 것 같습니다.

Card위젯을 KeepAlive로 감싸고 속성 부여

다만 더 편한 방법으로 ListView속성에 addAutomaticKeepAlives 가 있습니다.