| <html devsite="true"> |
| <head> |
| <title>BoxKt</title> |
| {% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>BoxKt</h1> |
| <p> |
| <pre>public final class <a href="/reference/androidx/compose/foundation/layout/BoxKt.html">BoxKt</a></pre> |
| </p> |
| <hr> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <colgroup> |
| <col width="40%"> |
| <col> |
| </colgroup> |
| <thead> |
| <tr> |
| <th colspan="100%"><h3>Public methods</h3></th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td><code>static final void</code></td> |
| <td> |
| <div><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br><a href="/reference/androidx/compose/foundation/layout/BoxKt.html#Box(androidx.compose.ui.Modifier)">Box</a>(@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier)</code></div> |
| <p>A box with no content that can participate in layout, drawing, pointer input due to the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier)">modifier</a></code> applied to it.</p> |
| </td> |
| </tr> |
| <tr> |
| <td><code>static final void</code></td> |
| <td> |
| <div><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br><a href="/reference/androidx/compose/foundation/layout/BoxKt.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Alignment.html">Alignment</a> contentAlignment,<br> boolean propagateMinConstraints,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/BoxScope.html">BoxScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</code></div> |
| <p>A layout composable with <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">content</a></code>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="list"> |
| <h2>Public methods</h2> |
| <div class="api-item"><a name="Box-androidx.compose.ui.Modifier-"></a><a name="box"></a> |
| <h3 class="api-name" id="Box(androidx.compose.ui.Modifier)">Box</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/foundation/layout/BoxKt.html#Box(androidx.compose.ui.Modifier)">Box</a>(@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier)</pre> |
| <p>A box with no content that can participate in layout, drawing, pointer input due to the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier)">modifier</a></code> applied to it.</p> |
| <p>Example usage:</p> |
| <pre class="prettyprint"> |
| 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 |
| |
| 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) |
| ) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <colgroup> |
| <col width="40%"> |
| <col> |
| </colgroup> |
| <thead> |
| <tr> |
| <th colspan="100%">Parameters</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier</code></td> |
| <td> |
| <p>The modifier to be applied to the layout.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div class="api-item"><a name="Box(androidx.compose.ui.Modifier, androidx.compose.ui.Alignment, kotlin.Boolean, kotlin.Function1)"></a><a name="Box-androidx.compose.ui.Modifier-androidx.compose.ui.Alignment-kotlin.Boolean-kotlin.Function1-"></a><a name="box"></a> |
| <h3 class="api-name" id="Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/foundation/layout/BoxKt.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Alignment.html">Alignment</a> contentAlignment,<br> boolean propagateMinConstraints,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/BoxScope.html">BoxScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</pre> |
| <p>A layout composable with <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">content</a></code>. The <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code> 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 <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code> according to the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">contentAlignment</a></code>. For individually specifying the alignments of the children layouts, use the <code><a href="/reference/androidx/compose/foundation/layout/BoxScope.html#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment)">BoxScope.align</a></code> modifier. By default, the content will be measured without the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code>'s incoming min constraints, unless <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">propagateMinConstraints</a></code> is <code>true</code>. As an example, setting <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">propagateMinConstraints</a></code> to <code>true</code> can be useful when the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code> has content on which modifiers cannot be specified directly and setting a min size on the content of the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code> is needed. If <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">propagateMinConstraints</a></code> is set to <code>true</code>, the min size set on the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code> will also be applied to the content, whereas otherwise the min size will only apply to the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code>. 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.</p> |
| <p>Example usage:</p> |
| <pre class="prettyprint"> |
| 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 |
| |
| 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) |
| ) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <colgroup> |
| <col width="40%"> |
| <col> |
| </colgroup> |
| <thead> |
| <tr> |
| <th colspan="100%">Parameters</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Modifier.html">Modifier</a> modifier</code></td> |
| <td> |
| <p>The modifier to be applied to the layout.</p> |
| </td> |
| </tr> |
| <tr> |
| <td><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/ui/Alignment.html">Alignment</a> contentAlignment</code></td> |
| <td> |
| <p>The default alignment inside the Box.</p> |
| </td> |
| </tr> |
| <tr> |
| <td><code>boolean propagateMinConstraints</code></td> |
| <td> |
| <p>Whether the incoming min constraints should be passed to content.</p> |
| </td> |
| </tr> |
| <tr> |
| <td><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/BoxScope.html">BoxScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content</code></td> |
| <td> |
| <p>The content of the <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)">Box</a></code>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
