RowScope
@Immutable interface RowScope
androidx.compose.foundation.layout.RowScope |
Scope for the children of Row.
Summary
Nested classes | |
---|---|
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 |
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 |
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 |
Size the element's width proportional to its weight relative to other weighted sibling elements in the Row. |
Extension functions | ||
---|---|---|
From androidx.compose.animation
|
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
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
alignWithSiblings
open fun Modifier.alignWithSiblings(alignmentLine: HorizontalAlignmentLine): Modifier
Deprecated.
alignWithSiblings
open fun Modifier.alignWithSiblings(alignmentLineBlock: (Measured) -> Int): Modifier
Deprecated.