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

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

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

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

ทรัพยากร Dependency

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

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

@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)
            }
        }
    }
}
LazyListSnippets.kt

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

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

ผลลัพธ์

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

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

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

แสดงรายการหรือตารางกริด

รายการและตารางกริดช่วยให้แอปแสดงคอลเล็กชันในรูปแบบที่ดึงดูดสายตาและใช้งานง่ายสำหรับผู้ใช้

คอลเล็กชันคู่มือฉบับย่อ

แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

คอลเล็กชันคู่มือฉบับย่อ

องค์ประกอบพื้นฐาน (คอลเล็กชันวิดีโอ)

ชุดวิดีโอนี้จะแนะนำ Compose API ต่างๆ โดยแสดงสิ่งที่มีให้ใช้งานและวิธีใช้อย่างรวดเร็ว

คอลเล็กชันคู่มือฉบับย่อ

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

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

ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น