New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Compose Foundation Layout

Box

Common

A layout composable with [content]. The [Box] will size itself to fit the content, subject to the incoming constraints. When children are smaller than the parent, by default they will be positioned inside the [Box] according to the [contentAlignment]. For individually specifying the alignments of the children layouts, use the [BoxScope.align] modifier. By default, the content will be measured without the [Box]'s incoming min constraints, unless [propagateMinConstraints] is true. As an example, setting [propagateMinConstraints] to true can be useful when the [Box] has content on which modifiers cannot be specified directly and setting a min size on the content of the [Box] is needed. If [propagateMinConstraints] is set to true, the min size set on the [Box] will also be applied to the content, whereas otherwise the min size will only apply to the [Box]. When the content has more than one layout child the layout children will be stacked one on top of the other (positioned as explained above) in the composition order.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.7.0-beta04")
}

Overloads

@Composable
fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

Parameters

namedescription
modifierThe modifier to be applied to the layout.
contentAlignmentThe default alignment inside the Box.
propagateMinConstraintsWhether the incoming min constraints should be passed to content.
contentThe content of the [Box].
@Composable
fun Box(modifier: Modifier)

Parameters

namedescription
modifierThe modifier to be applied to the layout.

Code Example

SimpleBox

@Composable
@Sampled
fun SimpleBox() {
    Box {
        Box(Modifier.fillMaxSize().background(Color.Cyan))
        Box(
            Modifier.matchParentSize()
                .padding(top = 20.dp, bottom = 20.dp)
                .background(Color.Yellow)
        )
        Box(
            Modifier.matchParentSize()
                .padding(40.dp)
                .background(Color.Magenta)
        )
        Box(
            Modifier.align(Alignment.Center)
                .size(300.dp, 300.dp)
                .background(Color.Green)
        )
        Box(
            Modifier.align(Alignment.TopStart)
                .size(150.dp, 150.dp)
                .background(Color.Red)
        )
        Box(
            Modifier.align(Alignment.BottomEnd)
                .size(150.dp, 150.dp)
                .background(Color.Blue)
        )
    }
}