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

แม้ว่าการกำหนดค่า Grid จะกำหนดโครงสร้างโดยรวม คุณต้องใช้ตัวปรับเปลี่ยน gridItem เพื่อควบคุมตำแหน่ง การขยาย และการจัดแนวของรายการภายในโครงสร้างนั้น

กำหนดตำแหน่งของรายการ

วางรายการลงในแทร็กหรือเซลล์ที่เฉพาะเจาะจงด้วยพารามิเตอร์ row และ column ดัชนีพิกัดเหมาะที่สุดสำหรับเลย์เอาต์ตารางกริดแบบตรงไปตรงมา สำหรับเลย์เอาต์ที่ใหญ่ขึ้นหรือซับซ้อนมากขึ้น ให้กำหนด พื้นที่ที่มีชื่อ แทน

พารามิเตอร์ row และ column จะระบุดัชนีแทร็กแถวและคอลัมน์ที่จะวางรายการ ดัชนีแทร็กเป็นแบบฐานหนึ่ง ซึ่งเริ่มต้นที่ 1 การระบุเฉพาะ row หรือ column (ไม่ใช่ทั้ง 2 อย่าง) จะวางรายการในพื้นที่ว่างถัดไปในแทร็กนั้น การระบุทั้ง 2 อย่างจะวางรายการลงในเซลล์นั้น

ใช้จำนวนเต็มบวกเพื่อระบุดัชนีแทร็กจากจุดเริ่มต้น เช่น หากต้องการวางรายการในแถวและคอลัมน์แรก ให้ใช้ gridItem(row = 1, column = 1)

ใช้จำนวนเต็มลบเพื่อระบุดัชนีแทร็กที่สัมพันธ์กับจุดสิ้นสุด เช่น หากต้องการวางรายการในแถวและคอลัมน์ที่ 2 จากท้ายสุด ให้ใช้ gridItem(row = -2, column = -2)

ในตัวอย่างต่อไปนี้ การ์ด #2 จะวางอยู่ในแถวที่ 2 และคอลัมน์ที่ 2 ส่วนการ์ด #3 จะกำหนดไว้ในแถวสุดท้าย (จัดทำดัชนีด้วย -1) ซึ่งจะใช้คอลัมน์แรกที่ว่างในแทร็กนั้นโดยอัตโนมัติ (รูปที่ 1)

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

รูปที่ 1 การ์ด #2 จะวางอยู่ในเซลล์ตารางกริด ในแถวที่ 2 และคอลัมน์ที่ 2 ส่วนการ์ด #3 จะวางอยู่ในคอลัมน์แรกในแถวที่ 3

ขยายแถวและคอลัมน์

ใช้พารามิเตอร์ rowSpan และ columnSpan เพื่อขยายรายการไปยังหลายเซลล์ คุณสามารถวางองค์ประกอบ UI ลงในพื้นที่ตารางกริด, ซึ่งเป็นพื้นที่ที่ประกอบด้วยเซลล์ตารางกริดหลายเซลล์ ตัวปรับเปลี่ยน gridItem ช่วยให้คุณระบุพื้นที่ตารางกริดด้วยพารามิเตอร์ rowSpan และ columnSpan ในตัวอย่างต่อไปนี้ การ์ด #1 จะวางอยู่ในพื้นที่ที่ประกอบด้วย 2 แถวและ 2 คอลัมน์ (รูปที่ 2)

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

รูปที่ 2 ส่วนการ์ด #4 จะขยาย 3 คอลัมน์

กำหนดการจัดแนวในพื้นที่ตารางกริด

คุณสามารถกำหนดการจัดแนวขององค์ประกอบ UI ในพื้นที่ตารางกริดได้โดยระบุในการจัดแนวพารามิเตอร์ของตัวปรับเปลี่ยน โดยระบุในพารามิเตอร์ alignment ของตัวปรับเปลี่ยน gridItem ในตัวอย่างต่อไปนี้ #1 จะวางอยู่ตรงกลางพื้นที่ตารางกริดที่ประกอบด้วย 2 คอลัมน์และ 2 แถว

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

รูปที่ 3 ข้อความที่มี #1 จะวางอยู่ตรงกลางพื้นที่ตารางกริดที่ประกอบด้วย 2 แถวและ 2 คอลัมน์

การวางอัตโนมัติผสมกับการวางรายการ

องค์ประกอบ UI ใน Grid ที่ไม่มีการระบุตำแหน่งจะได้รับการวางอัตโนมัติ ตัวอย่างนี้แสดงวิธีผสมองค์ประกอบที่วางอัตโนมัติและองค์ประกอบ UI ที่มีเซลล์ตารางกริดที่ระบุ การ์ด #2 และการ์ด #4 จะวางอยู่ในเซลล์ตารางกริดที่ระบุ ส่วนรายการอื่นๆ จะวางอัตโนมัติ

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

รูปที่ 4 การ์ด #3 จะวางอยู่ข้างการ์ด #1 เนื่องจากเป็นการวางอัตโนมัติ