Compose Playground

Column

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

Properties

Column 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 MyColumn() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.Start
    ) {
        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 Column's alignment
            .align(Alignment.End)
                .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)
            )
        }
    }
}