ContextualFlowColumnScope

Provides a scope for items within a ContextualFlowColumn.

Summary

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

Have the item fill (possibly only partially) the max width of the widest item in the column it was placed in, within the FlowColumn.
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 maxWidth and maxHeightInLine 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 maxWidth and maxHeightInLine for that row or column.
Cmn
Dp

Establishes the maximum height (main-axis dimension) permissible for the next UI component, aligned with its lineIndex and indexInLine.
Cmn
Dp

Sets the maximum width (cross-axis dimension) that the upcoming UI component can occupy, based on its lineIndex and indexInLine.
Cmn

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

Align the element horizontally within the Column.
Cmn
Modifier
Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)

Position the element horizontally 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 horizontally such that its alignmentLine aligns with sibling elements also configured to alignBy.
Cmn
Modifier
Modifier.weight(
    weight: @FloatRange(from = 0.0, fromInclusive = false) Float,
    fill: Boolean
)

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

Public functions

fillMaxColumnWidth

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

Have the item fill (possibly only partially) the max width of the widest item in the column it was placed in, within the FlowColumn.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
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

FlowColumn(
    Modifier.padding(20.dp)
        .wrapContentHeight(align = Alignment.Top)
        .wrapContentWidth(align = Alignment.Start),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 3,
) {
    repeat(9) {
        Box(Modifier.height(100.dp).fillMaxColumnWidth(1f).background(Color.Green)) {
            val text = generateRandomString(IntRange(1, 5).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 width of the widest 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 maxWidth and maxHeightInLine 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 maxWidth and maxHeightInLine 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)
        )
    }
}

maxHeightInLine

Cmn
Added in 1.7.0
val maxHeightInLine: Dp

Establishes the maximum height (main-axis dimension) permissible for the next UI component, aligned with its lineIndex and indexInLine. Should the component's height exceed this limit, it may be shifted to the subsequent column in ContextualFlowColumn, subject to the predefined constraints.

maxWidth

Cmn
Added in 1.7.0
val maxWidth: Dp

Sets the maximum width (cross-axis dimension) that the upcoming UI component can occupy, based on its lineIndex and indexInLine. Exceeding this width might result in the component not being displayed, depending on the ContextualFlowColumnOverflow.Visible overflow configuration.