สร้างตารางกริดที่เลื่อนได้

คุณจัดการชุดข้อมูลขนาดใหญ่และเนื้อหาแบบไดนามิกได้ด้วยตารางกริดแบบ 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)
        }
    }
}
LazyListSnippets.kt

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

  • คอมโพสิเบิล 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 แต่ละคอลัมน์

ผลลัพธ์

รูปที่ 1 ตารางกริดแนวนอนที่เลื่อนได้โดยใช้ LazyHorizontalGrid

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

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

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

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

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