LazyColumn ใน Jetpack Compose — คืออะไร คุณสมบัติ และวิธีการทำงาน

LazyColumn ใน Jetpack Compose คืออะไร

LazyColumn เป็นฟังก์ชัน composable ที่ใช้รายการแนวตั้งที่เลื่อนได้พร้อมการโหลดแบบขี้เกียจ แตกต่างจาก Column ที่แสดงผลองค์ประกอบย่อยทั้งหมดพร้อมกัน LazyColumn จะสร้างเฉพาะองค์ประกอบที่อยู่ในพื้นที่มองเห็นเท่านั้น

กลไกการโหลดแบบขี้เกียจใน LazyColumn ขึ้นอยู่กับการนำองค์ประกอบกลับมาใช้ใหม่: เมื่อองค์ประกอบถูกซ่อนระหว่างการเลื่อน องค์ประกอบและเลย์เอาต์ของมันสามารถนำกลับมาใช้ใหม่สำหรับองค์ประกอบใหม่ที่แสดง ซึ่งช่วยประหยัดหน่วยความจำและเวลา CPU โดยเฉพาะในรายการยาว

ตาม Android Developers Blog, 2024 LazyColumn สามารถจัดการรายการที่มีองค์ประกอบนับหมื่นได้อย่างมีประสิทธิภาพโดยไม่ทำให้ประสิทธิภาพลดลงอย่างมีนัยสำคัญ แต่ละองค์ประกอบใน LazyColumn มีคีย์ (key) ที่ช่วยให้ Compose ระบุและรักษาสถานะขององค์ประกอบเมื่อรายการเปลี่ยนแปลง

ลายเซ็นพื้นฐานของ LazyColumn

LazyColumn รับพารามิเตอร์ modifier, state, contentPadding, reverseLayout, verticalArrangement และ horizontalAlignment เนื้อหาถูกกำหนดในบล็อก lambda ผ่านฟังก์ชัน DSL items และ item

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "รายการ $item")
        }
    }
}

พารามิเตอร์ของ LazyColumn: items และ item

บล็อก DSL ของ LazyColumn มีฟังก์ชัน items และ item สำหรับเพิ่มเนื้อหา items รับชุดข้อมูล คีย์ และฟังก์ชันโรงงานเพื่อสร้างองค์ประกอบ item เพิ่มองค์ประกอบคงที่เดี่ยวลงในรายการ

itemsIndexed เป็นรูปแบบหนึ่งของ items ที่ส่งดัชนีองค์ประกอบนอกเหนือจากข้อมูล ซึ่งมีประโยชน์เมื่อคุณต้องการทราบตำแหน่งขององค์ประกอบโดยไม่ต้องคำนวณแยกต่างหาก items(size) รับเฉพาะจำนวนองค์ประกอบและโรงงานโดยไม่ผูกกับชุดข้อมูล

พารามิเตอร์ key ใน items ระบุแต่ละองค์ประกอบโดยเฉพาะ ตาม Material Design Guidelines, 2025 คีย์ช่วยปรับปรุงประสิทธิภาพเมื่ออัปเดตและเคลื่อนไหวองค์ประกอบ เนื่องจาก Compose สามารถติดตามการเคลื่อนไหวหรือการเปลี่ยนแปลงขององค์ประกอบเฉพาะด้วยคีย์ของมัน

ตัวอย่างกับประเภทองค์ประกอบที่แตกต่างกัน

ฟังก์ชัน items ที่มี contentType ช่วยให้ LazyColumn เพิ่มประสิทธิภาพการนำองค์ประกอบประเภทต่าง ๆ กลับมาใช้ใหม่ ในตัวอย่างด้านล่างนี้ มีการใช้หัวข้อส่วนและแถวปกติในรายการเดียว

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "หัวข้อ",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "แถว $item")
        }
    }
}

LazyListState และการจัดการการเลื่อน

