| <html devsite="true"> |
| <head> |
| <title>ColumnScope</title> |
| {% setvar book_path %}/reference/kotlin/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>ColumnScope</h1> |
| <p> |
| <pre>@<a href="/reference/kotlin/androidx/compose/foundation/layout/LayoutScopeMarker.html">LayoutScopeMarker</a> interface ColumnScope</pre> |
| </p> |
| <hr> |
| <p>Scope for the children of <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>.</p> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Public functions</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).align(Alignment.Horizontal)">align</a>(alignment: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>)</code></div> |
| <p>Align the element horizontally within the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a>(alignmentLine: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>)</code></div> |
| <p>Position the element horizontally such that its <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignmentLine</a></code> aligns with sibling elements also configured to <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(kotlin.Function1)">alignBy</a>(alignmentLineBlock: (<a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>)</code></div> |
| <p>Position the element horizontally such that the alignment line for the content as determined by <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(kotlin.Function1)">alignmentLineBlock</a></code> aligns with sibling elements also configured to <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).weight(kotlin.Float,kotlin.Boolean)">weight</a>(weight: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>, fill: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>)</code></div> |
| <p>Size the element's height proportional to its <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).weight(kotlin.Float,kotlin.Boolean)">weight</a></code> relative to other weighted sibling elements in the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Extension functions</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html">ColumnScope</a>.<a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visible: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>,<br> modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a>,<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a>,<br> content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>)</code></div> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">ColumnScope.AnimatedVisibility</a></code> composable animates the appearance and disappearance of its content when the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> is in a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html">ColumnScope</a>.<a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visibleState: <a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html">MutableTransitionState</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>>,<br> modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a>,<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a>,<br> content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>)</code></div> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">ColumnScope.AnimatedVisibility</a></code> composable animates the appearance and disappearance of its content as <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visibleState</a></code>'s <code><a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html#targetState()">targetState</a></code> changes.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public functions</h2> |
| <div><a name="-Modifier-.align-Alignment.Horizontal-"></a><a name="align"></a> |
| <h3 class="api-name" id="(Modifier).align(Alignment.Horizontal)">align</h3> |
| <pre class="api-signature no-pretty-print">fun <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).align(Alignment.Horizontal)">align</a>(alignment: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>): <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></pre> |
| <p>Align the element horizontally within the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>. This alignment will have priority over the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>'s <code>horizontalAlignment</code> parameter.</p> |
| <p>Example usage:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.size |
| |
| Column(Modifier.fillMaxWidth()) { |
| // The child with no align modifier is positioned by default so that its start edge |
| // aligned with the start edge of the horizontal axis. |
| |
| Box(Modifier.size(80.dp, 40.dp).background(Color.Magenta)) |
| // Alignment.Start, the child will be positioned so that its start edge is aligned with |
| // the start edge of the horizontal axis. |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .align(Alignment.Start) |
| .background(Color.Red) |
| ) |
| // Alignment.Center, the child will be positioned so that its center is in the middle of |
| // the horizontal axis. |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .align(Alignment.CenterHorizontally) |
| .background(Color.Yellow) |
| ) |
| // Alignment.End, the child will be positioned so that its end edge aligned to the end of |
| // the horizontal axis. |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .align(Alignment.End) |
| .background(Color.Green) |
| ) |
| }</pre> |
| </div> |
| <div><a name="-Modifier-.alignBy-VerticalAlignmentLine-"></a><a name="alignby"></a> |
| <h3 class="api-name" id="(Modifier).alignBy(VerticalAlignmentLine)">alignBy</h3> |
| <pre class="api-signature no-pretty-print">fun <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a>(alignmentLine: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>): <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></pre> |
| <p>Position the element horizontally such that its <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignmentLine</a></code> aligns with sibling elements also configured to <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code>. <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> is a form of <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).align(Alignment.Horizontal)">align</a></code>, so both modifiers will not work together if specified for the same layout. Within a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>, all components with <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> will align horizontally using the specified VerticalAlignmentLines or values provided using the other <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> overload, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Start align in <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> has the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> modifier specified the element will be positioned as if it had Alignment.Start align.</p> |
| <p>Example usage:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.size |
| import androidx.compose.ui.layout.Layout |
| import androidx.compose.ui.layout.VerticalAlignmentLine |
| |
| // Alignment lines provided by the RectangleWithStartEnd layout. We need to create these |
| // local alignment lines because Compose is currently not providing any top-level out of |
| // the box vertical alignment lines. Two horizontal alignment lines are provided though: |
| // FirstBaseline and LastBaseline, but these can only be used to align vertically children |
| // of Row because the baselines are horizontal. Therefore, we create these vertical alignment |
| // lines, that refer to the start and end of the RectangleWithStartEnd layout which knows |
| // how to provide them. Then Column will know how to align horizontally children such |
| // that the positions of the alignment lines coincide, as asked by alignBy. |
| val start = VerticalAlignmentLine(::min) |
| val end = VerticalAlignmentLine(::min) |
| |
| @Composable |
| fun RectangleWithStartEnd(modifier: Modifier = Modifier, color: Color, width: Dp, height: Dp) { |
| Layout( |
| content = { }, |
| modifier = modifier.background(color = color) |
| ) { _, constraints -> |
| val widthPx = max(width.roundToPx(), constraints.minWidth) |
| val heightPx = max(height.roundToPx(), constraints.minHeight) |
| layout(widthPx, heightPx, mapOf(start to 0, end to widthPx)) {} |
| } |
| } |
| |
| Column { |
| // Center of the first rectangle is aligned to the right edge of the second rectangle and |
| // left edge of the third one. |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .alignBy { it.measuredWidth / 2 } |
| .background(Color.Blue) |
| ) |
| RectangleWithStartEnd( |
| Modifier.alignBy(end), |
| color = Color.Magenta, |
| width = 80.dp, |
| height = 40.dp |
| ) |
| RectangleWithStartEnd( |
| Modifier.alignBy(start), |
| color = Color.Red, |
| width = 80.dp, |
| height = 40.dp |
| ) |
| }</pre> |
| </div> |
| <div><a name="-Modifier-.alignBy-kotlin.Function1-"></a><a name="alignby"></a> |
| <h3 class="api-name" id="(Modifier).alignBy(kotlin.Function1)">alignBy</h3> |
| <pre class="api-signature no-pretty-print">fun <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(kotlin.Function1)">alignBy</a>(alignmentLineBlock: (<a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>): <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></pre> |
| <p>Position the element horizontally such that the alignment line for the content as determined by <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(kotlin.Function1)">alignmentLineBlock</a></code> aligns with sibling elements also configured to <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code>. <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> is a form of <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).align(Alignment.Horizontal)">align</a></code>, so both modifiers will not work together if specified for the same layout. Within a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>, all components with <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> will align horizontally using the specified VerticalAlignmentLines or values obtained from <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(kotlin.Function1)">alignmentLineBlock</a></code>, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Start align in <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> has the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).alignBy(VerticalAlignmentLine)">alignBy</a></code> modifier specified the element will be positioned as if it had Alignment.Start align.</p> |
| <p>Example usage:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.size |
| |
| Column { |
| // Center of the first rectangle is aligned to the right edge of the second rectangle and |
| // left edge of the third one. |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .alignBy { it.measuredWidth / 2 } |
| .background(Color.Blue) |
| ) |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .alignBy { it.measuredWidth } |
| .background(Color.Magenta) |
| ) |
| Box( |
| Modifier.size(80.dp, 40.dp) |
| .alignBy { 0 } |
| .background(Color.Red) |
| ) |
| }</pre> |
| </div> |
| <div><a name="(Modifier).weight(kotlin.Float, kotlin.Boolean)"></a><a name="-Modifier-.weight-kotlin.Float-kotlin.Boolean-"></a><a name="weight"></a> |
| <h3 class="api-name" id="(Modifier).weight(kotlin.Float,kotlin.Boolean)">weight</h3> |
| <pre class="api-signature no-pretty-print">fun <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>.<a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).weight(kotlin.Float,kotlin.Boolean)">weight</a>(weight: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>, fill: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a> = true): <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a></pre> |
| <p>Size the element's height proportional to its <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).weight(kotlin.Float,kotlin.Boolean)">weight</a></code> relative to other weighted sibling elements in the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>. The parent will divide the vertical space remaining after measuring unweighted child elements and distribute it according to this weight. When <code><a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html#(Modifier).weight(kotlin.Float,kotlin.Boolean)">fill</a></code> is true, the element will be forced to occupy the whole height allocated to it. Otherwise, the element is allowed to be smaller - this will result in <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> being smaller, as the unused allocated height will not be redistributed to other siblings.</p> |
| <p>The proportional height to give to this element, as related to the total of all weighted siblings. Must be positive.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.size |
| import androidx.compose.foundation.layout.width |
| |
| Column { |
| // The child with no weight will have the specified size. |
| Box(Modifier.size(40.dp, 80.dp).background(Color.Magenta)) |
| // Has weight, the child will occupy half of the remaining height. |
| Box(Modifier.width(40.dp).weight(1f).background(Color.Yellow)) |
| // Has weight and does not fill, the child will occupy at most half of the remaining height. |
| // Therefore it will occupy 80.dp (its preferred height) if the assigned height is larger. |
| Box( |
| Modifier.size(40.dp, 80.dp) |
| .weight(1f, fill = false) |
| .background(Color.Green) |
| ) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>fill: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a> = true</code></td> |
| <td> |
| <p>When <code>true</code>, the element will occupy the whole height allocated.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <h2>Extension functions</h2> |
| <div><a name="(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean, Modifier, androidx.compose.animation.EnterTransition, androidx.compose.animation.ExitTransition, kotlin.Function1)"></a><a name="-androidx.compose.foundation.layout.ColumnScope-.AnimatedVisibility-kotlin.Boolean-Modifier-androidx.compose.animation.EnterTransition-androidx.compose.animation.ExitTransition-kotlin.Function1-"></a><a name="animatedvisibility"></a> |
| <h3 class="api-name" id="(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>fun <a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html">ColumnScope</a>.<a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visible: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>,<br> modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> = Modifier,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = fadeIn() + expandVertically(),<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = fadeOut() + shrinkVertically(),<br> content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>): <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">ColumnScope.AnimatedVisibility</a></code> composable animates the appearance and disappearance of its content when the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> is in a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>. The default animations are tailored specific to the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> layout. See more details below.</p> |
| <p>Different <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code>s and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>s can be defined in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> for the appearance and disappearance animation. There are 3 types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>: Fade, Expand/Shrink and Slide. The enter transitions and exit transitions can be combined using <code>+</code>. The order of the combination does not matter, as the transition animations will start simultaneously. See <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> for details on the three types of transition.</p> |
| <p>The default <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> transition is configured based on the vertical layout of a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> defaults to a combination of fading in and expanding the content vertically. (The bottom of the content will be the leading edge as the content expands to its full height.) And the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> defaults to shrinking the content vertically with the bottom of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the column since they rely on the size of appearing/disappearing content.</p> |
| <p>Aside from these three types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the <code>Transition<EnterExitState></code> object from the <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code> (i.e. <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html#transition()">AnimatedVisibilityScope.transition</a></code>). See <code><a href="/reference/kotlin/androidx/compose/animation/EnterExitState.html">EnterExitState</a></code> for an example of custom animations. These custom animations will be running along side of the built-in animations specified in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code>. In cases where the enter/exit animation needs to be completely customized, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> can be specified as <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.Companion.html#None()">EnterTransition.None</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.Companion.html#None()">ExitTransition.None</a></code> as needed. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> will wait until <em>all</em> of enter/exit animations to finish before it considers itself idle. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> will only be removed after all the (built-in and custom) exit animations have finished.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> creates a custom Layout for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the Layout.</p> |
| <p><b>Note</b>: Once the exit transition is finished, the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> composable will be removed from the tree, and disposed. If there's a need to observe the state change of the enter/exit transition and follow up additional action (e.g. remove data, sequential animation, etc), consider the AnimatedVisibility API variant that takes a <code><a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html">MutableTransitionState</a></code> parameter.</p> |
| <p>Here's an example of using <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">ColumnScope.AnimatedVisibility</a></code> in a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.clickable |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var itemIndex by remember { mutableStateOf(0) } |
| val colors = listOf(Color.Red, Color.Green, Color.Blue) |
| Column( |
| Modifier.fillMaxWidth().clickable { |
| itemIndex = (itemIndex + 1) % colors.size |
| } |
| ) { |
| colors.forEachIndexed { i, color -> |
| // By default ColumnScope.AnimatedVisibility expands and shrinks new content while |
| // fading. |
| AnimatedVisibility(i <= itemIndex) { |
| Box(Modifier.requiredHeight(40.dp).fillMaxWidth().background(color)) |
| } |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>visible: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a></code></td> |
| <td> |
| <p>defines whether the content should be visible</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> = Modifier</code></td> |
| <td> |
| <p>modifier for the Layout created to contain the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = fadeIn() + expandVertically()</code></td> |
| <td> |
| <p>EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = fadeOut() + shrinkVertically()</code></td> |
| <td> |
| <p>ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <p>Content to appear or disappear based on the value of <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visible</a></code></p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">See also</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState, Modifier, androidx.compose.animation.EnterTransition, androidx.compose.animation.ExitTransition, kotlin.Function1)"></a><a name="-androidx.compose.foundation.layout.ColumnScope-.AnimatedVisibility-androidx.compose.animation.core.MutableTransitionState-Modifier-androidx.compose.animation.EnterTransition-androidx.compose.animation.ExitTransition-kotlin.Function1-"></a><a name="animatedvisibility"></a> |
| <h3 class="api-name" id="(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>fun <a href="/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.html">ColumnScope</a>.<a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visibleState: <a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html">MutableTransitionState</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>>,<br> modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> = Modifier,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = expandVertically() + fadeIn(),<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = shrinkVertically() + fadeOut(),<br> content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>): <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">ColumnScope.AnimatedVisibility</a></code> composable animates the appearance and disappearance of its content as <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visibleState</a></code>'s <code><a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html#targetState()">targetState</a></code> changes. The default <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> transitions are tailored specific to the <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> layout. See more details below. The <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visibleState</a></code> can also be used to observe the state of <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code>. For example: <code>visibleState.idIdle</code> indicates whether the all animations have finished in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code>, and <code>visibleState.currentState</code> returns the initial state of the current animations.</p> |
| <p>Different <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code>s and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>s can be defined in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> for the appearance and disappearance animation. There are 3 types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>: Fade, Expand/Shrink and Slide. The enter transitions and exit transitions can be combined using <code>+</code>. The order of the combination does not matter, as the transition animations will start simultaneously. See <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> for details on the three types of transition.</p> |
| <p>The default <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> transition is configured based on the vertical layout of a <code><a href="/reference/kotlin/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code>. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> defaults to a combination of fading in and expanding the content vertically. (The bottom of the content will be the leading edge as the content expands to its full height.) And the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> defaults to shrinking the content vertically with the bottom of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the column since they rely on the size of appearing/disappearing content.</p> |
| <p>Aside from these three types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the <code>Transition<EnterExitState></code> object from the <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code> (i.e. <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html#transition()">AnimatedVisibilityScope.transition</a></code>). See <code><a href="/reference/kotlin/androidx/compose/animation/EnterExitState.html">EnterExitState</a></code> for an example of custom animations. These custom animations will be running along side of the built-in animations specified in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code>. In cases where the enter/exit animation needs to be completely customized, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> can be specified as <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.Companion.html#None()">EnterTransition.None</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.Companion.html#None()">ExitTransition.None</a></code> as needed. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> will wait until <em>all</em> of enter/exit animations to finish before it considers itself idle. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> will only be removed after all the (built-in and custom) exit animations have finished.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> creates a custom Layout for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the Layout.</p> |
| <p><b>Note</b>: Once the exit transition is finished, the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> composable will be removed from the tree, and disposed. Both <code>currentState</code> and <code>targetState</code> will be <code>false</code> for <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visibleState</a></code>.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.MutableTransitionState |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.height |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.graphics.Color |
| |
| var visible by remember { mutableStateOf(true) } |
| val colors = remember { listOf(Color(0xff2a9d8f), Color(0xffe9c46a), Color(0xfff4a261)) } |
| Column { |
| repeat(3) { |
| AnimatedVisibility( |
| visibleState = remember { |
| // This sets up the initial state of the AnimatedVisibility to false to |
| // guarantee an initial enter transition. In contrast, initializing this as |
| // `MutableTransitionState(visible)` would result in no initial enter |
| // transition. |
| MutableTransitionState(initialState = false) |
| }.apply { |
| // This changes the target state of the visible state. If it's different than |
| // the initial state, an enter/exit transition will be triggered. |
| targetState = visible |
| }, |
| ) { // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().height(100.dp).background(colors[it])) |
| } |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>visibleState: <a href="/reference/kotlin/androidx/compose/animation/core/MutableTransitionState.html">MutableTransitionState</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>></code></td> |
| <td> |
| <p>defines whether the content should be visible</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>modifier: <a href="/reference/kotlin/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> = Modifier</code></td> |
| <td> |
| <p>modifier for the Layout created to contain the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = expandVertically() + fadeIn()</code></td> |
| <td> |
| <p>EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = shrinkVertically() + fadeOut()</code></td> |
| <td> |
| <p>ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>content: @<a href="/reference/kotlin/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/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <p>Content to appear or disappear based on of <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visibleState</a></code></p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">See also</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </body> |
| </html> |
