GRid

Grid เป็น Jetpack Compose API ที่ช่วยให้คุณใช้เลย์เอาต์ 2 มิติได้อย่างยืดหยุ่น API นี้ช่วยให้คุณแสดงรายการในเลย์เอาต์แบบหลายคอลัมน์หรือหลายแถวที่ปรับให้เข้ากับขนาดคอนเทนเนอร์ที่ใช้ได้

เลย์เอาต์ 2 มิติที่ยืดหยุ่นและปรับเปลี่ยนได้ด้วย Grid
รูปที่ 1 เลย์เอาต์ 2 มิติที่ยืดหยุ่นและปรับเปลี่ยนได้ด้วย Grid

Grid แตกต่างจาก Composable ที่คล้ายกันอย่างไร

Compose มีคอมโพเนนต์ที่คล้ายกันอยู่แล้ว เช่น LazyVerticalGrid คอมโพเนนต์เหล่านี้มีไว้สำหรับการแสดงข้อมูลผ่านภาพชุดข้อมูลขนาดใหญ่ที่เป็นเนื้อเดียวกันเป็นหลัก เช่น การแสดงแคตตาล็อกเนื้อหาในแอปสตรีมมิง คอมโพเนนต์เหล่านี้ไม่ได้ออกแบบมาสำหรับเลย์เอาต์โครงสร้างของหน้าจอหรือคอมโพเนนต์ที่ซับซ้อน

นอกจากนี้ คุณยังใช้เลย์เอาต์ 2 มิติได้ด้วยการรวมคอมโพสิเบิล Row และ Column หลายรายการเข้าด้วยกัน อย่างไรก็ตาม วิธีการนี้มีข้อเสียบางประการ เช่น ลำดับชั้นที่ลึกและปรับตัวได้ยาก

ตารางต่อไปนี้แสดงภาพรวมของเลย์เอาต์ที่เหมาะกับ API แต่ละรายการ

ส่วนประกอบ วัตถุประสงค์
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid การแสดงภาพชุดข้อมูลขนาดใหญ่ที่เป็นเนื้อเดียวกันซึ่งต้องใช้การโหลดแบบ Lazy Loading
Row, Column, FlexBox เลย์เอาต์แบบ 1 มิติ
Grid เลย์เอาต์ 2 มิติ

คำศัพท์

ทำความคุ้นเคยกับคำศัพท์ต่อไปนี้เพื่อทำความเข้าใจวิธีการทำงานของ Grid

เส้นตารางกริด

ตารางกริดประกอบด้วยเส้นที่พาดผ่านในแนวนอนและแนวตั้ง หากตารางกริดมี 3 แถว ก็จะมีเส้นแนวนอน 4 เส้น ซึ่งรวมถึงเส้นที่อยู่หลังแถวสุดท้ายด้วย ในรูปภาพต่อไปนี้ เส้นประแต่ละเส้นแสดงถึงเส้นตาราง

ตารางกริดประกอบด้วยเส้นแนวนอน 4 เส้นและเส้นแนวตั้ง 3 เส้น
รูปที่ 2 ตารางกริดประกอบด้วยเส้นแนวนอน 4 เส้นและเส้นแนวตั้ง 3 เส้น

แทร็กตารางกริด

แทร็กตารางกริดคือพื้นที่ระหว่างเส้นตารางกริด 2 เส้น แทร็กแถวจะอยู่ระหว่างเส้นแนวนอน 2 เส้น และแทร็กคอลัมน์จะอยู่ระหว่างเส้นแนวตั้ง 2 เส้น หากต้องการกำหนดขนาดของแทร็กเหล่านี้ ให้กำหนดขนาดเมื่อคุณสร้างตารางกริด

แทร็กตารางกริดสำหรับแถวแรก
รูปที่ 3 แทร็กตารางกริดสำหรับแถวแรก

เส้นตาราง

เซลล์ตารางกริดคือจุดตัดของแทร็กแถวและคอลัมน์

เซลล์ตารางกริดที่เป็นจุดตัดของแถวที่ 2 และคอลัมน์ที่ 2
รูปที่ 4 เซลล์ตารางกริดที่เป็นจุดตัดของแถวที่ 2 และคอลัมน์ที่ 2

พื้นที่ตารางกริด

พื้นที่ตารางกริดประกอบด้วยเซลล์ตารางกริดหลายเซลล์ คุณสามารถกำหนดพื้นที่กริดได้โดยทำให้รายการครอบคลุมหลายแทร็ก

พื้นที่ตารางกริดที่ประกอบด้วยเซลล์ตารางกริด 4 เซลล์
รูปที่ 5 พื้นที่ตารางกริดที่ประกอบด้วยเซลล์ตารางกริด 4 เซลล์

ช่องว่างของตารางกริด

ช่องว่างของตารางกริดคือรางระหว่างแทร็กตารางกริด คุณวางองค์ประกอบ UI ลงในช่องว่างไม่ได้ แต่สามารถขยายองค์ประกอบ UI ให้ครอบคลุมช่องว่างได้

ช่องว่างตารางกริดระหว่างคอลัมน์แรกและคอลัมน์ที่ 2
รูปที่ 6 ช่องว่างของตารางกริดระหว่างคอลัมน์แรกกับคอลัมน์ที่ 2