Compose Playground

Row

A layout composable that places its children in a horizontal sequence.

Properties

Row Properties

Children Properties

Preview
A
B
C
Generated Code
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun MyRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Top
    ) {
        Box(
            modifier = Modifier
                .padding(8.dp)
                .background(Color.Red)
        ) {
            Text(
                text = "A",
                modifier = Modifier.align(Alignment.Center)
            )
        }
        Box(
            modifier = Modifier
            // This aligns this specific child, overriding the Row's alignment
            .align(Alignment.Top)
                .padding(8.dp)
                .background(Color.Green)
        ) {
            Text(
                text = "B",
                modifier = Modifier.align(Alignment.Center)
            )
        }
        Box(
            modifier = Modifier
            // This child will take up space proportionally to its weight
            .weight(1.0f)
                .padding(8.dp)
                .background(Color.Blue)
        ) {
            Text(
                text = "C",
                modifier = Modifier.align(Alignment.Center)
            )
        }
    }
}