ContextualFlowColumnScope

Artifact: androidx.compose.foundation:foundation-layout

View Source

Added in 1.7.0-alpha07

---

Kotlin |Java

Common/AllAndroid/JVM

• Cmn

  @LayoutScopeMarker
  @ExperimentalLayoutApi
  interface ContextualFlowColumnScope : FlowColumnScope

---

Provides a scope for items within a ContextualFlowColumn.

Summary

Public properties
Int	indexInLine 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	lineIndex 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	maxHeightInLine Establishes the maximum height (main-axis dimension) permissible for the next UI component, aligned with its lineIndex and indexInLine.	Cmn
Dp	maxWidth 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 Modifier.align(alignment: Alignment.Horizontal) 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 Modifier.alignBy(alignmentLine: VerticalAlignmentLine) 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
From androidx.compose.foundation.layout.FlowColumnScope 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

indexInLine

Cmn

Added in 1.7.0-alpha07

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: ${[e-mail]}" +
                "\nPs: ${[e-mail]}",
            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: ${[e-mail]}" +
                "\nPs: ${[e-mail]}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}

lineIndex

Cmn

Added in 1.7.0-alpha07

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: ${[e-mail]}" +
                "\nPs: ${[e-mail]}",
            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: ${[e-mail]}" +
                "\nPs: ${[e-mail]}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp)
        )
    }
}

maxHeightInLine

Cmn

Added in 1.7.0-alpha07

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-alpha07

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.