Quản lý trạng thái danh sách

Biểu tượng xếp hạng 3 sao

Các danh sách có thể cuộn trong Jetpack Compose (chẳng hạn như LazyColumn và LazyRow) có thể hiển thị hiệu quả một lượng lớn dữ liệu. Tuy nhiên, các thay đổi về cấu hình, chẳng hạn như việc xoay thiết bị hoặc đóng/mở thiết bị có thể gập lại, có thể đặt lại trạng thái của danh sách, buộc người dùng phải cuộn lại về vị trí trước đó.

Các phương pháp hay nhất

Danh sách có thể cuộn phải giữ nguyên trạng thái (cụ thể là vị trí cuộn) và trạng thái của từng phần tử trong danh sách (chẳng hạn như dữ liệu đầu vào văn bản) trong tất cả các thay đổi về cấu hình để mang lại trải nghiệm liền mạch cho người dùng.

Nguyên liệu

  • rememberLazyListState(): Tạo và ghi nhớ một LazyListState dùng để kiểm soát và theo dõi vị trí cuộn của danh sách. Nó tự động duy trì trong các thay đổi về cấu hình.
  • rememberSaveable: Ghi nhớ giá trị trạng thái khi có các thay đổi về cấu hình, hữu ích cho việc duy trì trạng thái của từng phần tử trong danh sách (chẳng hạn như nội dung nhập của trường văn bản).

Các bước

Trong Jetpack Compose, việc duy trì vị trí cuộn của một danh sách sẽ được xử lý tự động khi bạn sử dụng trạng thái cuộn. Để giữ nguyên trạng thái của từng phần tử phức tạp trong danh sách (chẳng hạn như đầu vào TextField), hãy sử dụng rememberSaveable.

1. Duy trì trạng thái cuộn danh sách

Để lưu và khôi phục vị trí cuộn của danh sách khi có các thay đổi về cấu hình, hãy tạo một LazyListState bằng rememberLazyListState() và truyền đối tượng này làm tham số state của danh sách có thể cuộn, chẳng hạn như LazyColumn.

Compose sẽ tự động duy trì vị trí cuộn cho bạn.

2. Duy trì trạng thái của từng phần tử trong danh sách

Nếu danh sách của bạn chứa các phần tử có trạng thái (ví dụ: các mục có trường văn bản), thì trạng thái của các phần tử riêng lẻ đó có thể bị mất khi chúng được cuộn ra khỏi màn hình và tái chế, hoặc trong quá trình thay đổi cấu hình.

Để giữ nguyên trạng thái của từng phần tử, hãy sử dụng rememberSaveable trong phạm vi mục danh sách. Điều này đảm bảo rằng khi mục được kết hợp lại hoặc cuộn trở lại chế độ xem, trạng thái của mục sẽ được khôi phục.

Sau đây là một cách triển khai hoàn chỉnh, có thể biên dịch, minh hoạ cả trạng thái cuộn và việc khôi phục trạng thái mục:

// 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") }
        )
    }
}

Kết quả

Giờ đây, danh sách có thể cuộn của bạn đã có thể khôi phục lại vị trí cuộn và trạng thái của mọi phần tử trong danh sách.

Tài nguyên khác