Đặt thuộc tính vùng chứa

Bạn có thể xác định cấu hình vùng chứa Lưới để tạo bố cục linh hoạt, phù hợp với nhiều kích thước màn hình và loại nội dung. Trang này mô tả cách thực hiện những việc sau:

• Xác định lưới: Thiết lập cấu trúc cơ bản của các hàng và cột.
• Đặt các mục vào lưới: Tìm hiểu cách đặt các mục vào các ô lưới và cách thay đổi hướng của luồng.
• Quản lý kích thước của các thành phần: Sử dụng kích thước cố định, kích thước phân số, kích thước linh hoạt và kích thước nội tại để đặt kích thước của các thành phần.
• Đặt khoảng trống: Quản lý "khoảng trống" giữa các hàng và cột.

Xác định lưới

Lưới bao gồm các cột và hàng. Thành phần kết hợp Grid có một tham số config chấp nhận một lambda để xác định các cột và hàng trong GridConfigurationScope. Ví dụ sau đây xác định một lưới có 3 hàng và 2 cột, mỗi hàng và cột có kích thước cố định được chỉ định trong Dp:

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

Đặt các mục vào lưới

Grid lấy các phần tử giao diện người dùng trong lambda content và đặt chúng vào các ô lưới. Lưới bố trí các mục bất kể bạn có xác định rõ ràng các hàng và cột hay không. Theo mặc định, Grid sẽ cố gắng đặt một phần tử trên giao diện người dùng vào ô lưới có sẵn trong hàng; nếu không thể, phần tử này sẽ đặt phần tử đó vào một ô lưới có sẵn trong hàng tiếp theo. Nếu không có ô trống, Grid sẽ tạo một hàng mới.

Trong ví dụ sau, lưới có 6 ô lưới và đặt một thẻ vào mỗi ô (Hình 1). Mỗi ô lưới có kích thước 160dp x 90dp, tổng kích thước lưới là 320dp x 270dp.

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

Hình 1. 6 thẻ được đặt trong một lưới có 3 hàng và 2 cột.

Để thay đổi hành vi mặc định này thành điền theo cột, hãy đặt thuộc tính flow thành 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

Hình 2. GridFlow.Row (trái) và GridFlow.Column (phải).

Quản lý kích thước phụ đề

Hàng và cột được gọi chung là làn lưới. Bạn có thể chỉ định kích thước của một đường lưới bằng một trong các phương thức sau:

• Cố định (Dp): Phân bổ một kích thước cụ thể (ví dụ: column(180.dp)).
• Phân số (Float): Phân bổ một tỷ lệ phần trăm trong tổng không gian có sẵn từ 0.0f đến 1.0f (ví dụ: row(0.5f) cho 50%).
• Linh hoạt (Fr): Phân bổ không gian còn lại theo tỷ lệ sau khi tính toán các thành phần cố định và phân số. Ví dụ: nếu hai hàng được đặt thành 1.fr và 3.fr, thì hàng thứ hai sẽ nhận được 75% chiều cao còn lại.
• Nội tại: Điều chỉnh kích thước của bản phụ đề dựa trên nội dung bên trong. Để biết thêm thông tin, hãy xem bài viết Xác định kích thước của đường lưới một cách tự nhiên.

Ví dụ sau đây sử dụng các lựa chọn kích thước của các đường kẻ khác nhau để xác định chiều cao của hàng:

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

Hình 3. Chiều cao hàng được xác định bằng 4 lựa chọn chính về kích thước của các thành phần trong Grid.

Xác định kích thước đường lưới một cách tự nhiên

Bạn có thể sử dụng kích thước nội tại cho Grid khi muốn bố cục thích ứng với nội dung thay vì ép buộc nội dung vào một vùng chứa cố định. Kích thước của đường lưới được xác định bằng các giá trị sau:

• GridTrackSize.MaxContent: Sử dụng kích thước nội tại tối đa của nội dung (ví dụ: chiều rộng được xác định bằng toàn bộ độ dài của văn bản trong một khối văn bản không có tính năng xuống dòng).
• GridTrackSize.MinContent: Sử dụng kích thước tối thiểu vốn có của nội dung (ví dụ: chiều rộng được xác định bằng từ dài nhất trong một khối văn bản).
• GridTrackSize.Auto: Sử dụng kích thước linh hoạt cho một bản nhạc thích ứng dựa trên không gian có sẵn. Theo mặc định, thành phần này hoạt động như MaxContent, nhưng sẽ thu nhỏ và bao bọc nội dung để vừa với vùng chứa gốc.

Ví dụ sau đây đặt hai văn bản cạnh nhau. Kích thước cột cho văn bản đầu tiên được xác định bằng chiều rộng tối thiểu cần thiết để hiển thị văn bản và chiều rộng cột thứ hai phụ thuộc vào chiều rộng tối đa cần thiết của văn bản.

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

Hình 4. Kích thước nội tại được chỉ định trong các cột.

Đặt khoảng cách giữa các hàng và cột

Sau khi điều chỉnh kích thước các đường lưới, bạn có thể sửa đổi khoảng trống giữa các đường lưới để tinh chỉnh khoảng cách giữa các đường lưới. Bạn có thể chỉ định khoảng cách giữa các cột bằng hàm columnGap và khoảng cách giữa các hàng bằng rowGap. Trong ví dụ sau, có một khoảng trống 16dp giữa mỗi hàng và một khoảng trống 8dp giữa mỗi cột (Hình 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

Hình 5. Khoảng trống giữa các hàng và cột.

Bạn cũng có thể dùng hàm tiện ích gap để xác định khoảng trống có cùng kích thước cột và hàng, đồng thời xác định riêng kích thước cột và khoảng trống bằng một hàm duy nhất. Mã sau đây sẽ thêm khoảng trống 8dp vào lưới:

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