Grid เป็น API ของ Jetpack Compose
ที่ช่วยให้คุณติดตั้งใช้งานเลย์เอาต์แบบ 2 มิติได้อย่างยืดหยุ่น
API นี้ช่วยให้คุณแสดงรายการในเลย์เอาต์แบบหลายคอลัมน์
หรือหลายแถวที่ปรับให้เข้ากับขนาดคอนเทนเนอร์ที่มีอยู่ได้
Grid
Grid แตกต่างจาก Composable ที่คล้ายกันอย่างไร
Compose มีคอมโพเนนต์ที่คล้ายกันอยู่แล้ว เช่น LazyVerticalGrid
โดยส่วนประกอบเหล่านี้มีไว้สำหรับการแสดงภาพชุดข้อมูลขนาดใหญ่ที่เป็นเนื้อหาเดียวกันเป็นหลัก เช่น การแสดงแคตตาล็อกเนื้อหาในแอปวิดีโอสตรีมมิง
ส่วนประกอบเหล่านี้ไม่ได้ออกแบบมา
สำหรับเลย์เอาต์โครงสร้างของหน้าจอหรือคอมโพเนนต์ที่ซับซ้อน
นอกจากนี้ คุณยังใช้เลย์เอาต์ 2 มิติได้ด้วย
โดยการรวม Composable หลายรายการของ Row และ Column
อย่างไรก็ตาม วิธีนี้มีข้อเสียบางประการ
เช่น ลำดับชั้นที่ซับซ้อนและความยากในการปรับตัว
ตารางต่อไปนี้แสดงภาพรวม ของเลย์เอาต์ที่เหมาะกับแต่ละ API
| ส่วนประกอบ | วัตถุประสงค์ |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
การแสดงภาพชุดข้อมูลขนาดใหญ่ที่เป็นเนื้อหาเดียวกันซึ่งต้องใช้การโหลดแบบ Lazy Loading |
Row, Column, FlexBox |
เลย์เอาต์แบบมิติเดียว |
Grid |
เลย์เอาต์แบบ 2 มิติ |
คำศัพท์
ทำความคุ้นเคยกับคำศัพท์ต่อไปนี้
เพื่อทำความเข้าใจวิธีการทำงานของ Grid
เส้นตารางกริด
ตารางประกอบด้วยเส้นที่วิ่งในแนวนอนและแนวตั้ง หากตารางมี 3 แถว ก็จะมีเส้นแนวนอน 4 เส้น รวมถึงเส้นที่อยู่หลังแถวสุดท้าย ในรูปภาพต่อไปนี้ เส้นประแต่ละเส้นแสดงถึงเส้นตาราง
แทร็กตารางกริด
แทร็กกริดคือพื้นที่ระหว่างเส้นกริด 2 เส้น แทร็กแถวอยู่ระหว่างเส้นแนวนอน 2 เส้น และแทร็กคอลัมน์อยู่ระหว่างเส้นแนวตั้ง 2 เส้น หากต้องการกำหนดขนาดของแทร็กเหล่านี้ ให้กำหนดขนาดเมื่อสร้างตารางกริด
เส้นตาราง
เซลล์กริดคือจุดตัดของแทร็กแถวและคอลัมน์
พื้นที่ตารางกริด
พื้นที่ตารางกริดประกอบด้วยเซลล์ตารางกริดหลายเซลล์ คุณกำหนดพื้นที่ตารางกริดได้โดยทำให้รายการขยายหลายแทร็ก
ช่องว่างของตารางกริด
ช่องว่างของกริดคือช่องว่างระหว่างแทร็กกริด คุณวางองค์ประกอบ UI ในช่องว่างไม่ได้ แต่สามารถขยายองค์ประกอบ UI ให้ครอบคลุมช่องว่างได้
