Box trong Jetpack Compose: nó là gì, thuộc tính composable và cách hoạt động

Box trong Jetpack Compose là gì?

Box là một hàm composable đặt các phần tử con trong cùng một khu vực, xếp chồng chúng lên nhau. Phần tử con đầu tiên được vẽ ở dưới cùng, phần tử cuối cùng ở trên cùng. Theo mặc định, Box điều chỉnh theo kích thước của phần tử con lớn nhất.

Không giống như Row và Column, Box không sắp xếp các phần tử tuần tự — tất cả các phần tử con chiếm cùng một khu vực và có thể chồng lên nhau. Điều này làm cho Box không thể thiếu để tạo các lớp giao diện.

Kích thước của Box được xác định theo quy tắc: nếu không có phần tử con nào có kích thước cố định, Box thu nhỏ xuống kích thước tối thiểu. Nếu có ít nhất một phần tử con có Modifier.fillMaxSize, Box mở rộng đến tối đa.

Theo Android Developers Blog, 2024, Box là container hiệu quả nhất trong Compose cho các trường hợp phần tử không yêu cầu sắp xếp tuần tự. Box không thực hiện các phép đo bổ sung để định vị, không giống như Row và Column.

Chữ ký cơ bản của Box

Box chấp nhận các tham số modifier, contentAlignment và propagateMinConstraints. Tất cả các phần tử con được truyền trong khối content, mỗi phần tử có thể có các bổ ngữ riêng.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "Xin chào",
            color = Color.White
        )
    }
}

ContentAlignment và Modifier.align trong Box

contentAlignment là một tham số của Box thiết lập căn chỉnh mặc định cho tất cả các phần tử con. Nếu không được chỉ định, Alignment.TopStart được sử dụng — các phần tử được đặt ở góc trên bên trái của container.

Modifier.align cho phép ghi đè căn chỉnh cho một phần tử con cụ thể độc lập với contentAlignment. Ví dụ: Box với Alignment.Center có thể chứa phần tử với Modifier.align(Alignment.BottomEnd) sẽ được ghim vào góc dưới bên phải.

Theo Material Design Guidelines, 2025, Modifier.align rất hữu ích để định vị huy hiệu và biểu tượng trên hình nền. Điều này cho phép thiết lập căn chỉnh chung cho tất cả nội dung của Box và ghi đè nó cho các phần tử riêng lẻ.

Bảng giá trị Alignment

Ví dụ với Modifier.align

Trong ví dụ này, Box chứa một hình nền và một huy hiệu ở góc dưới bên phải. Modifier.align(BottomEnd) định vị huy hiệu độc lập với contentAlignment của Box.

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

Quản lý lớp với zIndex

Modifier.zIndex kiểm soát thứ tự vẽ của các phần tử bên trong Box. Theo mặc định, các phần tử được vẽ theo thứ tự khai báo — phần tử đầu tiên ở dưới cùng, phần tử cuối cùng ở trên cùng. zIndex ghi đè thứ tự này.

Một phần tử có zIndex 2.0f được vẽ phía trên phần tử có zIndex 1.0f, bất kể thứ tự của chúng trong mã. Giá trị zIndex âm đặt phần tử bên dưới các phần tử khác. Theo Android Developers, 2024, zIndex chỉ ảnh hưởng đến thứ tự vẽ, không ảnh hưởng đến xử lý sự kiện chạm.

zIndex đặc biệt hữu ích trong hoạt ảnh và các thành phần có thể kéo, nơi một phần tử cần tạm thời nổi lên trên các phần tử khác. Ví dụ: khi kéo một thẻ, zIndex của nó tăng lên để không bị các phần tử lân cận che khuất.

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

Ví dụ thực tế sử dụng Box

Box được sử dụng rộng rãi để phủ văn bản lên hình ảnh. Hình nền được đặt trước, sau đó văn bản với Modifier.align để định vị trên nền.

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "Tiêu đề",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Ví dụ thứ hai là Box để tạo chỉ báo tải. Box chiếm toàn bộ khu vực màn hình và CircularProgressIndicator được căn giữa thông qua contentAlignment.

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Ràng buộc kích thước Box

Box theo mặc định điều chỉnh theo kích thước nội dung của nó. Nếu các phần tử con có kích thước khác nhau, Box lấy kích thước của phần tử lớn nhất. Khi không có phần tử con, Box thu nhỏ xuống kích thước tối thiểu.

Modifier.clipToBounds giới hạn việc hiển thị các phần tử con trong ranh giới của Box. Nếu không có bổ ngữ này, các phần tử con có thể mở rộng ra ngoài Box. Theo Material Design Guidelines, 2025, clipToBounds là bắt buộc khi sử dụng Modifier.scale hoặc Modifier.graphicsLayer bên trong Box.

propagateMinConstraints là một tham số của Box truyền các ràng buộc kích thước tối thiểu đến các phần tử con. Nếu được đặt thành true, các phần tử con không thể nhỏ hơn kích thước tối thiểu được đặt cho Box thông qua Modifier.size hoặc Modifier.constrain.

• Box — container tối thiểu nếu không có kích thước nào được đặt và không có phần tử con nào có fillMaxSize
• Modifier.clipToBounds ngăn nội dung tràn ra ngoài ranh giới Box
• propagateMinConstraints truyền các ràng buộc tối thiểu đến các phần tử con