LazyColumn 및 LazyRow과 같은 Jetpack Compose의 스크롤 가능한 목록은 대량의 데이터를 효율적으로 표시할 수 있습니다. 그러나 기기 회전이나 폴더블 기기 접기/펼치기와 같은 구성 변경으로 인해 목록의 상태가 재설정되어 사용자가 이전 위치로 다시 스크롤해야 할 수 있습니다.
권장사항
스크롤 가능한 목록은 원활한 사용자 환경을 제공하기 위해 모든 구성 변경 중에 상태(특히 스크롤 위치)와 개별 목록 요소(예: 텍스트 입력)의 상태를 유지해야 합니다.
재료
rememberLazyListState(): 목록의 스크롤 위치를 제어하고 관찰하는 데 사용되는LazyListState를 만들고 기억합니다. 구성 변경 간에 자동으로 유지됩니다.rememberSaveable: 구성 변경 전반에서 상태 값을 기억하며, 텍스트 필드 입력과 같은 개별 목록 요소 상태를 보존하는 데 유용합니다.
단계
Jetpack Compose에서는 스크롤 상태를 사용할 때 목록의 스크롤 위치 유지가 자동으로 처리됩니다. 개별적이고 복잡한 목록 요소 (예: TextField 입력)의 상태를 유지하려면 rememberSaveable를 사용합니다.
1. 목록 스크롤 상태 유지
구성 변경사항 전반에서 목록의 스크롤 위치를 저장하고 복원하려면 rememberLazyListState()를 사용하여 LazyListState를 만들고 이를 스크롤 가능한 목록(예: LazyColumn)의 state 매개변수로 전달합니다.
Compose는 스크롤 위치를 자동으로 유지합니다.
2. 개별 목록 요소 상태 보존
목록에 스테이트풀(Stateful) 요소(예: 텍스트 필드가 있는 항목)가 포함된 경우, 이러한 개별 요소의 상태는 화면 밖으로 스크롤되어 재활용되거나 구성이 변경될 때 손실될 수 있습니다.
개별 요소 상태를 유지하려면 목록 항목 범위 내에서 rememberSaveable를 사용합니다. 이렇게 하면 항목이 재구성되거나 다시 스크롤되어 뷰에 표시될 때 상태가 복원됩니다.
다음은 스크롤 상태와 항목 상태 복원을 모두 보여주는 컴파일 가능한 전체 구현입니다.
// Scroll state is automatically saved and restored by rememberLazyListState val listState = rememberLazyListState() LazyColumn(state = listState) { items(100) { index -> // Use rememberSaveable to preserve individual item state (e.g., text input) var text by rememberSaveable { mutableStateOf("") } TextField( value = text, onValueChange = { text = it }, label = { Text("Item $index") } ) } }
결과
이제 스크롤 가능한 목록에서 스크롤 위치 및 목록에 있는 모든 요소의 상태를 복원할 수 있습니다.