Skip to content

Box

@Composable



fun Box(
    modifier: Modifier = Modifier, 
    contentAlignment: Alignment = Alignment.TopStart, 
    content: @Composable



 () -> Unit
)

A layout composable that stacks its children on top of each other, aligned within its bounds.

Each child is independently aligned using contentAlignment. Children are drawn in declaration order (first child at the bottom, last child on top).

Example

Box(contentAlignment = Alignment.Center, modifier = Modifier.size(100, 60)) {
    // background fills the box
    Spacer(modifier = Modifier.fillMaxSize().background(KColor.DARK_GRAY))
    Text(Component.literal("Centered"))
}

Parameters

  • modifier: Modifiers applied to the outer Box node.

  • contentAlignment: How children are positioned within the box. Default Alignment.TopStart.

  • content: The child composables to stack.