LazyListState เป็นออบเจกต์สถานะของ LazyColumn ที่ติดตามตำแหน่งการเลื่อนปัจจุบัน องค์ประกอบที่มองเห็นแรก และออฟเซ็ต สามารถสร้างได้ผ่าน rememberLazyListState() และส่งต่อไปยังพารามิเตอร์ state ของ LazyColumn

LazyListState มีเมธอด animateScrollToItem และ scrollToItem สำหรับการเลื่อนโดยโปรแกรมไปยังองค์ประกอบเฉพาะ animateScrollToItem สร้างแอนิเมชันการเลื่อนที่ราบรื่น ในขณะที่ scrollToItem เลื่อนทันที ทั้งสองเมธอดต้องการการเรียกภายใน coroutine ใน CompositionContext

ตาม Android Developers, 2024 LazyListState ยังมี layoutInfo ซึ่งให้ข้อมูลเกี่ยวกับองค์ประกอบที่มองเห็น — ดัชนี ออฟเซ็ต และขนาดของมัน ซึ่งมีประโยชน์สำหรับการใช้งานวิเคราะห์ การติดตามการดู หรือการเลื่อนแบบไม่สิ้นสุด

ตัวอย่างการเลื่อนโดยโปรแกรม

ในตัวอย่างนี้ LazyColumn ถูกควบคุมผ่าน LazyListState ปุ่มจะเลื่อนรายการไปยังองค์ประกอบที่มีดัชนี 50 ด้วยแอนิเมชันที่ราบรื่น

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("เลื่อนไปที่ 50")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "รายการ $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

การเพิ่มประสิทธิภาพ LazyColumn

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

contentType บอก LazyColumn ว่าองค์ประกอบใดมีประเภทเลย์เอาต์เดียวกัน เมื่อสององค์ประกอบที่มี contentType เดียวกันเข้าสู่พูลรีไซเคิล LazyColumn สามารถนำเลย์เอาต์ของพวกมันกลับมาใช้ใหม่ได้โดยไม่ต้องประกอบใหม่ ตาม Android Developers Blog, 2024 contentType ช่วยปรับปรุงประสิทธิภาพ 30–50% ในรายการที่มีประเภทองค์ประกอบแตกต่างกัน

สำหรับ LazyColumn การหลีกเลี่ยงพารามิเตอร์ที่ไม่เสถียรในฟังก์ชันโรงงานก็สำคัญเช่นกัน ทุกครั้งที่พารามิเตอร์องค์ประกอบเปลี่ยนแปลง Compose จะประกอบองค์ประกอบนั้นใหม่ การใช้ remember และ derivedStateOf สำหรับค่าที่เสถียรช่วยลดจำนวนการประกอบใหม่

ตารางปัจจัยประสิทธิภาพ

Sticky headers และส่วนใน LazyColumn

stickyHeader เป็นฟังก์ชัน DSL ของ LazyColumn ที่ยึดหัวข้อส่วนไว้ที่ด้านบนของรายการเมื่อเลื่อน เมื่อส่วนถัดไปถึงด้านบน หัวข้อของมันจะแทนที่หัวข้อปัจจุบัน พฤติกรรมนี้คุ้นเคยสำหรับผู้ใช้จากรายชื่อผู้ติดต่อและปฏิทิน

stickyHeader รับคีย์และฟังก์ชันโรงงาน คล้ายกับ item แตกต่างจาก item ทั่วไป ตรงที่ stickyHeader ยังคงมองเห็นได้ขณะเลื่อนผ่านเนื้อหาของส่วนของมัน เมื่อส่วนถูกเลื่อนจนหมด หัวข้อของส่วนถัดไปจะดันหัวข้อก่อนหน้าออกไป

ตาม Material Design Guidelines, 2025 sticky header ช่วยปรับปรุงการนำทางในรายการยาวและลดภาระทางปัญญาของผู้ใช้ ในการใช้ sticky header เพียงห่อหัวข้อส่วนใน stickyHeader ในตำแหน่งที่ถูกต้องสัมพันธ์กับองค์ประกอบ items

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}