① 배운 것
안드로이드에서 앱을 업그레이드하면 스플래시에서 안넘어간다는 이슈가 발생. 아래와 같이 해결함.
안드로이드 - allowBackup, fullBackupContent
스크롤 위치
• extentBefore: 현재 스크롤 위치까지의 거리(뷰포트의 시작점에서).
• extentAfter: 현재 스크롤 위치에서 남은 거리(뷰포트의 끝점까지).
리스트뷰에 아이템을 provider로 관리하고 ..
맨 위까지 스크롤 하고 새 아이템을 새 아이템을 리스트뷰 앞에 넣으면 새 아이템이 보임( 원래 아이템은 새 아이템 밑에 그려짐)
맨 밑까지 스크롤 하고 새 아이템을 리스트뷰 뒤에 넣으면 원래 마지막 스크롤 위치 아이템이 보임 ( 새 아이템은 그 밑에 그려짐)
-> 이 현상에 대해 지피티는 다음과 같이 말함
Flutter ListView: 새로운 아이템 추가 시 스크롤 동작 이해하기
Flutter 애플리케이션에서 ListView를 사용할 때, 새로운 아이템이 리스트에 추가될 때의 스크롤 동작은 중요한 요소입니다. 이 글에서는 새로운 아이템이 리스트에 추가될 때 스크롤 위치가 어떻게 유지되는지, 그리고 왜 새로운 아이템이 자동으로 보이지 않을 수 있는지에 대해 설명하겠습니다.
내가 겪은 상황
Flutter 애플리케이션에서 ListView를 사용해 리스트를 구현하였습니다. 다음 두 가지 상황을 테스트했습니다:
-
아이템을 리스트의 맨 위에 추가:
state = [4, 5, ...ref.read(providerTest)];새로운 아이템 4와 5를 리스트의 맨 앞에 추가했습니다.
-
아이템을 리스트의 맨 아래에 추가:
state = [...ref.read(providerTest), 4, 5];새로운 아이템 4와 5를 리스트의 맨 끝에 추가했습니다.
첫 번째 상황에서는 새로운 아이템이 바로 보였지만, 두 번째 상황에서는 새로운 아이템이 보이지 않고 기존 아이템이 보이는 문제가 있었습니다. 왜 이런 현상이 발생하는지 궁금했습니다.
스크롤 동작의 원리
-
아이템을 리스트의 맨 위에 추가할 때:
- 새로운 아이템을 리스트의 맨 앞에 추가하면, 새로운 아이템이 리스트의 첫 번째 항목이 됩니다.
- Flutter는 기본적으로 현재 스크롤 위치를 유지하려고 하지만, 스크롤이 맨 위에 있을 때 새로운 항목이 추가되면 사용자가 맨 위 항목을 보고 있으므로, 추가된 항목이 바로 보입니다.
-
아이템을 리스트의 맨 아래에 추가할 때:
- 새로운 아이템을 리스트의 맨 끝에 추가하면, 새로운 아이템이 리스트의 마지막 항목이 됩니다.
- Flutter는 현재 스크롤 위치를 유지하려고 합니다. 리스트의 전체 높이가 변하더라도, 현재 스크롤 위치를 기준으로 오프셋을 유지하려고 하므로, 새로운 아이템이 화면에 자동으로 보이지 않을 수 있습니다.
스크롤 동작이 달라지는 이유
-
리스트 뷰의 구조:
ListView는 현재 스크롤 위치를 기준으로 리스트를 다시 빌드합니다. 새로운 아이템이 추가될 때, 특히 리스트의 전체 높이가 변할 경우, 상대적인 스크롤 위치가 변경될 수 있습니다.
-
상태 관리:
- Flutter는 상태가 변경될 때 현재 스크롤 위치를 자동으로 관리하려고 합니다. 아이템을 맨 위에 추가하면 상대적인 스크롤 위치가 변하고, 맨 아래에 추가하면 현재 스크롤 위치를 유지하려고 합니다.
-
스크롤 위치 유지 문제:
- 새로운 아이템이 추가되면, 리스트의 전체 높이가 변합니다. 하지만 Flutter는 현재 스크롤 위치를 유지하려고 하기 때문에, 새로운 아이템이 하단에 추가되었을 때 화면에 보이지 않을 수 있습니다.
해결 방법
이 문제를 해결하기 위해서는 명시적으로 스크롤 위치를 조정해야 합니다. 새로운 아이템이 추가된 후 스크롤을 리스트의 맨 아래로 이동시키기 위해 ScrollController를 사용할 수 있습니다.
결론
- 아이템을 리스트의 맨 위에 추가할 때: 새로운 아이템이 리스트의 최상단에 위치하면, 상대적인 스크롤 위치가 변할 수 있습니다. 따라서 사용자가 맨 위를 보고 있다면 새로운 아이템이 바로 보입니다.
- 아이템을 리스트의 맨 아래에 추가할 때: 새로운 아이템이 리스트의 맨 끝에 위치하면, 사용자가 현재 보고 있는 스크롤 위치를 유지하려고 하지만, 자동으로 새로운 아이템이 보이지 않을 수 있습니다. 이를 해결하기 위해 명시적으로 스크롤을 조정해야 합니다.
이 글이 Flutter의 ListView 사용 시 스크롤 동작에 대한 이해를 높이는 데 도움이 되길 바랍니다. 추가적인 질문이 있으면 언제든지 댓글로 남겨주세요!
② 회고 (restropective)
난 마음이 급하면 뭔가 멘붕이되는경향이있다.... 허허
