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

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

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

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

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

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

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

Grid จะนำองค์ประกอบ UI ในแลมบ์ดา content ไปวางไว้ในเซลล์ตารางกริด ตารางกริดจะจัดวางรายการไม่ว่าคุณจะกำหนดแถวและคอลัมน์อย่างชัดเจนหรือไม่ก็ตาม โดยค่าเริ่มต้น Grid จะพยายามวางองค์ประกอบ UI ในเซลล์ตารางกริดที่ว่างอยู่ในแถว หากทำไม่ได้ ระบบจะวางองค์ประกอบ 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

วางไพ่ 6 ใบในตารางกริดที่มี 3 แถวและ 2 คอลัมน์ — **รูปที่ 1**. การ์ด 6 ใบวางอยู่ในตารางกริดที่มี 3 แถวและ 2 คอลัมน์

หากต้องการเปลี่ยนลักษณะการทำงานเริ่มต้นนี้เป็นการเติมตามคอลัมน์, ให้ตั้งค่าพร็อพเพอร์ตี้ 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

ฟังก์ชันโฟลว์จะเปลี่ยนทิศทางเพื่อวางรายการ — **รูปที่ 2** `GridFlow.Row` (ซ้าย) และ `GridFlow.Column` (ขวา)

จัดการการกำหนดขนาดแทร็ก

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

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

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

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

ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการกำหนดขนาดแทร็กหลัก 4 รายการ — **รูปที่ 3** ความสูงของแถวที่กำหนดโดยใช้ตัวเลือกการกำหนดขนาดแทร็กหลัก 4 ตัวเลือกใน `Grid`

กำหนดขนาดแทร็กตารางกริดโดยธรรมชาติ

คุณสามารถใช้ การกำหนดขนาดโดยธรรมชาติ สำหรับ 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

ขนาดที่แท้จริงที่ระบุในคอลัมน์ — **รูปที่ 4** ขนาดโดยธรรมชาติที่ระบุในคอลัมน์

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

เมื่อกำหนดขนาดแทร็กตารางกริดแล้ว คุณสามารถแก้ไขช่องว่างตารางกริดเพื่อปรับระยะห่างระหว่างแทร็กได้ คุณสามารถระบุช่องว่างคอลัมน์ด้วยฟังก์ชัน 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

**รูปที่ 5** ช่องว่างระหว่างแถวและคอลัมน์

นอกจากนี้ คุณยังใช้ฟังก์ชันอำนวยความสะดวก 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

เริ่มใช้งาน

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