Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

รายการที่เลื่อนได้ใน 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

ผลลัพธ์

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