Đặt thuộc tính mặt hàng

Mặc dù cấu hình Grid xác định cấu trúc tổng thể, nhưng bạn sử dụng đối tượng sửa đổi gridItem để kiểm soát vị trí, khoảng cách và căn chỉnh của các mục trong cấu trúc đó.

Đặt vị trí của mục

Đặt một mục vào một ô hoặc đường dẫn cụ thể bằng các tham số row và column.

Các tham số row và column chỉ định chỉ mục hàng và cột mà mục được đặt vào. Chỉ mục của bản nhạc bắt đầu từ 1. Chỉ định row hoặc column (không phải cả hai) sẽ đặt mục vào khoảng trống có sẵn tiếp theo trong bản nhạc đó. Việc chỉ định cả hai sẽ đặt mục vào ô đó.

Sử dụng một số nguyên dương để chỉ định chỉ mục của bản nhạc từ đầu. Ví dụ: để đặt một mục ở hàng và cột đầu tiên, hãy dùng gridItem(row = 1, column = 1).

Sử dụng số nguyên âm để chỉ định bản nhạc tương ứng với vị trí cuối. Ví dụ: để đặt một mục ở hàng và cột áp chót, hãy dùng gridItem(row = -2, column = -2).

Trong ví dụ sau, Thẻ #2 được đặt ở hàng thứ hai và cột thứ hai. Thẻ #3 được chỉ định cho hàng cuối cùng (được lập chỉ mục theo -1), trong đó thẻ này sẽ tự động chiếm cột có sẵn đầu tiên trong bản nhạc đó (Hình 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

Trải rộng hàng và cột

Sử dụng các tham số rowSpan và columnSpan để trải rộng một mục trên nhiều ô. Bạn có thể đặt một phần tử trên giao diện người dùng vào một vùng lưới. Đây là vùng bao gồm một số ô lưới. Đối tượng sửa đổi gridItem cho phép bạn chỉ định vùng lưới bằng các tham số rowSpan và columnSpan. Trong ví dụ sau, Thẻ #1 được đặt trong vùng gồm 2 hàng và 2 cột (Hình 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

Đặt chế độ căn chỉnh trong vùng lưới

Bạn có thể đặt căn chỉnh của phần tử trên giao diện người dùng trong một vùng lưới bằng cách chỉ định phần tử đó trong tham số alignment của thành phần sửa đổi gridItem. Trong ví dụ sau, #1 được đặt ở giữa vùng lưới bao gồm 2 cột và 2 hàng.

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

Vị trí tự động kết hợp với các mục được đặt

Một phần tử trên giao diện người dùng trong Grid không có quy cách vị trí sẽ được tự động đặt. Ví dụ này cho thấy cách bạn có thể kết hợp các phần tử được đặt tự động và các phần tử trên giao diện người dùng có ô lưới được chỉ định. Thẻ #2 và thẻ #4 là các ô lưới được chỉ định, còn các mục khác được đặt tự động.

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