Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การจัดการสถานะรายการ

รายการที่เลื่อนได้ใน Jetpack Compose เช่น LazyColumn และ LazyRow จะแสดงข้อมูลจำนวนมากได้อย่างมีประสิทธิภาพ อย่างไรก็ตาม การเปลี่ยนแปลงการกำหนดค่า เช่น การหมุนอุปกรณ์หรือการพับ/กางอุปกรณ์พับได้ อาจรีเซ็ต สถานะของรายการ ทำให้ผู้ใช้ต้องเลื่อนไปยังตำแหน่งก่อนหน้าอีกครั้ง

แนวทางปฏิบัติแนะนำ

รายการที่เลื่อนได้ควรคงสถานะไว้ โดยเฉพาะตำแหน่งการเลื่อน และสถานะขององค์ประกอบรายการแต่ละรายการ (เช่น ช่องป้อนข้อความ) ในระหว่างการเปลี่ยนแปลงการกำหนดค่าทั้งหมดเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น

ส่วนผสม

rememberLazyListState(): สร้างและจดจำ LazyListState ที่ใช้เพื่อควบคุมและสังเกตตำแหน่งการเลื่อนของรายการ โดยจะ คงอยู่โดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงการกำหนดค่า
rememberSaveable: จดจำค่าสถานะในการเปลี่ยนแปลงการกำหนดค่า ซึ่งมีประโยชน์ในการรักษาสถานะขององค์ประกอบรายการแต่ละรายการ (เช่น อินพุตของช่องข้อความ)

ขั้นตอน

ใน Jetpack Compose ระบบจะจัดการการรักษาตำแหน่งการเลื่อนของรายการ โดยอัตโนมัติเมื่อคุณใช้สถานะการเลื่อน หากต้องการรักษาสถานะขององค์ประกอบรายการที่ซับซ้อนและเป็นรายบุคคล (เช่น TextFieldอินพุต) ให้ใช้ rememberSaveable

1. เก็บรักษาสถานะการเลื่อนรายการ

หากต้องการบันทึกและกู้คืนตำแหน่งการเลื่อนของรายการในการเปลี่ยนแปลงการกำหนดค่า ให้สร้าง LazyListState โดยใช้ rememberLazyListState() และส่ง เป็นพารามิเตอร์ state ของรายการที่เลื่อนได้ เช่น LazyColumn

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") }
        )
    }
}AdaptiveAppCookbook.kt

ผลลัพธ์

ตอนนี้รายการที่เลื่อนได้จะกู้คืนตำแหน่งการเลื่อนและสถานะของ ทุกองค์ประกอบในรายการได้แล้ว