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

ผลลัพธ์

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