ContextualFlowRowScope

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)
        )
    }
}

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)
        )
    }
}

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.

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.