โหลดข้อมูลแบบเลื่อนเวลาโดยใช้รายการและการแบ่งหน้า

การโหลดแบบ Lazy Loading และเพจจิ้งช่วยให้คุณรองรับรายการจำนวนมาก รวมถึงรายการที่ไม่มีที่สิ้นสุดในแอปได้ด้วยการโหลดและแสดงข้อมูลทีละส่วน เทคนิคนี้ช่วยให้คุณลดเวลาในการโหลดครั้งแรกและเพิ่มประสิทธิภาพการใช้งานหน่วยความจำ ซึ่งจะช่วยเพิ่มประสิทธิภาพได้

ผลลัพธ์

วิดีโอต่อไปนี้แสดงลักษณะการทำงานที่เกิดขึ้นเมื่อรายการขนาดใหญ่ดึงข้อมูลขณะที่ผู้ใช้เลื่อนดู

ความเข้ากันได้ของเวอร์ชัน

การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า minSDK ของโปรเจ็กต์เป็นระดับ API 21 ขึ้นไป

ความสัมพันธ์

แสดงเนื้อหาแบบแบ่งหน้า

ด้วยไลบรารีเพจจิ้ง คุณสามารถโหลดและแสดงหน้าข้อมูลจากชุดข้อมูลขนาดใหญ่ที่ได้มาจากพื้นที่เก็บข้อมูลในเครื่องหรือผ่านเครือข่ายได้ ใช้โค้ดต่อไปนี้เพื่อแสดงรายการที่มีการแบ่งหน้าซึ่งแสดงแถบความคืบหน้าเพื่อระบุให้ผู้ใช้ทราบว่ากำลังดึงข้อมูลเพิ่มเติม

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

ประเด็นสำคัญเกี่ยวกับโค้ด

  • LazyColumn: Composable นี้ใช้เพื่อแสดงรายการ (ข้อความ) จำนวนมากอย่างมีประสิทธิภาพ โดยจะแสดงผลเฉพาะรายการที่มองเห็นได้บนหน้าจอเท่านั้น จึงช่วยประหยัดทรัพยากรและหน่วยความจำ
  • ออบเจ็กต์ lazyPagingItems จะจัดการการโหลดและการแสดงข้อมูลที่มีการแบ่งหน้าภายใน LazyColumn อย่างมีประสิทธิภาพ โดยจะส่ง LazyPagingItems ไปยัง items ใน Composable LazyColumn
  • MessageRow(message: Text) มีหน้าที่แสดงผลรายการข้อความแต่ละรายการ โดยอาจแสดงผู้ส่งและข้อความภายใน Card
  • MessagePlaceholder() จะแสดงตัวยึดตำแหน่งภาพ (ภาพหมุนขณะโหลด) ขณะที่ดึงข้อมูลข้อความจริง ซึ่งจะช่วยปรับปรุงประสบการณ์ของผู้ใช้

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้ว ซึ่งครอบคลุมเป้าหมายการพัฒนาสำหรับนักพัฒนาแอป Android ที่กว้างขึ้น ดังนี้

รายการและตารางกริดช่วยให้แอปแสดงคอลเล็กชันในรูปแบบที่ดึงดูดสายตาและผู้ใช้ดูได้ง่าย
คอลเล็กชันคู่มือฉบับย่อ
ดูว่าฟังก์ชันที่ประกอบกันได้ช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยงามตามระบบการออกแบบ Material Design ได้อย่างง่ายดายได้อย่างไร
คอลเล็กชันคู่มือฉบับย่อ
วิดีโอชุดนี้จะแนะนำ Compose API ต่างๆ โดยแสดงให้เห็นอย่างรวดเร็วว่ามีอะไรบ้างและวิธีใช้
คอลเล็กชันคู่มือฉบับย่อ

หากมีคำถามหรือความคิดเห็น

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