# ConstraintLayoutBaseScope
Artifact: [androidx.constraintlayout:constraintlayout-compose](https://developer.android.com/jetpack/androidx/releases/constraintlayout) [View Source](https://cs.android.com/search?q=file:androidx/constraintlayout/compose/ConstraintLayoutBaseScope.kt+class:androidx.constraintlayout.compose.ConstraintLayoutBaseScope) Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
abstract class ConstraintLayoutBaseScope
```
Known direct subclasses [ConstraintLayoutScope](https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutScope), [ConstraintSetScope](https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintSetScope)
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutScope` | Scope used by the inline DSL of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintSetScope` | Scope used by the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintSet` DSL. |
*** ** * ** ***
Common scope for `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutScope` and `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintSetScope`, the content being shared between the inline DSL API and the ConstraintSet-based API.
## Summary
| ### Nested types |
|---|
| `data class https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.BaselineAnchor` Represents a horizontal anchor corresponding to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` of a layout that other layouts can link to in their `Modifier.constrainAs` or `constrain` blocks. |
| `data class https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` Represents a horizontal anchor (e.g. top/bottom of a layout, guideline) that layouts can link to in their `Modifier.constrainAs` or `constrain` blocks. |
| `data class https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` Represents a vertical anchor (e.g. start/end of a layout, guideline) that layouts can link to in their `Modifier.constrainAs` or `constrain` blocks. |
| ### Public constructors |
|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#ConstraintLayoutBaseScope()()` |
| ### Public functions |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#applyTo(androidx.constraintlayout.compose.State)(state: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/State)` |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.ConstrainedLayoutReference,kotlin.Function1)(ref: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference, constrainBlock: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Specifies the constraints associated to the layout identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.ConstrainedLayoutReference,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalChainScope` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.HorizontalChainReference,kotlin.Function1)(ref: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalChainReference, constrainBlock: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalChainScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Specifies additional constraints associated to the horizontal chain identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.HorizontalChainReference,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalChainScope` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.VerticalChainReference,kotlin.Function1)(ref: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalChainReference, constrainBlock: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalChainScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Specifies additional constraints associated to the vertical chain identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.VerticalChainReference,kotlin.Function1)`. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(kotlin.Array,kotlin.Function1)( vararg refs: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference, constrainBlock: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Convenient way to apply the same constraints to multiple `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference`s. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createAbsoluteLeftBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns a left barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createAbsoluteRightBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns a right barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createBottomBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns a bottom barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createColumn(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, weights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html )` Creates a Grid based helper that lays out its elements in a single Column. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createEndBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns an end barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createFlow(kotlin.Array,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.constraintlayout.compose.Wrap,androidx.constraintlayout.compose.VerticalAlign,androidx.constraintlayout.compose.HorizontalAlign,kotlin.Float,kotlin.Float,androidx.constraintlayout.compose.FlowStyle,androidx.constraintlayout.compose.FlowStyle)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?, flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, padding: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap, verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign, horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign, horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle, horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle )` Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createFlow(kotlin.Array,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.constraintlayout.compose.Wrap,androidx.constraintlayout.compose.VerticalAlign,androidx.constraintlayout.compose.HorizontalAlign,kotlin.Float,kotlin.Float,androidx.constraintlayout.compose.FlowStyle,androidx.constraintlayout.compose.FlowStyle)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?, flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, paddingHorizontal: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, paddingVertical: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap, verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign, horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign, horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle, horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle )` Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createFlow(kotlin.Array,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.constraintlayout.compose.Wrap,androidx.constraintlayout.compose.VerticalAlign,androidx.constraintlayout.compose.HorizontalAlign,kotlin.Float,kotlin.Float,androidx.constraintlayout.compose.FlowStyle,androidx.constraintlayout.compose.FlowStyle)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?, flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, paddingLeft: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, paddingTop: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, paddingRight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, paddingBottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap, verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign, horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign, horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle, horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle )` Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, rows: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, columns: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, isHorizontalArrangement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, horizontalSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, rowWeights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html, columnWeights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html, skips: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-array/index.html, spans: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-array/index.html, flags: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/GridFlag )` Helper that creates a fixed Grid layout. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteLeft(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a width fraction from the left of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteLeft(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the left of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteRight(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a width fraction from the right of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteRight(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the right of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromBottom(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a height percentage from the bottom of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromBottom(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the bottom of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromEnd(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a width fraction from the end of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromEnd(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the end of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromStart(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a specific offset from the start of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromStart(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the start of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromTop(kotlin.Float)(fraction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a guideline at a height fraction from the top of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromTop(androidx.compose.ui.unit.Dp)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates a guideline at a specific offset from the top of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalChainReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createHorizontalChain(kotlin.Array,androidx.constraintlayout.compose.ChainStyle)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, chainStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ChainStyle )` Creates a horizontal chain including the referenced layouts. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createRow(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, weights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html )` Creates a Grid based helper that lays out its elements in a single Row. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.VerticalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createStartBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns a start barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope.HorizontalAnchor` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createTopBarrier(kotlin.Array,androidx.compose.ui.unit.Dp)(vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, margin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Creates and returns a top barrier, containing the specified elements. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalChainReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createVerticalChain(kotlin.Array,androidx.constraintlayout.compose.ChainStyle)( vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference, chainStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ChainStyle )` Creates a vertical chain including the referenced layouts. |
| `open operator https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#equals(kotlin.Any)(other: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?)` |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#hashCode()()` |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#reset()()` |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference.https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#(androidx.constraintlayout.compose.LayoutReference).withChainParams(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)( startMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, topMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, endMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottomMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, startGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, topGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, endGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottomGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Sets the parameters that are used by chains to customize the resulting layout. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference.https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#(androidx.constraintlayout.compose.LayoutReference).withHorizontalChainParams(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)( startMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, endMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, startGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, endGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Sets the parameters that are used by horizontal chains to customize the resulting layout. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference.https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#(androidx.constraintlayout.compose.LayoutReference).withVerticalChainParams(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)( topMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottomMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, topGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottomGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Sets the parameters that are used by vertical chains to customize the resulting layout. |
| ### Protected properties |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-mutable-list/index.html<(https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/State) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html>` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#tasks()` **This property is deprecated.** Tasks is unused, it breaks the immutability promise. |
## Public constructors
### ConstraintLayoutBaseScope
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
ConstraintLayoutBaseScope()
```
## Public functions
### applyTo
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun applyTo(state: State): Unit
```
### constrain
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun constrain(ref: ConstrainedLayoutReference, constrainBlock: ConstrainScope.() -> Unit): ConstrainScope
```
Specifies the constraints associated to the layout identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.ConstrainedLayoutReference,kotlin.Function1)`.
### constrain
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun constrain(ref: HorizontalChainReference, constrainBlock: HorizontalChainScope.() -> Unit): HorizontalChainScope
```
Specifies additional constraints associated to the horizontal chain identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.HorizontalChainReference,kotlin.Function1)`.
### constrain
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun constrain(ref: VerticalChainReference, constrainBlock: VerticalChainScope.() -> Unit): VerticalChainScope
```
Specifies additional constraints associated to the vertical chain identified with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.VerticalChainReference,kotlin.Function1)`.
### constrain
```
fun constrain(
vararg refs: ConstrainedLayoutReference,
constrainBlock: ConstrainScope.() -> Unit
): Unit
```
Convenient way to apply the same constraints to multiple `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference`s.
### createAbsoluteLeftBarrier
```
fun createAbsoluteLeftBarrier(
vararg elements: LayoutReference,
margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates and returns a left barrier, containing the specified elements.
### createAbsoluteRightBarrier
```
fun createAbsoluteRightBarrier(
vararg elements: LayoutReference,
margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates and returns a right barrier, containing the specified elements.
### createBottomBarrier
```
fun createBottomBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates and returns a bottom barrier, containing the specified elements.
### createColumn
```
fun createColumn(
vararg elements: LayoutReference,
spacing: Dp = 0.dp,
weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference
```
Creates a Grid based helper that lays out its elements in a single Column.
Example:
```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
ConstraintLayout(
constraintSet =
ConstraintSet {
val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
val column =
createColumn(
a,
b,
c,
d,
e,
spacing = 10.dp,
weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
)
constrain(column) {
width = Dimension.matchParent
height = Dimension.matchParent
}
constrain(a, b, c, d, e) { height = Dimension.fillToConstraints }
},
modifier = Modifier.fillMaxSize()
) {
repeat(5) {
Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
}
}
```
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Grid-based Column helper |
| `spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Defines the vertical spacing between each item in the Column. |
| `weights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html = floatArrayOf()` | Defines the weight for each element in the Column. Note that the number of weights provided are expected to match the number of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createColumn(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` given. |
| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | When non empty `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createColumn(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` don't match the number of elements. |
| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` | |
### createEndBarrier
```
fun createEndBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates and returns an end barrier, containing the specified elements.
### createFlow
```
fun createFlow(
vararg elements: LayoutReference?,
flowVertically: Boolean = false,
verticalGap: Dp = 0.dp,
horizontalGap: Dp = 0.dp,
maxElement: Int = 0,
padding: Dp = 0.dp,
wrapMode: Wrap = Wrap.None,
verticalAlign: VerticalAlign = VerticalAlign.Center,
horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
horizontalFlowBias: Float = 0.0f,
verticalFlowBias: Float = 0.0f,
verticalStyle: FlowStyle = FlowStyle.Packed,
horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference
```
Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Flow helper |
| `flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | if set to true arranges the Composables from top to bottom. Normally they are arranged from left to right. |
| `verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the y axis |
| `horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the x axis |
| `maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | defines the maximum element on a row before it if the |
| `padding: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets padding around the content |
| `wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap = Wrap.None` | sets the way reach maxElements is handled `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#None()` (default) -- no wrap behavior, `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#Chain()` - create additional chains |
| `verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign = VerticalAlign.Center` | set the way elements are aligned vertically. Center is default |
| `horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign = HorizontalAlign.Center` | set the way elements are aligned horizontally. Center is default |
| `horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | set the way elements are aligned vertically Center is default |
| `verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | sets the top bottom bias of the vertical chain |
| `verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | sets the style of a vertical chain (Spread,Packed, or SpreadInside) |
| `horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | set the style of the horizontal chain (Spread, Packed, or SpreadInside) |
### createFlow
```
fun createFlow(
vararg elements: LayoutReference?,
flowVertically: Boolean = false,
verticalGap: Dp = 0.dp,
horizontalGap: Dp = 0.dp,
maxElement: Int = 0,
paddingHorizontal: Dp = 0.dp,
paddingVertical: Dp = 0.dp,
wrapMode: Wrap = Wrap.None,
verticalAlign: VerticalAlign = VerticalAlign.Center,
horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
horizontalFlowBias: Float = 0.0f,
verticalFlowBias: Float = 0.0f,
verticalStyle: FlowStyle = FlowStyle.Packed,
horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference
```
Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Flow helper |
| `flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | if set to true aranges the Composables from top to bottom. Normally they are arranged from left to right. |
| `verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the y axis |
| `horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the x axis |
| `maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | defines the maximum element on a row before it if the |
| `paddingHorizontal: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingLeft and paddingRight of the content |
| `paddingVertical: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingTop and paddingBottom of the content |
| `wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap = Wrap.None` | sets the way reach maxElements is handled `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#None()` (default) -- no wrap behavior, `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#Chain()` - create additional chains |
| `verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign = VerticalAlign.Center` | set the way elements are aligned vertically. Center is default |
| `horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign = HorizontalAlign.Center` | set the way elements are aligned horizontally. Center is default |
| `horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | set the way elements are aligned vertically Center is default |
| `verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | sets the top bottom bias of the vertical chain |
| `verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | sets the style of a vertical chain (Spread,Packed, or SpreadInside) |
| `horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | set the style of the horizontal chain (Spread, Packed, or SpreadInside) |
### createFlow
```
fun createFlow(
vararg elements: LayoutReference?,
flowVertically: Boolean = false,
verticalGap: Dp = 0.dp,
horizontalGap: Dp = 0.dp,
maxElement: Int = 0,
paddingLeft: Dp = 0.dp,
paddingTop: Dp = 0.dp,
paddingRight: Dp = 0.dp,
paddingBottom: Dp = 0.dp,
wrapMode: Wrap = Wrap.None,
verticalAlign: VerticalAlign = VerticalAlign.Center,
horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
horizontalFlowBias: Float = 0.0f,
verticalFlowBias: Float = 0.0f,
verticalStyle: FlowStyle = FlowStyle.Packed,
horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference
```
Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference?` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Flow helper |
| `flowVertically: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | if set to true aranges the Composables from top to bottom. Normally they are arranged from left to right. |
| `verticalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the y axis |
| `horizontalGap: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | defines the gap between views in the x axis |
| `maxElement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | defines the maximum element on a row before it if the |
| `paddingLeft: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingLeft of the content |
| `paddingTop: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingTop of the content |
| `paddingRight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingRight of the content |
| `paddingBottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | sets paddingBottom of the content |
| `wrapMode: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap = Wrap.None` | sets the way reach maxElements is handled `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#None()` (default) -- no wrap behavior, `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Wrap#Chain()` - create additional chains |
| `verticalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalAlign = VerticalAlign.Center` | set the way elements are aligned vertically. Center is default |
| `horizontalAlign: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalAlign = HorizontalAlign.Center` | set the way elements are aligned horizontally. Center is default |
| `horizontalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | set the way elements are aligned vertically Center is default |
| `verticalFlowBias: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | sets the top bottom bias of the vertical chain |
| `verticalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | sets the style of a vertical chain (Spread,Packed, or SpreadInside) |
| `horizontalStyle: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/FlowStyle = FlowStyle.Packed` | set the style of the horizontal chain (Spread, Packed, or SpreadInside) |
### createGrid
```
fun createGrid(
vararg elements: LayoutReference,
rows: @IntRange(from = 1) Int,
columns: @IntRange(from = 1) Int,
isHorizontalArrangement: Boolean = true,
verticalSpacing: Dp = 0.dp,
horizontalSpacing: Dp = 0.dp,
rowWeights: FloatArray = floatArrayOf(),
columnWeights: FloatArray = floatArrayOf(),
skips: Array = arrayOf(),
spans: Array = arrayOf(),
flags: GridFlag = GridFlag.None
): ConstrainedLayoutReference
```
Helper that creates a fixed Grid layout.
A grid is defined by a set number of rows and columns. By default the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` are arranged horizontally first (left to right, then top to bottom).
Either `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` or `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` may be provided to modify their size in the grid relative to each other.
You may provide `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span`s to define size of each cell within the grid.
To avoid placing Layouts in specific cells (or an area within the grid), you may provide `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)`. Note that if the provided `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span`s and `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip`s overlap, the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip`s will take priority, ignoring the overlapping `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span` definition.
Here's an example showing how to build a calculator layout using a couple of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span`s:
```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
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.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Span
import androidx.constraintlayout.compose.atMost
// For most of the keys we can just use the displayed text as the ID.
val ids =
arrayOf(
// Text box will span all 4 columns and the first 2 of rows
"textBox",
"C",
"+/-",
"%",
"/",
"7",
"8",
"9",
"*",
"4",
"5",
"6",
"-",
"1",
"2",
"3",
"+",
// The '0' will span two columns, note that it's on the 24th position in the grid
"0",
".",
"="
)
ConstraintLayout(
constraintSet =
ConstraintSet {
val idRefs = Array(ids.size) { createRefFor(ids[it]) }
val g1 =
createGrid(
elements = idRefs,
rows = 7,
columns = 4,
verticalSpacing = 10.dp,
horizontalSpacing = 10.dp,
spans =
arrayOf(
// textBox
Span(position = 0, rows = 2, columns = 4),
// '0' key
Span(position = 24, rows = 1, columns = 2)
)
)
constrain(g1) {
width = Dimension.matchParent
height = Dimension.matchParent
}
constrain(*idRefs) {
// Make all the layouts fill up their space, you may still use coercing methods
// such as `atMost(Dp)` or `atMostWrapContent()` to further limit their size.
width = Dimension.fillToConstraints
height = Dimension.fillToConstraints
}
},
modifier = Modifier.fillMaxSize()
) {
ids.forEach { id ->
when (id) {
"textBox" -> {
Box(
modifier =
Modifier.background(Color.Gray)
// As usual, IDs should only be assigned on top-level children
.layoutId(id),
contentAlignment = Alignment.BottomEnd
) {
Text(text = "100", fontSize = 80.sp)
}
}
else -> {
Button(onClick = {}, Modifier.layoutId(id)) {
Text(text = id, fontSize = 30.sp)
}
}
}
}
}
```
Here's another example using `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip`s to easily lay out the typical Keyboard navigation pad:
```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
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.layout.layoutId
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Skip
import androidx.constraintlayout.compose.atMost
val keys =
arrayOf("Insert", "Home", "Page Up", "Delete", "End", "Page Down", "↑", "←", "↓", "→")
ConstraintLayout(
constraintSet =
ConstraintSet {
val keyRefs = Array(keys.size) { createRefFor(keys[it]) }
val g1 =
createGrid(
elements = keyRefs,
rows = 5,
columns = 3,
verticalSpacing = 8.dp,
horizontalSpacing = 8.dp,
skips =
arrayOf(
// These positions follow the expected Grid cells indexing
// Arranged horizontally by default:
// - 0 is top-left
// - 14 is bottom-right (5 rows x 3 columns - 1)
Skip(position = 6, rows = 1, columns = 3),
Skip(position = 9, rows = 1, columns = 1),
Skip(position = 11, rows = 1, columns = 1)
)
)
constrain(g1) {
width = Dimension.matchParent
height = Dimension.matchParent
}
constrain(*keyRefs) {
width = Dimension.fillToConstraints.atMost(100.dp)
height = Dimension.fillToConstraints.atMost(100.dp)
}
},
modifier = Modifier.fillMaxSize()
) {
keys.forEachIndexed { index, key ->
Box(
modifier = Modifier.layoutId(key).background(Color.LightGray),
contentAlignment = Alignment.Center
) {
Text(
text = key,
textAlign = TextAlign.Center,
// Make fontSize bigger for the arrow keys
fontSize = if (index >= 6) 24.sp else TextUnit.Unspecified
)
}
}
}
```
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Grid helper. By default, they are positioned in the given order based on the arrangement. Horizontal arrangement by default. |
| `rows: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Sets the number of rows in the Grid |
| `columns: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Sets the number of columns in the Grid |
| `isHorizontalArrangement: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether to place the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` horizontally, filling the cells from left to right and top to bottom. Otherwise, the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` are placed vertically, filling each cell from top to bottom and left to right. `true` by default. |
| `verticalSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Defines the gap between each row. |
| `horizontalSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Defines the gap between each column. |
| `rowWeights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html = floatArrayOf()` | Defines the weight for each row. The weight specifies how much space each row takes relative to each other. Should be either an empty array (all rows are the same size), or have a value corresponding for each row. |
| `columnWeights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html = floatArrayOf()` | Defines the weight for each column. The weight specifies how much space each column takes relative to each other. Should be either an empty array (all columns are the same size), or have a value corresponding for each column. |
| `skips: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-array/index.html = arrayOf()` | A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip` defines an area within the Grid where Layouts may **not** be placed. So, as the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` are being placed, they will skip any cell covered by the given skips. |
| `spans: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-array/index.html = arrayOf()` | A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span` defines how much area should each cell occupy when placing an item on it. Keep in mind that when laying out, the Grid won't place any overlapping items over the spanned area. In that sense, a `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span` works similarly to a `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip`, except that an item will be placed at the original spanned cell position. Also note, `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` take priority over spans, meaning that defining a `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Span` that overlaps a `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Skip` is a no-op. |
| `flags: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/GridFlag = GridFlag.None` | A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/GridFlag` definition that may change certain behaviors of the Grid helper. `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/GridFlag#None()` by default. |
| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | When non empty weights don't match the number of columns or rows respectively. |
| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createColumn(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` | |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createRow(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` | |
### createGuidelineFromAbsoluteLeft
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromAbsoluteLeft(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a width fraction from the left of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteLeft(kotlin.Float)` of 0f will correspond to the left of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the right.
### createGuidelineFromAbsoluteLeft
```
fun createGuidelineFromAbsoluteLeft(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a specific offset from the left of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createGuidelineFromAbsoluteRight
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromAbsoluteRight(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a width fraction from the right of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromAbsoluteRight(kotlin.Float)` of 0f will correspond to the right of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the left.
### createGuidelineFromAbsoluteRight
```
fun createGuidelineFromAbsoluteRight(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a specific offset from the right of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createGuidelineFromBottom
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromBottom(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates a guideline at a height percentage from the bottom of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromBottom(kotlin.Float)` of 0f will correspond to the bottom of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the top.
### createGuidelineFromBottom
```
fun createGuidelineFromBottom(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates a guideline at a specific offset from the bottom of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createGuidelineFromEnd
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromEnd(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a width fraction from the end of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromEnd(kotlin.Float)` of 0f will correspond to the end of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the start.
### createGuidelineFromEnd
```
fun createGuidelineFromEnd(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a specific offset from the end of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createGuidelineFromStart
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromStart(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a specific offset from the start of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromStart(kotlin.Float)` of 0f will correspond to the start of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the end.
### createGuidelineFromStart
```
fun createGuidelineFromStart(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates a guideline at a specific offset from the start of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createGuidelineFromTop
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
fun createGuidelineFromTop(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates a guideline at a height fraction from the top of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`. A `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGuidelineFromTop(kotlin.Float)` of 0f will correspond to the top of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`, while 1f will correspond to the bottom.
### createGuidelineFromTop
```
fun createGuidelineFromTop(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates a guideline at a specific offset from the top of the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)`.
### createHorizontalChain
```
fun createHorizontalChain(
vararg elements: LayoutReference,
chainStyle: ChainStyle = ChainStyle.Spread
): HorizontalChainReference
```
Creates a horizontal chain including the referenced layouts.
Use `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.HorizontalChainReference,kotlin.Function1)` with the resulting `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/HorizontalChainReference` to modify the start/left and end/right constraints of this chain.
### createRow
```
fun createRow(
vararg elements: LayoutReference,
spacing: Dp = 0.dp,
weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference
```
Creates a Grid based helper that lays out its elements in a single Row.
Example:
```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
ConstraintLayout(
constraintSet =
ConstraintSet {
val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
val row =
createRow(
a,
b,
c,
d,
e,
spacing = 10.dp,
weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
)
constrain(row) {
width = Dimension.matchParent
height = Dimension.matchParent
}
constrain(a, b, c, d, e) { width = Dimension.fillToConstraints }
},
modifier = Modifier.fillMaxSize()
) {
repeat(5) {
Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
}
}
```
| Parameters |
|---|---|
| `vararg elements: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference`s to be laid out by the Grid-based Row helper. |
| `spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Defines the horizontal spacing between each item in the Row. |
| `weights: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float-array/index.html = floatArrayOf()` | Defines the weight for each element in the Row. Note that the number of weights provided are expected to match the number of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createRow(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` given. |
| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | When non empty `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createRow(kotlin.Array,androidx.compose.ui.unit.Dp,kotlin.FloatArray)` don't match the number of elements. |
| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#createGrid(kotlin.Array,kotlin.Int,kotlin.Int,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.FloatArray,kotlin.FloatArray,kotlin.Array,kotlin.Array,androidx.constraintlayout.compose.GridFlag)` | |
### createStartBarrier
```
fun createStartBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor
```
Creates and returns a start barrier, containing the specified elements.
### createTopBarrier
```
fun createTopBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor
```
Creates and returns a top barrier, containing the specified elements.
### createVerticalChain
```
fun createVerticalChain(
vararg elements: LayoutReference,
chainStyle: ChainStyle = ChainStyle.Spread
): VerticalChainReference
```
Creates a vertical chain including the referenced layouts.
Use `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayoutBaseScope#constrain(androidx.constraintlayout.compose.HorizontalChainReference,kotlin.Function1)` with the resulting `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/VerticalChainReference` to modify the top and bottom constraints of this chain.
### equals
```
open operator fun equals(other: Any?): Boolean
```
### hashCode
```
open fun hashCode(): Int
```
### reset
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
open fun reset(): Unit
```
### LayoutReference.withChainParams
Artifact: [androidx.constraintlayout:constraintlayout-compose](https://developer.android.com/jetpack/androidx/releases/constraintlayout) [View Source](https://cs.android.com/search?q=file:androidx/constraintlayout/compose/ConstraintLayoutBaseScope.kt+function:withChainParams)
```
fun LayoutReference.withChainParams(
startMargin: Dp = 0.dp,
topMargin: Dp = 0.dp,
endMargin: Dp = 0.dp,
bottomMargin: Dp = 0.dp,
startGoneMargin: Dp = 0.dp,
topGoneMargin: Dp = 0.dp,
endGoneMargin: Dp = 0.dp,
bottomGoneMargin: Dp = 0.dp,
weight: Float = Float.NaN
): LayoutReference
```
Sets the parameters that are used by chains to customize the resulting layout.
Use margins to customize the space between widgets in the chain.
Use weight to distribute available space to each widget when their dimensions are not fixed.
Similarly named parameters available from `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope#linkTo(androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)` are ignored in Chains.
Since margins are only for widgets within the chain: Top, Start and End, Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.
| Parameters |
|---|---|
| `startMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the start of this widget to the previous widget |
| `topMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the top of this widget to the previous widget |
| `endMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the end of this widget to the next widget |
| `bottomMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the bottom of this widget to the next widget |
| `startGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the start of this widget when the previous widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `topGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the top of this widget when the previous widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `endGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the end of this widget when the next widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `bottomGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the bottom of this widget when the next widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = Float.NaN` | Defines the proportion of space (relative to the total weight) occupied by this layout when the corresponding dimension is not a fixed value. |
| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | The same `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` instance with the applied values |
### LayoutReference.withHorizontalChainParams
Artifact: [androidx.constraintlayout:constraintlayout-compose](https://developer.android.com/jetpack/androidx/releases/constraintlayout) [View Source](https://cs.android.com/search?q=file:androidx/constraintlayout/compose/ConstraintLayoutBaseScope.kt+function:withHorizontalChainParams)
```
fun LayoutReference.withHorizontalChainParams(
startMargin: Dp = 0.dp,
endMargin: Dp = 0.dp,
startGoneMargin: Dp = 0.dp,
endGoneMargin: Dp = 0.dp,
weight: Float = Float.NaN
): LayoutReference
```
Sets the parameters that are used by horizontal chains to customize the resulting layout.
Use margins to customize the space between widgets in the chain.
Use weight to distribute available space to each widget when their horizontal dimension is not fixed.
Similarly named parameters available from `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope#linkTo(androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)` are ignored in Chains.
Since margins are only for widgets within the chain: Start and End margins are ignored when the widget is the first or the last element in the chain, respectively.
| Parameters |
|---|---|
| `startMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the start of this widget to the previous widget |
| `endMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the end of this widget to the next widget |
| `startGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the start of this widget when the previous widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `endGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the end of this widget when the next widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = Float.NaN` | Defines the proportion of space (relative to the total weight) occupied by this layout when the width is not a fixed dimension. |
| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | The same `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` instance with the applied values |
### LayoutReference.withVerticalChainParams
Artifact: [androidx.constraintlayout:constraintlayout-compose](https://developer.android.com/jetpack/androidx/releases/constraintlayout) [View Source](https://cs.android.com/search?q=file:androidx/constraintlayout/compose/ConstraintLayoutBaseScope.kt+function:withVerticalChainParams)
```
fun LayoutReference.withVerticalChainParams(
topMargin: Dp = 0.dp,
bottomMargin: Dp = 0.dp,
topGoneMargin: Dp = 0.dp,
bottomGoneMargin: Dp = 0.dp,
weight: Float = Float.NaN
): LayoutReference
```
Sets the parameters that are used by vertical chains to customize the resulting layout.
Use margins to customize the space between widgets in the chain.
Use weight to distribute available space to each widget when their vertical dimension is not fixed.
Similarly named parameters available from `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainScope#linkTo(androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.constraintlayout.compose.ConstraintLayoutBaseScope.VerticalAnchor,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float)` are ignored in Chains.
Since margins are only for widgets within the chain: Top and Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.
| Parameters |
|---|---|
| `topMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the top of this widget to the previous widget |
| `bottomMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the bottom of this widget to the next widget |
| `topGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the top of this widget when the previous widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `bottomGoneMargin: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Added space from the bottom of this widget when the next widget has `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Visibility#Gone()` |
| `weight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = Float.NaN` | Defines the proportion of space (relative to the total weight) occupied by this layout when the height is not a fixed dimension. |
| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` | The same `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/LayoutReference` instance with the applied values |
## Protected properties
### tasks
Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2) Deprecated in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)
```
protected val tasks: MutableList<(State) -> Unit>
```
> [!CAUTION]
> **This property is deprecated.**
> Tasks is unused, it breaks the immutability promise.