{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

BoxKt

public final class BoxKt


Summary

Public methods

static final void

A box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it.

static final void
@Composable
Box(
    @NonNull Modifier modifier,
    @NonNull Alignment contentAlignment,
    boolean propagateMinConstraints,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content
)

A layout composable with content.

Public methods

Box

@Composable
public static final void Box(@NonNull Modifier modifier)

A box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
    )
}
Parameters
@NonNull Modifier modifier

The modifier to be applied to the layout.

Box

@Composable
public static final void Box(
    @NonNull Modifier modifier,
    @NonNull Alignment contentAlignment,
    boolean propagateMinConstraints,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content
)

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.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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)
    )
}
Parameters
@NonNull Modifier modifier

The modifier to be applied to the layout.

@NonNull Alignment contentAlignment

The default alignment inside the Box.

boolean propagateMinConstraints

Whether the incoming min constraints should be passed to content.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content

The content of the Box.