Jetpack Compose의 스크롤 가능한 목록(예: LazyColumn 및 LazyRow)은 대량의 데이터를 효율적으로 표시할 수 있습니다. 하지만 기기 회전이나 폴더블 기기 접기/펼치기와 같은 구성 변경으로 인해 목록의 상태가 재설정되어 사용자가 이전 위치로 다시 스크롤해야 할 수 있습니다.
권장사항
스크롤 가능한 목록은 원활한 사용자 환경을 제공하기 위해 모든 구성 변경사항 중에 상태(특히 스크롤 위치)와 개별 목록 요소(예: 텍스트 입력)의 상태를 유지해야 합니다.
재료
rememberLazyListState(): 목록의 스크롤 위치를 제어하고 관찰하는 데 사용되는LazyListState를 만들고 기억합니다. 구성 변경 시 자동으로 유지됩니다.rememberSaveable: 구성 변경 시 상태 값을 기억하여 개별 목록 요소 상태 (예: 텍스트 필드 입력)를 유지하는 데 유용합니다.
단계
Jetpack Compose에서는 스크롤 상태를 사용할 때 목록의 스크롤 위치 유지가 자동으로 처리됩니다. 개별 복잡한 목록 요소 (예: TextField 입력)의 상태를 유지하려면 rememberSaveable를 사용하세요.
1. 목록 스크롤 상태 유지
구성 변경 시 목록의 스크롤 위치를 저장하고 복원하려면 rememberLazyListState()를 사용하여 LazyListState를 만들고 LazyColumn과 같은 스크롤 가능한 목록의 state 매개변수로 전달하세요.
Compose는 스크롤 위치를 자동으로 유지합니다.
2. 개별 목록 요소 상태 유지
목록에 상태 저장 요소 (예: 텍스트 필드가 있는 항목)가 포함된 경우 이러한 개별 요소의 상태는 화면 밖으로 스크롤되어 재활용되거나 구성이 변경되는 동안 손실될 수 있습니다.
개별 요소 상태를 유지하려면 목록 항목 범위 내에서 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") } ) } }
결과
이제 스크롤 가능한 목록에서 스크롤 위치 및 목록에 있는 모든 요소의 상태를 복원할 수 있습니다.