ตั้งค่าพร็อพเพอร์ตี้ของคอนเทนเนอร์

คุณสามารถกำหนดค่าคอนเทนเนอร์ Grid เพื่อสร้างเลย์เอาต์ที่ยืดหยุ่น ซึ่งตอบสนองต่อขนาดหน้าจอและประเภทเนื้อหาต่างๆ ได้ หน้านี้จะอธิบายวิธีการทำสิ่งต่อไปนี้

• กำหนดตารางกริด: ตั้งค่าโครงสร้างพื้นฐานของแถวและคอลัมน์
• วางรายการในตารางกริด: ทำความเข้าใจวิธีวางรายการในเซลล์ตารางกริดและวิธีเปลี่ยนทิศทางการไหล
• จัดการการกำหนดขนาดแทร็ก: ใช้การกำหนดขนาดแบบคงที่ เศษส่วน ยืดหยุ่น และโดยธรรมชาติเพื่อกำหนดขนาดแทร็ก
• กำหนดช่องว่าง: จัดการ "ช่องว่าง" ระหว่างแถวและคอลัมน์

กำหนดตารางกริด

ตารางกริดประกอบด้วยคอลัมน์และแถว Composable Grid มีพารามิเตอร์ config ที่ยอมรับ Lambda เพื่อกำหนดคอลัมน์และแถว ภายใน GridConfigurationScope ตัวอย่างต่อไปนี้กำหนดตารางกริดที่มี 3 แถวและ 2 คอลัมน์ แต่ละรายการมีขนาดคงที่ที่ระบุใน Dp

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

วางรายการในตารางกริด

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

ในตัวอย่างต่อไปนี้ กริดมีเซลล์กริด 6 เซลล์ และวางการ์ดลงในแต่ละเซลล์ (รูปที่ 1) แต่ละเซลล์ในตารางมีขนาด 160dp x 90dp ทำให้ตารางทั้งหมดมีขนาด 320dp x 270dp

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

หากต้องการเปลี่ยนลักษณะการทำงานเริ่มต้นนี้เป็นการป้อนข้อมูลตามคอลัมน์ ให้ตั้งค่าพร็อพเพอร์ตี้ flow เป็น GridFlow.Column

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

จัดการการปรับขนาดแทร็ก

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

• คงที่ (Dp): จัดสรรขนาดที่เฉพาะเจาะจง (เช่น column(180.dp))
• เศษส่วน (Float): จัดสรรเปอร์เซ็นต์ของพื้นที่ว่างทั้งหมด จาก 0.0f ถึง 1.0f (เช่น row(0.5f) สำหรับ 50%)
• ยืดหยุ่น (Fr): จัดสรรพื้นที่ที่เหลือตามสัดส่วนหลังจากคำนวณแทร็กแบบคงที่ และแบบเศษส่วนแล้ว เช่น หากตั้งค่า 2 แถวเป็น 1.fr และ 3.fr แถวหลังจะได้รับความสูงที่เหลือ 75%
• Intrinsic: ปรับขนาดแทร็กตามเนื้อหาภายใน ดูข้อมูลเพิ่มเติมได้ที่กำหนดขนาดแทร็กตารางโดยธรรมชาติ

ตัวอย่างต่อไปนี้ใช้ตัวเลือกการกำหนดขนาดแทร็กต่างๆ เพื่อกำหนดความสูงของแถว

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

กำหนดขนาดแทร็กตารางกริดโดยค่าเริ่มต้น

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

• GridTrackSize.MaxContent: ใช้ขนาดโดยธรรมชาติสูงสุดของเนื้อหา (เช่น ความกว้างจะกำหนดตามความยาวเต็มของข้อความ ในบล็อกข้อความที่ไม่มีการตัดคำ)
• GridTrackSize.MinContent: ใช้ขนาดโดยเนื้อแท้ขั้นต่ำของเนื้อหา (เช่น ความกว้างจะกำหนดโดยคำที่ยาวที่สุดในบล็อกข้อความ)
• GridTrackSize.Auto: ใช้ขนาดที่ยืดหยุ่นสำหรับแทร็ก ที่ปรับตามพื้นที่ว่างที่มี โดยจะทำงานเหมือน MaxContent โดยค่าเริ่มต้น แต่จะย่อและตัดเนื้อหาให้พอดีกับคอนเทนเนอร์ระดับบนสุด

ตัวอย่างต่อไปนี้แสดงข้อความ 2 รายการเคียงข้างกัน ระบบจะกำหนดขนาดคอลัมน์สำหรับข้อความแรก ตามความกว้างขั้นต่ำที่จำเป็นในการแสดงข้อความ และความกว้างของคอลัมน์ที่ 2 จะขึ้นอยู่กับความกว้างสูงสุดที่จำเป็นของข้อความ

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

กำหนดช่องว่างระหว่างแถวและคอลัมน์

เมื่อปรับขนาดแทร็กกริดแล้ว คุณจะแก้ไขช่องว่างของกริดเพื่อปรับระยะห่างระหว่างแทร็กได้ คุณระบุช่องว่างระหว่างคอลัมน์ได้ด้วยฟังก์ชัน columnGap และช่องว่างระหว่างแถวด้วย rowGap ในตัวอย่างต่อไปนี้ มี16dpช่องว่างระหว่างแต่ละแถว และ8dpช่องว่างระหว่างแต่ละคอลัมน์ (รูปที่ 5)

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

นอกจากนี้ คุณยังใช้ฟังก์ชันอำนวยความสะดวก gap เพื่อกำหนดช่องว่างที่มีขนาดคอลัมน์และแถวเท่ากัน และกำหนดขนาดคอลัมน์และช่องว่างแยกกันโดยใช้ฟังก์ชันเดียวได้ด้วย โค้ดต่อไปนี้จะเพิ่มช่องว่าง 8dp ลงในตารางกริด

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt