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

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

Danh sách có thể cuộn trong Jetpack Compose, chẳng hạn như LazyColumn và LazyRow, có thể hiển thị lượng lớn dữ liệu một cách hiệu quả. Tuy nhiên, thay đổi về cấu hình, chẳng hạn như việc xoay thiết bị hoặc gập/mở thiết bị gập, có thể đặt lại trạng thái của danh sách, buộc người dùng phải cuộn về lại 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 dạng văn bản) trong tất 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ớ LazyListState dùng để kiểm soát và quan sát vị trí cuộn của danh sách. Trạng thái này tự động duy trì khi có thay đổi về cấu hình.
  • rememberSaveable: Ghi nhớ giá trị trạng thái qua 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 (như dữ liệu đầu vào của trường văn bản).

Các bước

Trong Jetpack Compose, việc giữ nguyên vị trí cuộn của 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ử danh sách phức tạp (chẳng hạn như dữ liệu đầ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 trong các thay đổi về cấu hình, hãy tạo LazyListState bằng rememberLazyListState() và truyền tham số đó dưới dạng tham số state của danh sách có thể cuộn, chẳng hạn như LazyColumn.

Compose 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à được 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 bên 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 vào khung hiển thị, trạng thái của mục sẽ được khôi phục.

Dưới đây là 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à 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ó thể khôi phục 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