Đặ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ác mục trong cấu trúc đó.

Đặt vị trí mục

Đặt một mục vào một dải hoặc ô cụ thể bằng các tham số row và column. Chỉ mục toạ độ hoạt động hiệu quả nhất cho bố cục lưới đơn giản. Đối với bố cục lớn hơn hoặc phức tạp hơn, hãy xác định vùng được đặt tên.

Các tham số row và column chỉ định chỉ mục của hàng và cột mà mục được đặt vào. Chỉ mục bản nhạc dựa trên 1 – bắt đầu từ 1. Nếu bạn chỉ chỉ định row hoặc column (không phải cả hai), thì mục sẽ được đặt vào không gian có sẵn tiếp theo trong dải đó. 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 bản nhạc từ đầu. Ví dụ: để đặt một mục vào hàng và cột đầu tiên, hãy sử dụng gridItem(row = 1, column = 1).

Sử dụng số nguyên âm để chỉ định bản âm thanh tương ứng với phần cuối. Ví dụ: để đặt một mục vào hàng và cột thứ hai từ dưới lên, hãy sử 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 bằng -1), nơi thẻ này tự động chiếm cột đầu tiên có sẵn trong dải đó (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

Hàng và cột span

Sử dụng tham số rowSpan và columnSpan để kéo dài 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, vùng này 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 khu vực gồm hai hàng và hai 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 một 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 đối tượng sửa đổi gridItem. Trong ví dụ sau, #1 được đặt ở giữa vùng lưới gồm hai cột và hai 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ó thông số kỹ thuật về vị trí sẽ được đặt tự động. 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 với các ô lưới được chỉ định. Thẻ #2 và Thẻ #4 được đặt trong các ô lưới đã 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