Pular para conteúdo

Row

Enquanto uma Column alinha os elementos um abaixo do outro de forma vertical, uma Row alinha um ao lado do outro, de forma horizontal. É o equivalente a um LinearLayout com a orientação horizontal.

@Composable
fun Profile() {
    Row {
        Image(
            painter = painterResource(id = R.drawable.baseline_person_24),
            contentDescription = "Profile image",
            modifier = Modifier.size(50.dp)
        )
        Text(text = "John")
    }
}

Row

Alinhamento de uma Row

Assim como a Column, Row possui mais 2 parâmetros que podem ser usados para alinhar o conteúdo. Vamos modificar o horizontalArrangement e ver como fica:

Arrangement.Start

@Composable
fun Profile() {
    Row(
       horizontalArrangement = Arrangement.Start,
       modifier = Modifier.width(150.dp)
    ) {
        ...
    }
}

Arrangement.Center

@Composable
fun Profile() {
    Row(
       horizontalArrangement = Arrangement.Center,
       modifier = Modifier.width(150.dp)
    ) {
        ...
    }
}

Arrangement.End

@Composable
fun Profile() {
    Row(
       horizontalArrangement = Arrangement.End,
       modifier = Modifier.width(150.dp)
    ) {
        ...
    }
}

Arrangement.SpaceBetween

@Composable
fun Profile() {
    Row(
       horizontalArrangement = Arrangement.SpaceBetween,
       modifier = Modifier.width(150.dp)
    ) {
        ...
    }
}

Arrangement.SpaceEvenly

@Composable
fun Profile() {
    Row(
       horizontalArrangement = Arrangement.SpaceEvenly,
       modifier = Modifier.width(150.dp)
    ) {
        ...
    }
}

Também podemos fazer uma combinação de horizontalArrangement e verticalAlignment para deixar todo o conteúdo centralizado, por exemplo.

@Composable
fun Profile() {
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.size(150.dp)
    ) {
        ...
    }
}

Row centralizada

🔗 Conteúdos auxiliares: