RowScope

Kotlin |Java

@Immutable interface RowScope

androidx.compose.foundation.layout.RowScope

Known Direct Subclasses

RowScope.Companion

Scope for the children of Row.

Summary

Nested classes
companion	`Companion`

Public methods
open Modifier	`Modifier.align(alignment: Alignment.Vertical)` Align the element vertically within the Row.
open Modifier	`Modifier.alignBy(alignmentLine: HorizontalAlignmentLine)` Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy.
open Modifier	`Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)` Position the element vertically such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy.
open Modifier	`Modifier.alignByBaseline()` Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy.
open Modifier	`Modifier.alignWithSiblings(alignmentLine: HorizontalAlignmentLine)`
open Modifier	`Modifier.alignWithSiblings(alignmentLineBlock: (Measured) -> Int)`
open Modifier	`Modifier.weight(@FloatRange(0.0, 3.4E38, false) weight: Float, fill: Boolean = true)` Size the element's width proportional to its weight relative to other weighted sibling elements in the Row.

Extension functions

From androidx.compose.animation

Unit

RowScope.AnimatedVisibility(visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandHorizontally(), exit: ExitTransition = fadeOut() + shrinkHorizontally(), initiallyVisible: Boolean = visible, content: () -> Unit)

AnimatedVisibility composable animates the appearance and disappearance of its content, as visible value changes.

Public methods

align

@Stable open fun Modifier.align(alignment: Alignment.Vertical): Modifier

Align the element vertically within the Row. This alignment will have priority over the Row's verticalAlignment parameter.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Row(Modifier.fillMaxHeight()) {
    // The child with no align modifier is positioned by default so that its top edge is
    // aligned to the top of the vertical axis.
    Box(Modifier.preferredSize(80.dp, 40.dp).background(Color.Magenta))
    // Gravity.Top, the child will be positioned so that its top edge is aligned to the top
    // of the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.Top)
            .background(Color.Red)
    )
    // Gravity.Center, the child will be positioned so that its center is in the middle of
    // the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.CenterVertically)
            .background(Color.Yellow)
    )
    // Gravity.Bottom, the child will be positioned so that its bottom edge is aligned to the
    // bottom of the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.Bottom)
            .background(Color.Green)
    )
}

alignBy

@Stable open fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy. alignBy is a form of align, so both modifiers will not work together if specified for the same layout. alignBy can be used to align two layouts by baseline inside a Row, using alignBy(FirstBaseline). Within a Row, all components with alignBy will align vertically using the specified HorizontalAlignmentLines or values provided using the other alignBy overload, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Top align in Row, 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 Row has the alignBy modifier specified the element will be positioned as if it had Alignment.Top align.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.material.Text

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

See Also

alignByBaseline

alignBy

@Stable open fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier

Position the element vertically such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy. alignBy is a form of align, so both modifiers will not work together if specified for the same layout. Within a Row, all components with alignBy will align vertically using the specified HorizontalAlignmentLines or values obtained from alignmentLineBlock, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Top align in Row, 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 Row has the alignBy modifier specified the element will be positioned as if it had Alignment.Top align.

Example usage:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.material.Text

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

alignByBaseline

@Stable open fun Modifier.alignByBaseline(): Modifier

Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy. This modifier is a form of align, so both modifiers will not work together if specified for the same layout. alignByBaseline is a particular case of alignBy. See alignBy for more details.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.material.Text

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

See Also

alignBy

alignWithSiblings

open fun Modifier.alignWithSiblings(alignmentLine: HorizontalAlignmentLine): Modifier

Deprecated.

alignWithSiblings

open fun Modifier.alignWithSiblings(alignmentLineBlock: (Measured) -> Int): Modifier

Deprecated.

weight

@Stable open fun Modifier.weight(
    @FloatRange(0.0, 3.4E38, false) weight: Float, 
    fill: Boolean = true
): Modifier

Size the element's width proportional to its weight relative to other weighted sibling elements in the