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