ContextualFlowRowScope

Defines the scope for items within a ContextualFlowRow.

Summary

Public functions
Modifier
@ExperimentalLayoutApi
Modifier.fillMaxRowHeight(fraction: @FloatRange(from = 0.0, to = 1.0) Float)

Have the item fill (possibly only partially) the max height of the tallest item in the row it was placed in, within the FlowRow.
Cmn

Public properties
Int

Marks the index within the current row/column where the next component is to be inserted, assuming it conforms to the row's or column's maxWidthInLine and maxHeight limitations.
Cmn
Int

Identifies the row or column index where the UI component(s) are to be placed, provided they do not exceed the specified maxWidthInLine and maxHeight for that row or column.
Cmn
Dp

Determines the maximum allowable height (cross-axis) for the forthcoming UI component, aligned with its lineIndex and indexInLine.
Cmn
Dp

Specifies the maximum permissible width (main-axis) for the upcoming UI component at the given lineIndex and indexInLine.
Cmn

Inherited functions
From androidx.compose.foundation.layout.RowScope
Modifier

Align the element vertically within the Row.
Cmn
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.
Cmn
Modifier

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy.
Cmn
Modifier

Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy.
Cmn
Modifier
Modifier.weight(
    weight: @FloatRange(from = 0.0, fromInclusive = false) Float,
    fill: Boolean
)

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

Public functions

fillMaxRowHeight

Cmn 
@ExperimentalLayoutApi
fun Modifier.fillMaxRowHeight(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
): Modifier

Have the item fill (possibly only partially) the max height of the tallest item in the row it was placed in, within the FlowRow.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowRow(
    Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 3,
) {
    repeat(9) {
        Box(Modifier.width(100.dp).background(Color.Green).fillMaxRowHeight(1f)) {
            val text = generateRandomString(IntRange(10, 50).random())
            Text(text = text, fontSize = 18.sp, modifier = Modifier.padding(3.dp))
        }
    }
}
Parameters
fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f

The fraction of the max height of the tallest item between 0 and 1, inclusive.

Example usage:

Public properties

indexInLine

Cmn
Added in 1.7.0
val indexInLine: Int

Marks the index within the current row/column where the next component is to be inserted, assuming it conforms to the row's or column's maxWidthInLine and maxHeight limitations.

In scenarios where multiple UI components are returned in one index call, this parameter is relevant solely to the first returned UI component, presuming it complies with the row's or column's defined constraints.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowRow(
    modifier = Modifier.fillMaxWidth(1f).height(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 4,
    itemCount = 12
) {
    val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine)
    val height = 50.dp.coerceAtMost(maxHeight)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowRow.lineIndex}" +
                    "\nPs: ${this@ContextualFlowRow.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}
 
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowColumn
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowColumn(
    modifier = Modifier.fillMaxHeight(1f).width(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 4,
    itemCount = 12
) {
    val width = 50.dp.coerceAtMost(maxWidth)
    val height = Random.nextInt(80, 100).dp.coerceAtMost(maxHeightInLine)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowColumn.lineIndex}" +
                    "\nPs: ${this@ContextualFlowColumn.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}

lineIndex

Cmn
Added in 1.7.0
val lineIndex: Int

Identifies the row or column index where the UI component(s) are to be placed, provided they do not exceed the specified maxWidthInLine and maxHeight for that row or column.

Should the component(s) surpass these dimensions, their placement may shift to the subsequent row/column or they may be omitted from display, contingent upon the defined constraints.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowRow(
    modifier = Modifier.fillMaxWidth(1f).height(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 4,
    itemCount = 12
) {
    val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine)
    val height = 50.dp.coerceAtMost(maxHeight)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowRow.lineIndex}" +
                    "\nPs: ${this@ContextualFlowRow.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}
 
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowColumn
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowColumn(
    modifier = Modifier.fillMaxHeight(1f).width(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 4,
    itemCount = 12
) {
    val width = 50.dp.coerceAtMost(maxWidth)
    val height = Random.nextInt(80, 100).dp.coerceAtMost(maxHeightInLine)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowColumn.lineIndex}" +
                    "\nPs: ${this@ContextualFlowColumn.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}

maxHeight

Cmn
Added in 1.7.0
val maxHeight: Dp

Determines the maximum allowable height (cross-axis) for the forthcoming UI component, aligned with its lineIndex and indexInLine. Should this height threshold be exceeded, the component's visibility will depend on the overflow settings, potentially leading to its exclusion.

maxWidthInLine

Cmn
Added in 1.7.0
val maxWidthInLine: Dp

Specifies the maximum permissible width (main-axis) for the upcoming UI component at the given lineIndex and indexInLine. Exceeding this width may result in the component being reallocated to the following row within the ContextualFlowRow structure, subject to existing constraints.