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

Row trong Jetpack Compose là gì

Row là một hàm composable đặt các phần tử con theo trình tự ngang. Trong hệ thống phân cấp bố cục Compose, Row chiếm vị trí của một vùng chứa cơ bản cùng với Column và Box.

Row không yêu cầu chỉ định kích thước — nó tự động điều chỉnh theo nội dung của nó. Chiều rộng của Row bằng tổng chiều rộng của các phần tử con bao gồm phần đệm, trừ khi Modifier.fillMaxWidth hoặc kích thước cố định được chỉ định.

Các phần tử con của Row có thể có bộ điều chỉnh riêng ảnh hưởng đến vị trí của chúng trong vùng chứa. Ví dụ: Modifier.weight cho phép các phần tử chiếm một phần tỷ lệ của không gian có sẵn.

Theo Android Developers Blog, 2024, Row xử lý các phần tử con theo trình tự, tính toán kích thước của chúng dựa trên các quy tắc đo lường của Compose: đầu tiên các phần tử không có weight được đo, sau đó không gian còn lại được phân phối giữa các phần tử có weight.

Cú pháp và chữ ký cơ bản của Row

Chữ ký cơ bản của Row bao gồm tham số modifier, horizontalArrangement và verticalAlignment. Tất cả các phần tử con được truyền trong khối lambda nội dung cuối cùng.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Một")
        Text(text = "Hai")
        Text(text = "Ba")
    }
}

Thuộc tính của Row: horizontalArrangement và verticalAlignment

Tham số horizontalArrangement xác định cách các phần tử con được phân bố dọc theo trục ngang trong Row. Các giá trị có sẵn bao gồm Start, End, Center, SpaceBetween, SpaceAround và SpaceEvenly từ lớp Arrangement.

Arrangement.Start đặt các phần tử ở đầu vùng chứa, Arrangement.End — ở cuối, và Arrangement.Center — ở giữa. Các giá trị này hoạt động tương tự như thuộc tính justify-content trong CSS Flexbox.

Arrangement.SpaceBetween phân phối các phần tử đồng đều, đặt phần tử đầu tiên ở đầu, phần tử cuối cùng ở cuối và các phần tử còn lại với khoảng cách bằng nhau giữa chúng. Theo Material Design Guidelines, 2025, SpaceBetween là tối ưu cho thanh công cụ và hàng điều hướng.

Tham số verticalAlignment căn chỉnh các phần tử theo chiều dọc. Các giá trị có sẵn bao gồm Alignment.Top, Alignment.CenterVertically và Alignment.Bottom. Thuộc tính này hữu ích khi các phần tử Row có chiều cao khác nhau — ví dụ: biểu tượng bên cạnh văn bản nhiều dòng.

Bảng giá trị Arrangement

Phân phối không gian với Modifier.weight

Modifier.weight là bộ điều chỉnh chỉ khả dụng bên trong Row và Column, phân phối không gian có sẵn giữa các phần tử con theo tỷ lệ với giá trị đã chỉ định. Nếu một phần tử có trọng số 1.0f và phần tử khác có 2.0f, phần tử thứ hai sẽ chiếm gấp đôi không gian.

Các phần tử không có weight chiếm không gian cần thiết cho nội dung của chúng. Không gian còn lại được phân phối giữa các phần tử có weight theo tỷ lệ với trọng số của chúng. Hành vi này tương tự như thuộc tính flex-grow trong CSS Flexbox.

Theo Android Developer Documentation, 2025, weight chỉ hoạt động bên trong Row, Column và BoxWithConstraints. Khi sử dụng weight trong Row, tất cả các phần tử con được đo trong hai lần: đầu tiên các phần tử không có weight, sau đó các phần tử có weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Trái",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Phải")
    }
}

Ví dụ mã với Row

Ví dụ đầu tiên minh họa Row với biểu tượng và văn bản — một kịch bản điển hình cho danh sách liên hệ hoặc cài đặt. Icon và Text được bao bọc trong Row với verticalAlignment ở giữa.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Thêm vào yêu thích")
    }
}

Ví dụ thứ hai hiển thị Row với các nút và phân phối đồng đều. SpaceEvenly đảm bảo khoảng cách bằng nhau giữa tất cả các nút và các cạnh của vùng chứa.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Hủy") }
        Button(onClick = {}) { Text("Lưu") }
    }
}

Ví dụ thứ ba — Row bên trong Card để hiển thị xếp hạng. Một Row lồng nhau với Modifier.weight cho phép ngôi sao xếp hạng và giá trị số chiếm không gian cố định.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Đánh giá:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Đặc điểm của Row trong bố cục thích ứng

Row yêu cầu kiểm soát chiều rộng trong bố cục thích ứng. Nếu nội dung của Row vượt quá chiều rộng màn hình có sẵn, các phần tử có thể tràn ra ngoài ranh giới vùng chứa. Để ngăn chặn điều này, hãy sử dụng Modifier.horizontalScroll hoặc chuyển sang Column.

Khi kết hợp Row với Modifier.weight, điều quan trọng là đặt fillMaxWidth cho Row cha — nếu không weight sẽ phân phối không gian không tồn tại. Theo Material Design Guidelines, 2025, Row có weight nhưng không có fillMaxWidth được coi là cấu hình không hợp lệ.

Đối với giao diện thích ứng, nên kết hợp Row với Box hoặc sử dụng Arrangement.SpaceBetween để phân phối phần tử tự động trên các kích thước màn hình khác nhau. Điều này mang lại sự linh hoạt mà không cần truy vấn phương tiện.

• Modifier.horizontalScroll — thêm cuộn khi Row tràn
• Modifier.weight — phân phối không gian theo tỷ lệ
• Arrangement.SpaceBetween — phân phối thích ứng với cố định ở các cạnh