คุณจัดการชุดข้อมูลขนาดใหญ่และเนื้อหาแบบไดนามิกได้ด้วยตารางกริดแบบ Lazy ซึ่งช่วยปรับปรุงประสิทธิภาพของแอป คอมโพสิชันตารางกริดแบบ Lazy ช่วยให้คุณสามารถแสดงรายการในคอนเทนเนอร์ที่เลื่อนได้ ซึ่งครอบคลุมหลายคอลัมน์หรือหลายแถว
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
เลือกการวางแนวตารางกริด
คอมโพสิเบิล LazyHorizontalGrid
และ LazyVerticalGrid
รองรับการแสดงรายการในตารางกริด ตารางกริดแนวตั้งแบบ Lazy จะแสดงรายการในคอนเทนเนอร์แบบเลื่อนในแนวตั้ง ซึ่งครอบคลุมหลายคอลัมน์ ส่วนตารางกริดแนวนอนแบบ Lazy จะทำงานในลักษณะเดียวกันบนแกนแนวนอน
สร้างตารางกริดที่เลื่อนได้
โค้ดต่อไปนี้สร้างตารางกริดแนวนอนที่เลื่อนได้โดยมี 3 คอลัมน์
@Composable fun ScrollingGrid() { val itemsList = (0..15).toList() val itemModifier = Modifier .border(1.dp, Color.Blue) .width(80.dp) .wrapContentSize() LazyHorizontalGrid( rows = GridCells.Fixed(3), horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } } }
ประเด็นสำคัญเกี่ยวกับรหัส
- คอมโพสิเบิล
LazyHorizontalGrid
จะกำหนดการวางแนวแนวนอนของตารางกริด- หากต้องการสร้างตารางกริดแนวตั้ง ให้ใช้
LazyVerticalGrid
แทน
- หากต้องการสร้างตารางกริดแนวตั้ง ให้ใช้
- พร็อพเพอร์ตี้
rows
จะระบุวิธีจัดเรียงเนื้อหาตารางกริด- สำหรับตารางกริดแนวตั้ง ให้ใช้พร็อพเพอร์ตี้
columns
เพื่อระบุการจัดเรียง
- สำหรับตารางกริดแนวตั้ง ให้ใช้พร็อพเพอร์ตี้
items(itemsList)
เพิ่มitemsList
ไปยังLazyHorizontalGrid
Lambda จะแสดงผลคอมโพสิเบิลText
สำหรับแต่ละรายการและตั้งค่าข้อความเป็นคำอธิบายของรายการitem()
จะเพิ่มรายการเดียวลงในLazyHorizontalGrid
ส่วน Lambda จะแสดงผลคอมโพสิชันText
รายการเดียวในลักษณะที่คล้ายกับitems()
GridCells.Fixed
กำหนดจำนวนแถวหรือคอลัมน์หากต้องการสร้างตารางกริดที่มีแถวมากที่สุด ให้ตั้งค่าจำนวนแถวโดยใช้
GridCells.Adaptive
ในโค้ดต่อไปนี้ ค่า
20.dp
จะระบุว่าทุกคอลัมน์มีความกว้างอย่างน้อย 20.dp และคอลัมน์ทั้งหมดมีความกว้างเท่ากัน หากหน้าจอกว้าง 88.dp จะมี 4 คอลัมน์ที่ 22.dp แต่ละคอลัมน์
ผลลัพธ์
LazyHorizontalGrid
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงรายการหรือตารางกริด
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)