# Modifier

Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/Modifier.kt+class:androidx.compose.ui.Modifier) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  interface Modifier
  ```
Known direct subclasses [CombinedModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/CombinedModifier), [Modifier.Companion](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Companion), [Modifier.Element](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/CombinedModifier` | A node in a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` chain. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Companion` | The companion object `Modifier` is the empty, default, or starter `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` | A single element contained within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` chain. |

Known indirect subclasses [DrawCacheModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawCacheModifier), [DrawModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawModifier), [FocusEventModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEventModifier), [FocusOrderModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrderModifier), [FocusRequesterModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequesterModifier), [InspectableModifier.End](https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectableModifier.End), [InspectableModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectableModifier), [LayoutModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier), [ModifierLocalConsumer](https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocalConsumer), [ModifierLocalProvider](https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocalProvider), [ModifierNodeElement](https://developer.android.com/reference/kotlin/androidx/compose/ui/node/ModifierNodeElement), [OnGloballyPositionedModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnGloballyPositionedModifier), [OnPlacedModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier), [OnRemeasuredModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnRemeasuredModifier), [ParentDataModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ParentDataModifier), [PointerInputModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputModifier), [RemeasurementModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RemeasurementModifier), [SemanticsModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsModifier)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawCacheModifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawModifier` implementation that supports building a cache of objects to be referenced across draw calls |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that draws into the space of the layout. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEventModifier` | **This interface is deprecated.** Use FocusEventModifierNode instead |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrderModifier` | **This interface is deprecated.** Use Modifier.focusProperties() instead |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequesterModifier` | **This interface is deprecated.** Use FocusRequesterModifierNode instead |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectableModifier.End` | **This class is deprecated.** This API will create more invalidations of your modifier than necessary, so it's use is discouraged. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectableModifier` | **This class is deprecated.** This API will create more invalidations of your modifier than necessary, so it's use is discouraged. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that changes how its wrapped content is measured and laid out. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocalConsumer` | A Modifier that can be used to consume `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that were provided by other modifiers to the left of this modifier, or above this modifier in the layout tree. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocalProvider` | A Modifier that can be used to provide `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that can be read by other modifiers to the right of this modifier, or modifiers that are children of the layout node that this modifier is attached to. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/ModifierNodeElement` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` which manages an instance of a particular `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` implementation. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnGloballyPositionedModifier` | A modifier whose `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnGloballyPositionedModifier#onGloballyPositioned(androidx.compose.ui.layout.LayoutCoordinates)` is called with the final LayoutCoordinates of the Layout when the global position of the content may have changed. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier` | A modifier whose `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnPlacedModifier#onPlaced(androidx.compose.ui.layout.LayoutCoordinates)` is called after the parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout has been placed and before child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnRemeasuredModifier` | A modifier whose `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnRemeasuredModifier#onRemeasured(androidx.compose.ui.unit.IntSize)` is called when the layout content is remeasured. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ParentDataModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that provides data to the parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that can interact with pointer input. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RemeasurementModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that provides a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Remeasurement` object associated with the layout node the modifier is applied to. |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsModifier` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that adds semantics key/value for use in testing, accessibility, and similar use cases. |

*** ** * ** ***

An ordered, immutable collection of `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text(
    "Hello, World!",
    Modifier.padding(16.dp) // Outer padding; outside background
        .background(color = Color.Green) // Solid element background color
        .padding(16.dp), // Inner padding; inside background, around text
)
```

Modifier implementations should offer a fluent factory extension function on `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for creating combined modifiers by starting from existing modifiers:

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class FancyModifier(val level: Float) : Modifier.Element

fun Modifier.fancy(level: Float) = this.then(FancyModifier(level))

Row(Modifier.fancy(1f).padding(10.dp)) {
    // content
}
```

Modifier elements may be combined using `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)`. Order is significant; modifier elements that appear first will be applied first.

Composables that accept a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` as a parameter to be applied to the whole component represented by the composable function should name the parameter `modifier` and assign the parameter a default value of `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`. It should appear as the first optional parameter in the parameter list; after all required parameters (except for trailing lambda parameters) but before any other parameters with default values. Any default modifiers desired by a composable function should come after the `modifier` parameter's value in the composable function's implementation, keeping `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` as the default parameter value. For example:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun PaddedColumn(modifier: Modifier = Modifier) {
    Column(modifier.padding(10.dp)) {
        // ...
    }
}
```

The pattern above allows default modifiers to still be applied as part of the chain if a caller also supplies unrelated modifiers.

Composables that accept modifiers to be applied to a specific subcomponent `foo` should name the parameter `fooModifier` and follow the same guidelines above for default values and behavior. Subcomponent modifiers should be grouped together and follow the parent composable's modifier. For example:

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ButtonBar(
    onOk: () -> Unit,
    onCancel: () -> Unit,
    modifier: Modifier = Modifier,
    buttonModifier: Modifier = Modifier,
) {
    Row(modifier) {
        Button(onCancel, buttonModifier) { Text("Cancel") }
        Button(onOk, buttonModifier) { Text("Ok") }
    }
}
```

## Summary

| ### Nested types |
|---|
| `object https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Companion : https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` The companion object `Modifier` is the empty, default, or starter `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`. |
| `interface https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element : https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` A single element contained within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` chain. |
| `abstract class https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node : https://developer.android.com/reference/kotlin/androidx/compose/ui/node/DelegatableNode` The longer-lived object that is created for each `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` applied to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`. |

| ### Public companion functions |
|---|---|---|
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)` returns true for all `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` or if this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)` returns true for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`. | Cmn |
| `open R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` to the current value and each element from outside in. | Cmn |
| `open R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` to the current value and each element from inside out. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)(other: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` Concatenates this modifier with another. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#toString()()` | Cmn |

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)` returns true for all `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` or if this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)(predicate: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)` returns true for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`. | Cmn |
| `R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` to the current value and each element from outside in. | Cmn |
| `R` | `<R : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)(initial: R, operation: (https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element, R) -> R)` Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` to the current value and each element from inside out. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)(other: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` Concatenates this modifier with another. | Cmn |

| ### Extension functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine, before: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, after: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that can add padding to position the content according to specified distances from its bounds to an `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)( alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine, before: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit, after: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that can add padding to position the content according to specified distances from its bounds to an `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(top: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that positions the content in a layout such that the distance from the top of the layout to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, and the distance from the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` to the bottom of the layout is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)(top: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit, bottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that positions the content in a layout such that the distance from the top of the layout to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`, and the distance from the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` to the bottom of the layout is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).alpha(kotlin.Float)(alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Draw content with modified alpha that may be less than 1. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? )` Enable drag gestures between a set of predefined values. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[anchoredDraggable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior))( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? )` **This function is deprecated.** startDragImmediately has been removed without replacement. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? )` Enable drag gestures between a set of predefined values. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[anchoredDraggable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior))( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? )` **This function is deprecated.** startDragImmediately has been removed without replacement. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/ExperimentalFoundationApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[dragAndDropSource](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.coroutines.SuspendFunction1))(block: suspend https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` **This function is deprecated.** Replaced by overload with a callback for obtain a transfer data,start detection is performed by Compose itself | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)( lookaheadScope: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform, animateMotionFrameOfReference: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to animate layout changes (position and/or size) that occur within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, finishedListener: ((initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize, targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Function2)( animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, finishedListener: ((initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize, targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)(block: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/AppearanceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` A modifier that allows drawing a background, border, foreground, and shadows with a single modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleAppearance(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)( ratio: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, matchHeightConstraintsFirst: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)` is `false` (which is the default), or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)` is `true`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).contentType(androidx.compose.ui.autofill.ContentType)(contentType: https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/ContentType)` Set autofill hint with `https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/package-summary#(androidx.compose.ui.Modifier).contentType(androidx.compose.ui.autofill.ContentType)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)(color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Draws `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` with a solid `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` behind the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)( brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, alpha: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Draws `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)` with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)` behind the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).basicMarquee(kotlin.Int,androidx.compose.foundation.MarqueeAnimationMode,kotlin.Int,kotlin.Int,androidx.compose.foundation.MarqueeSpacing,androidx.compose.ui.unit.Dp)( iterations: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, animationMode: https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode, repeatDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, initialDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, spacing: https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeSpacing, velocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Applies an animated marquee effect to the modified content if it's too wide to fit in the available space. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)( swipeToDismissBoxState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState, edgeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Handles swipe to dismiss from the edge of the viewport. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).blur(kotlin.Function1)(block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Draws content with a blur whose radius can vary across the surface. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.unit.Dp,androidx.compose.ui.draw.BlurredEdgeTreatment)(radius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment)` Draws content blurred with the specified radius. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)( blurRadiusSpec: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/blur/BlurRadiusSpec, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Draws content with a blur specified by `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.draw.BlurredEdgeTreatment)( radiusX: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, radiusY: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment )` Draws content blurred with the specified radii. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)(border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and clip it. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).bringIntoViewRequester(androidx.compose.foundation.relocation.BringIntoViewRequester)( bringIntoViewRequester: https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester )` Modifier that can be used to send `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester#bringIntoView(androidx.compose.ui.geometry.Rect)` requests. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[bringIntoViewResponder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).bringIntoViewResponder(androidx.compose.foundation.relocation.BringIntoViewResponder))(responder: https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewResponder)` **This function is deprecated.** Use BringIntoViewModifierNode instead | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)( index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? )` Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to receive clicks via input or accessibility "click" event. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)( interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to receive clicks via input or accessibility "click" event. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onDoubleClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, hapticFeedbackEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)( interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onDoubleClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, hapticFeedbackEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clip(androidx.compose.ui.graphics.Shape)(shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Clip the content to `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).clip(androidx.compose.ui.graphics.Shape)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clipToBounds()()` Clip the content to the bounds of a layer defined at this modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clipScrollableContainer(androidx.compose.foundation.gestures.Orientation)(orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation)` Clips bounds of scrollable container on main axis while leaving space for background effects (like shadows) on cross axis. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).composed(kotlin.Function1,kotlin.Function1)( inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Function1,kotlin.Function1)( fullyQualifiedName: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, key1: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Array,kotlin.Function1,kotlin.Function1)( fullyQualifiedName: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, vararg keys: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)( fullyQualifiedName: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, key1: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, key2: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)( fullyQualifiedName: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, key1: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, key2: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, key3: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.String,kotlin.String)(layoutId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, tag: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?)` Alternative to `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutId.modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)` that enables the use of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/package-summary#(androidx.compose.ui.Modifier).layoutId(kotlin.String,kotlin.String)`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).contentColorProvider(androidx.compose.ui.graphics.Color)(contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color)` Provides `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).contentColorProvider(androidx.compose.ui.graphics.Color)` for text and iconography to consume. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/annotation/RequiresApi(value = 33) https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).curveToEdge(kotlin.Float,androidx.wear.compose.material3.AngularDirection,kotlin.Float,androidx.wear.compose.material3.AngularAnchorType)( maxSweepAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, angularDirection: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AngularDirection, anchor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AngularAnchorType )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that curves a component to the border of the parent container around the center, always treating the container as a circle. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).depthEffect(androidx.xr.glimmer.DepthEffect,androidx.compose.ui.graphics.Shape)(depthEffect: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/DepthEffect?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Renders shadows for the provided `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).depthEffect(androidx.xr.glimmer.DepthEffect,androidx.compose.ui.graphics.Shape)`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1)( transferData: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData? )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that allows an element it is applied to be treated like a source for drag and drop operations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/ExperimentalFoundationApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[dragAndDropSource](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1,kotlin.coroutines.SuspendFunction1))( drawDragDecoration: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, block: suspend https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Replaced by overload with a callback for obtain a transfer data,start detection is performed by Compose itself | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1,kotlin.Function1)( drawDragDecoration: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, transferData: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData? )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that allows an element it is applied to be treated like a source for drag and drop operations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropTarget(kotlin.Function1,androidx.compose.ui.draganddrop.DragAndDropTarget)( shouldStartDragAndDrop: (startEvent: https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, target: https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTarget )` A modifier that allows for receiving from a drag and drop gesture. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).draggable2D(androidx.compose.foundation.gestures.Draggable2DState,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Draggable2DState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onDragStarted: (startedPosition: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onDragStopped: (velocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Velocity) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Configure touch dragging for the UI element in both orientations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/DraggableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onDragStarted: suspend https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-coroutine-scope/index.html.(startedPosition: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onDragStopped: suspend https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-coroutine-scope/index.html.(velocity: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Configure touch dragging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).drawBehind(kotlin.Function1)(onDraw: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Draw into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Canvas` behind the modified content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).drawWithCache(kotlin.Function1)(onBuildDrawCache: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/CacheDrawScope.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawResult)` Draw into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope` with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).drawWithContent(kotlin.Function1)(onDraw: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/ContentDrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawModifier` that allows the developer to draw before or after the layout's contents. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[excludeFromSystemGesture](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).excludeFromSystemGesture())()` **This function is deprecated.** Use systemGestureExclusion | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[excludeFromSystemGesture](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).excludeFromSystemGesture(kotlin.Function1))( exclusion: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect )` **This function is deprecated.** Use systemGestureExclusion | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).animateFloatingActionButton(kotlin.Boolean,androidx.compose.ui.Alignment,kotlin.Float,androidx.compose.animation.core.AnimationSpec,androidx.compose.animation.core.AnimationSpec)( visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, targetScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, scaleAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>?, alphaAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>? )` Apply this modifier to a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` to show or hide it with an animation, typically based on the app's main content scrolling. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)(onFocusChanged: (https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Add this modifier to a component to observe focus state events. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFocusEvent(kotlin.Function1)(onFocusEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Add this modifier to a component to observe focus state events. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[focusModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusModifier())()` **This function is deprecated.** Replaced by focusTarget | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusTarget()()` Add this modifier to a component to make it focusable. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(kotlin.Function1))(focusOrderReceiver: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` **This function is deprecated.** Use focusProperties() instead | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester))(focusRequester: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester)` **This function is deprecated.** Use focusRequester() instead | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester,kotlin.Function1))( focusRequester: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester, focusOrderReceiver: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Use focusProperties() and focusRequester() instead | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)(scope: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` This modifier allows you to specify properties that are accessible to `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()`s further down the modifier chain or on child layout nodes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusRequester(androidx.compose.ui.focus.FocusRequester)(focusRequester: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester)` Add this modifier to a component to request changes to focus. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusRestorer(androidx.compose.ui.focus.FocusRequester)(fallback: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester)` This modifier can be used to save and restore focus to a focus group. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalComposeUiApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[focusRestorer](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusRestorer(kotlin.Function0))(onRestoreFailed: (() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester)?)` **This function is deprecated.** Use focusRestorer(FocusRequester) instead | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusGroup()()` Creates a focus group or marks this component as a focus group. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)( enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` Configure component to be focusable via focus system or accessibility "focus" event. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[onFocusedBoundsChanged](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFocusedBoundsChanged(kotlin.Function1))( onPositioned: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates?) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** onFocusedBoundsChanged doesn't reliably observe focus bounds changes through layout coordinate changes and focus changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).preferredFrameRate(androidx.compose.ui.FrameRateCategory)(frameRateCategory: https://developer.android.com/reference/kotlin/androidx/compose/ui/FrameRateCategory)` Set a requested frame rate on Composable | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).preferredFrameRate(kotlin.Float)( frameRate: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 360.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Set a requested frame rate on Composable | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)(block: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` that makes content draw into a draw layer. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)( scaleX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, scaleY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, translationX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, translationY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, shadowElevation: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, rotationX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, rotationY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, rotationZ: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, cameraDistance: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, renderEffect: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/RenderEffect?, ambientShadowColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, spotShadowColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, compositingStrategy: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy, blendMode: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode, colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter?, outsets: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/LayerOutsets )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that makes content draw into a draw layer. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).toolingGraphicsLayer()()` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that adds a draw layer such that tooling can identify an element in the drawn image. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)(callback: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Configures an element to act as a handwriting detector which detects stylus handwriting and delegates handling of the recognised text to another element. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).handwritingHandler()()` Configures an element to act as a stylus handwriting handler which can handle text input from a handwriting session which was triggered by stylus handwriting on a handwriting detector. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)(active: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` is used to annotate composables in an application, so we can keep track of what is the active part of the composition. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()()` This Modifier is used in conjunction with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain). | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).hoverable(androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean)( interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Configure component to be hoverable via pointer enter/exit events. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)( interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication? )` Draws visual effects for this component when interactions occur. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)( enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onSwipeForward: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onSwipeBackward: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that detects high-level click and horizontal swipe gestures from an `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/indirect/IndirectPointerEvent` source. | android |
| `inline https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[inspectable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).inspectable(kotlin.Function1,kotlin.Function1))( noinline inspectorInfo: https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, factory: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier )` **This function is deprecated.** This API will create more invalidations of your modifier than necessary, so it's use is discouraged. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).minimumInteractiveComponentSize()()` Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).minimumInteractiveComponentSize()()` Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).minimumInteractiveComponentSize()()` Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)(intrinsicSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/IntrinsicSize)` Declare the preferred height of the content to be the same as the min or max intrinsic height of the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.foundation.layout.IntrinsicSize)(intrinsicSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/IntrinsicSize)` Declare the height of the content to be exactly the same as the min or max intrinsic height of the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.foundation.layout.IntrinsicSize)(intrinsicSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/IntrinsicSize)` Declare the width of the content to be exactly the same as the min or max intrinsic width of the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)(intrinsicSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/IntrinsicSize)` Declare the preferred width of the content to be the same as the min or max intrinsic width of the content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).keepScreenOn()()` A modifier that keeps the device screen on as long as it is part of the composition on supported platforms. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onKeyEvent(kotlin.Function1)(onKeyEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events when it (or one of its children) is focused. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onPreviewKeyEvent(kotlin.Function1)(onPreviewKeyEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events when it (or one of its children) is focused. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).layoutBounds(androidx.compose.ui.layout.LayoutBoundsHolder)(holder: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder)` This will map the `https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds` of the modifier into the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)(layoutId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)` Tag the element with `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutId.modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)` to identify the element within its parent. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).layout(kotlin.Function3)(measure: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/MeasureScope.(https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measurable, https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/MeasureResult)` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` that allows changing how the wrapped element is measured and laid out. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)( isMeasurementApproachInProgress: (lookaheadSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, isPlacementApproachInProgress: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Placeable.PlacementScope.(lookaheadCoordinates: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, approachMeasure: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachMeasureScope.(measurable: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measurable, constraints: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/MeasureResult )` Creates an approach layout intended to help gradually approach the destination layout calculated in the lookahead pass. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)( sourceCenter: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset, magnifierCenter: (https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)?, onSizeChanged: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, zoom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize, cornerRadius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Shows a `https://developer.android.com/reference/android/widget/Magnifier.html` widget that shows an enlarged version of the content at `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` relative to the current layout node. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).modifierLocalConsumer(kotlin.Function1)(consumer: https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocalReadScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` A Modifier that can be used to consume `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that were provided by other modifiers to the left of this modifier, or above this modifier in the layout tree. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).modifierLocalProvider(androidx.compose.ui.modifier.ProvidableModifierLocal,kotlin.Function0)( key: https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ProvidableModifierLocal<T>, value: () -> T )` A Modifier that can be used to provide `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that can be read by other modifiers to the right of this modifier, or modifiers that are children of the layout node that this modifier is attached to. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)( connection: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection, dispatcher: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher? )` Modify element to make it participate in the nested scrolling hierarchy. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).absoluteOffset(kotlin.Function1)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset)` Offset the content by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(kotlin.Function1)` px. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(x: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, y: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Offset the content by (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp). | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).offset(kotlin.Function1)(offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset)` Offset the content by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(kotlin.Function1)` px. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(x: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, y: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Offset the content by (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp). | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[onFirstVisible](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFirstVisible(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function0))( minDurationMs: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, minFractionVisible: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, viewportBounds: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder?, callback: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** This modifier is deprecated as its behavior is misleading and doesn't always follow the contract claimed by the name. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onGloballyPositioned(kotlin.Function1)( onGloballyPositioned: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Invoke `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onGloballyPositioned.modifier#(androidx.compose.ui.Modifier).onGloballyPositioned(kotlin.Function1)` with the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the element when the global position of the content may have changed. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)( throttleMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, debounceMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, callback: (https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Invokes `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` with the position of this layout node relative to the coordinate system of the root of the composition, as well as in screen coordinates and window coordinates. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onPlaced(kotlin.Function1)(onPlaced: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Invoke `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onPlaced.modifier#(androidx.compose.ui.Modifier).onPlaced(kotlin.Function1)` after the parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout has been placed and before child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onSizeChanged(kotlin.Function1)(onSizeChanged: (https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Invoked with the size of the modified Compose UI element when the element is first measured or when the size of the element changes. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)( minDurationMs: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, minFractionVisible: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, viewportBounds: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder?, callback: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Registers a callback to monitor whether or not the node is inside of the viewport of the window or not. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).oneHandedGesture(androidx.wear.compose.material3.onehandedgesture.OneHandedGestureConfiguration,kotlin.String,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.coroutines.SuspendFunction0)( gestureConfiguration: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration, onGestureLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, enabledInAmbient: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onGestureAvailable: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onGesture: suspend () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Registers a gesture handler. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).oneHandedGesture(androidx.wear.compose.material3.onehandedgesture.OneHandedGestureConfiguration,kotlin.String,kotlin.Long,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.coroutines.SuspendFunction0)( gestureConfiguration: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration, onGestureLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, showIndicatorDelayMillis: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html, enabledInAmbient: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onGestureAvailable: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onGesture: suspend () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Registers a gesture handler. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)(overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?)` Renders overscroll from the provided `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(left: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, top: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, right: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Apply additional space along each edge of the content in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp)(all: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp)` dp of additional space along each edge of the content, left, top, right and bottom. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.foundation.layout.PaddingValues)(paddingValues: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues)` Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues` to the component as additional space along each edge of the content's left, top, right and bottom. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(horizontal: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, vertical: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp space along the left and right edges of the content, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp space along the top and bottom edges. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(start: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, top: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, end: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, bottom: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Apply additional space along each edge of the content in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)( painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, sizeToIntrinsics: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? )` Paint the content using `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ExperimentalWearMaterialApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Draws a placeholder shape over the top of a composable and animates a wipe off effect to remove the placeholder. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Modifier.placeholder draws a skeleton shape over a component, for situations when no provisional content (such as cached data) is available. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ExperimentalWearMaterialApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Modifier to draw a placeholder shimmer over a component. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material3.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)( placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Modifier.placeholderShimmer draws a periodic shimmer over content, indicating to the user that contents are loading or potentially out of date. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).placement(kotlin.Function1)(block: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/PlacementModifierScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Declares a callback, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).placement(kotlin.Function1)`, that allows controlling size and placement.The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override values provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).placement(kotlin.Function1)`, forcing the content to be either smaller or larger. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).stylePlacement(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Maps properties set in a style and resolved by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).stylePlacement(androidx.compose.foundation.style.StyleResolver)` to values passed to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/placement.modifier#(androidx.compose.ui.Modifier).placement(kotlin.Function1)` modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerHoverIcon(androidx.compose.ui.input.pointer.PointerIcon,kotlin.Boolean)( icon: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerIcon, overrideDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Modifier that lets a developer define a pointer icon to display when the cursor is hovered over the element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).stylusHoverIcon(androidx.compose.ui.input.pointer.PointerIcon,kotlin.Boolean,androidx.compose.ui.node.DpTouchBoundsExpansion)( icon: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerIcon, overrideDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, touchBoundsExpansion: https://developer.android.com/reference/kotlin/androidx/compose/ui/node/DpTouchBoundsExpansion? )` Modifier that lets a developer define a pointer icon to display when a stylus is hovered over the element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)(watcher: (motionEvent: https://developer.android.com/reference/android/view/MotionEvent.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Calls `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)` with each `https://developer.android.com/reference/android/view/MotionEvent.html` that the layout area or any child `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` receives. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInteropFilter(androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent,kotlin.Function1)( requestDisallowInterceptTouchEvent: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/RequestDisallowInterceptTouchEvent?, onTouchEvent: (https://developer.android.com/reference/android/view/MotionEvent.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` A special PointerInputModifier that provides access to the underlying `https://developer.android.com/reference/android/view/MotionEvent.html`s originally dispatched to Compose. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).preferKeepClear()()` Mark the layout rectangle as preferring to stay clear of floating windows. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).preferKeepClear(kotlin.Function1)(rectProvider: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect)` Mark a rectangle within the local layout coordinates preferring to stay clear of floating windows. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).progressSemantics()()` Contains the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` required for an indeterminate progress indicator, that represents the fact of the in-progress operation. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` Contains the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` required for a determinate progress indicator or the progress part of a slider, that represents progress within `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material/ExperimentalMaterialApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pullRefreshIndicatorTransform(androidx.compose.material.pullrefresh.PullRefreshState,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState, scale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` A modifier for translating the position and scaling the size of a pull-to-refresh indicator based on the given `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material/ExperimentalMaterialApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pullRefresh(androidx.compose.material.pullrefresh.PullRefreshState,kotlin.Boolean)(state: https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` A nested scroll modifier that provides scroll events to `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(androidx.compose.material.pullrefresh.PullRefreshState,kotlin.Boolean)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material/ExperimentalMaterialApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)( onPull: (pullDelta: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, onRelease: suspend (flingVelocity: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` A nested scroll modifier that provides `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` callbacks to aid building custom pull refresh components. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pullToRefresh(kotlin.Boolean,androidx.compose.material3.pulltorefresh.PullToRefreshState,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function0)( isRefreshing: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, state: https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, threshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, onRefresh: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A Modifier that adds nested scroll to a container to support a pull-to-refresh gesture. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, steps: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html )` Modifier to add semantics signifying progress of the Stepper/Slider. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/ExperimentalFoundationApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).contentReceiver(androidx.compose.foundation.content.ReceiveContentListener)( receiveContentListener: https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/ReceiveContentListener )` Configures the current node and any children nodes as a Content Receiver. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onPreRotaryScrollEvent(kotlin.Function1)( onPreRotaryScrollEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`s if it (or one of its children) is focused. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onRotaryScrollEvent(kotlin.Function1)( onRotaryScrollEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`s if it (or one of its children) is focused. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).rotaryScrollable(androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.ui.focus.FocusRequester,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect)( behavior: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableBehavior, focusRequester: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? )` A modifier which connects rotary events with scrollable containers such as Column, LazyList and others. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).rotate(kotlin.Float)(degrees: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Sets the degrees the view is rotated around the center of the composable. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)(rulers: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers)` Fits the contents within `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)(rulers: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers)` If one of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler`s in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)` has a value within the bounds of the Layout, this sizes the content to that `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler` and the edge. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scale(kotlin.Float)(scale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Scale the contents of both the horizontal and vertical axis uniformly by the same scale factor. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scale(kotlin.Float,kotlin.Float)(scaleX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, scaleY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Scale the contents of the composable by the following scale factors along the horizontal and vertical axis respectively. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.wear.compose.foundation.ScrollInfoProvider,kotlin.Function0)( scrollInfoProvider: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider, screenStage: () -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenStage )` Scroll an item vertically in/out of view based on scroll state provided by a scrolling list. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.compose.foundation.ScrollState,androidx.compose.ui.unit.Dp)(scrollState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState, offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.compose.foundation.lazy.LazyListState,kotlin.Int,androidx.compose.ui.unit.Dp)( scrollState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState, itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Int,androidx.compose.ui.unit.Dp)( scrollState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState, itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[scrollAway](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.wear.compose.material.ScalingLazyListState,kotlin.Int,androidx.compose.ui.unit.Dp))( scrollState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListState, itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` **This function is deprecated.** This overload is provided for backwards compatibility with Compose for Wear OS 1.1.A newer overload is available which uses ScalingLazyListState from wear.compose.foundation.lazy package | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).horizontalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).horizontalScroll(androidx.compose.foundation.ScrollState,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollable2D(androidx.compose.foundation.gestures.Scrollable2DState,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Scrollable2DState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` Configure touch scrolling and flinging for the UI element in both XY orientations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? )` Configure a component to act as a scrollable area. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? )` Configure a component to act as a scrollable area. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` Configure touch scrolling and flinging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? )` Configure touch scrolling and flinging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).nonInteractiveScrollbar(androidx.compose.foundation.ScrollIndicatorState,androidx.compose.foundation.gestures.Orientation,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollIndicatorState, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, thumbColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, thickness: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, thumbMinLength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, thumbMaxLengthFraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, isFadeEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, fadeDurationMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, fadeDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, mainAxisTrackInset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, crossAxisTrackInset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` A visual-only scrollbar that represents the current scroll position of a scrolling component. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).selectableGroup()()` Use this modifier to group a list of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` items like Tabs or RadioButtons together for accessibility purpose. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clearAndSetSemantics(kotlin.Function1)(properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Clears the semantics of all the descendant nodes and sets new semantics. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)(mergeDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Add semantics key/value pairs to the layout node, for use in testing, accessibility, etc. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).sensitiveContent(kotlin.Boolean)(isContentSensitive: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` This modifier hints that the composable renders sensitive content (i.e. username, password, credit card etc) on the screen, and the content should be protected during screen share in supported environments. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dropShadow(androidx.compose.ui.graphics.Shape,kotlin.Function1)(shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Draws a drop shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dropShadow(androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.shadow.Shadow)(shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, shadow: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow)` Draws a drop shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).innerShadow(androidx.compose.ui.graphics.Shape,kotlin.Function1)(shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Draws an inner shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).innerShadow(androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.shadow.Shadow)(shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, shadow: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow)` Draws an inner shadow on top of the rest of the content with the geometry specified by the given shape and the shadow properties defined by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)( elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, ambientColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, spotColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` that draws a shadow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).defaultMinSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(minWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, minHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the size of the wrapped layout only when it would be otherwise unconstrained: the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).defaultMinSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).defaultMinSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` constraints are only applied when the incoming corresponding constraint is `0`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fillMaxHeight(kotlin.Float)(fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxHeight(kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)(fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, as well as the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).fillMaxWidth(kotlin.Float)(fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxWidth(kotlin.Float)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).height(androidx.compose.ui.unit.Dp)(height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the preferred height of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, max: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.ui.unit.Dp)(height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the height of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, max: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)`dp width and height. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.DpSize)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize)` Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.DpSize)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)( minWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, minHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp, and the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, max: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`dp square. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.DpSize)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize)` Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.DpSize)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(minWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, minHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, maxHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Declare the preferred width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)`dp. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(min: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, max: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)( align: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, unbounded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Allow the content to measure at its desired height without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()`, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)` is true, also without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)(align: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, unbounded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` Allow the content to measure at its desired size without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` constraints, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)` is true, also without regard for the incoming maximum constraints. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)( align: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, unbounded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Allow the content to measure at its desired width without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()`, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)` is true, also without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onInterceptKeyBeforeSoftKeyboard(kotlin.Function1)( onInterceptKeyBeforeSoftKeyboard: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events before they are sent to the software keyboard. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onPreInterceptKeyBeforeSoftKeyboard(kotlin.Function1)( onPreInterceptKeyBeforeSoftKeyboard: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events before they are sent to the software keyboard. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).suppressStatusBar()()` Suppresses the status bar and collapses top status bar inset padding to 0.dp. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)(layerRequired: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)?, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` that makes content draw into a draw layer. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleGraphicsLayer(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[styleable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState))(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?)` **This function is deprecated.** The styleable() modifier must provide one or more 'style' parameter values. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?, style: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style)` Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?, vararg styles: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style)` Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleBorderPadding(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleContentPadding(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleExternalPadding(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleResolver(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` A modifier that binds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver` to the location in the composition it should resolve properties. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)( enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, focusedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, focusedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, depthEffect: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/SurfaceDepthEffect?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource? )` A surface is a fundamental building block in Glimmer. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[pointerInput](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1))(block: suspend https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` **This function is deprecated.** Modifier.pointerInput must provide one or more 'key' parameters that define the identity of the modifier and determine when its previous input processing coroutine should be cancelled and a new effect launched for the new key. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)(key1: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputEventHandler)` Create a modifier for processing pointer input within the region of the modified element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)(vararg keys: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputEventHandler)` Create a modifier for processing pointer input within the region of the modified element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)( key1: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, key2: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, block: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputEventHandler )` Create a modifier for processing pointer input within the region of the modified element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[edgeSwipeToDismiss](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp))( swipeToDismissBoxState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBoxState, edgeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` **This function is deprecated.** SwipeToDismiss has been migrated to androidx.wear.compose.foundation. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material/ExperimentalMaterialApi <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[swipeable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp))( state: https://developer.android.com/reference/kotlin/androidx/compose/material/SwipeableState<T>, anchors: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, T>, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, thresholds: (from, to) -> https://developer.android.com/reference/kotlin/androidx/compose/material/ThresholdConfig, resistance: https://developer.android.com/reference/kotlin/androidx/compose/material/ResistanceConfig?, velocityThreshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` **This function is deprecated.** Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ExperimentalWearMaterialApi <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)( state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeableState<T>, anchors: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, T>, orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, thresholds: (from, to) -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ThresholdConfig, resistance: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ResistanceConfig?, velocityThreshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` Enable swipe gestures between a set of predefined states. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).systemGestureExclusion()()` Excludes the layout rectangle from the system gesture. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).systemGestureExclusion(kotlin.Function1)(exclusion: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect)` Excludes a rectangle within the local layout coordinates from the system gesture. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).testTag(kotlin.String)(tag: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html)` Applies a tag to allow modified element to be found in tests. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)(builder: https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/builder/TextContextMenuBuilderScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Adds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)` to be run when the text context menu is shown within this hierarchy. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)( filter: (https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/data/TextContextMenuComponent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Adds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)` to be run when the text context menu is shown within this hierarchy. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)( state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).touchTargetAwareSize(androidx.compose.ui.unit.Dp)(size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Modifier to set both the size and recommended touch target for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButton.composable#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` and TextButton. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).transformable(androidx.compose.foundation.gestures.TransformableState,kotlin.Boolean,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState, lockRotationOnZoomPan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Enable transformation gestures of the modified UI element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).transformable(androidx.compose.foundation.gestures.TransformableState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState, canPan: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, lockRotationOnZoomPan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Enable transformation gestures of the modified UI element. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).transformedHeight(androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope,androidx.wear.compose.material3.lazy.TransformationSpec)( scope: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumnItemScope, transformationSpec: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/lazy/TransformationSpec )` Convenience modifier to calculate transformed height using `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/lazy/TransformationSpec`. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).visible(kotlin.Boolean)(visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that controls the visibility of the Layout it is applied to. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).imeNestedScroll()()` Controls the soft keyboard as a nested scrolling on Android `https://developer.android.com/reference/android/os/Build.VERSION_CODES.html#R` and later. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).captionBarPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).captionBar()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Consume insets that haven't been consumed yet by other insets Modifiers similar to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` without adding any padding. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)(paddingValues: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues)` Consume `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)` as insets as if the padding was added irrespective of insets. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).displayCutoutPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).displayCutout()`. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).imePadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).ime()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).mandatorySystemGesturesPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).mandatorySystemGestures()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).navigationBars()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onConsumedWindowInsetsChanged(kotlin.Function1)( block: (consumedWindowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Calls `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).onConsumedWindowInsetsChanged(kotlin.Function1)` with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` that have been consumed, either by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` or one of the padding Modifiers, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/imePadding.modifier#(androidx.compose.ui.Modifier).imePadding()`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).recalculateWindowInsets()()` This recalculates the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` based on the size and position. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).safeContentPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeContent()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).safeDrawingPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeDrawing()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).safeGesturesPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeGestures()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).statusBarsPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).statusBars()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).systemBarsPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemBars()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).systemGesturesPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemGestures()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).waterfallPadding()()` Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).waterfall()` insets. | Cmn android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Adds padding so that the content doesn't enter `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` space. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).windowInsetsBottomHeight(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Sets the height to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsBottomHeight(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getBottom(androidx.compose.ui.unit.Density)` of the screen. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).windowInsetsEndWidth(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Sets the width to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsEndWidth(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#End()` of the screen, using either `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getLeft(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getRight(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)`, depending on the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).windowInsetsStartWidth(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Sets the width to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsStartWidth(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Start()` of the screen, using either `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getLeft(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getRight(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)`, depending on the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).windowInsetsTopHeight(androidx.compose.foundation.layout.WindowInsets)(insets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets)` Sets the height to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsTopHeight(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getTop(androidx.compose.ui.unit.Density)` of the screen. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)(zIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Creates a modifier that controls the drawing order for the children of the same layout parent. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/media3/common/util/UnstableApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).resizeWithContentScale(androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.Alignment)( contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, aspectRatio: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html?, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment )` Attempts to size the original content rectangle to be inscribed into a destination by applying a specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` type. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/media3/common/util/UnstableApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[resizeWithContentScale](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).resizeWithContentScale(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.geometry.Size,androidx.compose.ui.unit.Density))( contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, sourceSizeDp: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size?, density: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density )` **This function is deprecated.** Use the overload that takes aspectRatio instead. | android |

## Public companion functions

### all

Cmn

```
open fun all(predicate: (Modifier.Element) -> Boolean): Boolean
```

Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)` returns true for all `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` or if this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s.

### any

Cmn

```
open fun any(predicate: (Modifier.Element) -> Boolean): Boolean
```

Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)` returns true for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`.

### foldIn

Cmn

```
open fun <R : Any?> foldIn(initial: R, operation: (Modifier.Element, R) -> R): R
```

Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` to the current value and each element from outside in.

Elements wrap one another in a chain from left to right; an `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that appears to the left of another in a `+` expression or in `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)`'s parameter order affects all of the elements that appear after it. `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` may be used to accumulate a value starting from the parent or head of the modifier chain to the final wrapped child.

### foldOut

Cmn

```
open fun <R : Any?> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R
```

Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` to the current value and each element from inside out.

Elements wrap one another in a chain from left to right; an `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that appears to the left of another in a `+` expression or in `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)`'s parameter order affects all of the elements that appear after it. `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` may be used to accumulate a value starting from the child or tail of the modifier chain up to the parent or head of the chain.

### then

Cmn

```
open infix fun then(other: Modifier): Modifier
```

Concatenates this modifier with another.

Returns a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` representing this modifier followed by `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)` in sequence.

### toString

Cmn

```
open fun toString(): String
```

## Public functions

### all

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
fun all(predicate: (Modifier.Element) -> Boolean): Boolean
```

Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#all(kotlin.Function1)` returns true for all `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` or if this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`s.

### any

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
fun any(predicate: (Modifier.Element) -> Boolean): Boolean
```

Returns `true` if `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#any(kotlin.Function1)` returns true for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` in this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`.

### foldIn

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
fun <R : Any?> foldIn(initial: R, operation: (Modifier.Element, R) -> R): R
```

Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` to the current value and each element from outside in.

Elements wrap one another in a chain from left to right; an `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that appears to the left of another in a `+` expression or in `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)`'s parameter order affects all of the elements that appear after it. `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldIn(kotlin.Any,kotlin.Function2)` may be used to accumulate a value starting from the parent or head of the modifier chain to the final wrapped child.

### foldOut

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
fun <R : Any?> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R
```

Accumulates a value starting with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` and applying `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` to the current value and each element from inside out.

Elements wrap one another in a chain from left to right; an `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that appears to the left of another in a `+` expression or in `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)`'s parameter order affects all of the elements that appear after it. `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#foldOut(kotlin.Any,kotlin.Function2)` may be used to accumulate a value starting from the child or tail of the modifier chain up to the parent or head of the chain.

### then

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
open infix fun then(other: Modifier): Modifier
```

Concatenates this modifier with another.

Returns a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` representing this modifier followed by `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#then(androidx.compose.ui.Modifier)` in sequence.

## Extension functions

### Modifier.paddingFrom

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/AlignmentLine.kt+function:paddingFrom)

```
fun Modifier.paddingFrom(
    alignmentLine: AlignmentLine,
    before: Dp = Dp.Unspecified,
    after: Dp = Dp.Unspecified
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that can add padding to position the content according to specified distances from its bounds to an `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine`. Whether the positioning is vertical or horizontal is defined by the orientation of the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` (if the line is horizontal, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` will refer to distances from top and bottom, otherwise they will refer to distances from start and end). The opposite axis sizing and positioning will remain unaffected. The modified layout will try to include the required padding, subject to the incoming max layout constraints, such that the distance from its bounds to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` of the content will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, respectively. When the max constraints do not allow this, satisfying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` requirement will have priority over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. When the modified layout is min constrained in the affected layout direction and the padded layout is smaller than the constraint, the modified layout will satisfy the min constraint and the content will be positioned to satisfy the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` requirement if specified, or the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` requirement otherwise.

Example usage:

```kotlin
import androidx.compose.foundation.layout.paddingFrom
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// We want to have 30.sp distance from the top of the layout box to the baseline of the
// first line of text.
val distanceToBaseline = 30.sp
// We convert the 30.sp value to dps, which is required for the paddingFrom API.
val distanceToBaselineDp = with(LocalDensity.current) { distanceToBaseline.toDp() }
// The result will be a layout with 30.sp distance from the top of the layout box to the
// baseline of the first line of text.
Text(
    text = "This is an example.",
    modifier = Modifier.paddingFrom(FirstBaseline, before = distanceToBaselineDp),
)
```

| Parameters |
|---|---|
| `alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine` | the alignment line relative to which the padding is defined |
| `before: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | the distance between the container's top edge and the horizontal alignment line, or the container's start edge and the vertical alignment line |
| `after: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | the distance between the container's bottom edge and the horizontal alignment line, or the container's end edge and the vertical alignment line |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/paddingFromBaseline.modifier#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.paddingFrom

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/AlignmentLine.kt+function:paddingFrom)

```
fun Modifier.paddingFrom(
    alignmentLine: AlignmentLine,
    before: TextUnit = TextUnit.Unspecified,
    after: TextUnit = TextUnit.Unspecified
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that can add padding to position the content according to specified distances from its bounds to an `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine`. Whether the positioning is vertical or horizontal is defined by the orientation of the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` (if the line is horizontal, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` will refer to distances from top and bottom, otherwise they will refer to distances from start and end). The opposite axis sizing and positioning will remain unaffected. The modified layout will try to include the required padding, subject to the incoming max layout constraints, such that the distance from its bounds to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` of the content will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`, respectively. When the max constraints do not allow this, satisfying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` requirement will have priority over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`. When the modified layout is min constrained in the affected layout direction and the padded layout is smaller than the constraint, the modified layout will satisfy the min constraint and the content will be positioned to satisfy the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` requirement if specified, or the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` requirement otherwise.

Example usage:

```kotlin
import androidx.compose.foundation.layout.paddingFrom
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// We want to have 30.sp distance from the top of the layout box to the baseline of the
// first line of text.
val distanceToBaseline = 30.sp
// We convert the 30.sp value to dps, which is required for the paddingFrom API.
val distanceToBaselineDp = with(LocalDensity.current) { distanceToBaseline.toDp() }
// The result will be a layout with 30.sp distance from the top of the layout box to the
// baseline of the first line of text.
Text(
    text = "This is an example.",
    modifier = Modifier.paddingFrom(FirstBaseline, before = distanceToBaselineDp),
)
```

| Parameters |
|---|---|
| `alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine` | the alignment line relative to which the padding is defined |
| `before: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit = TextUnit.Unspecified` | the distance between the container's top edge and the horizontal alignment line, or the container's start edge and the vertical alignment line |
| `after: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit = TextUnit.Unspecified` | the distance between the container's bottom edge and the horizontal alignment line, or the container's end edge and the vertical alignment line |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/paddingFromBaseline.modifier#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.paddingFromBaseline

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/AlignmentLine.kt+function:paddingFromBaseline)

```
fun Modifier.paddingFromBaseline(
    top: Dp = Dp.Unspecified,
    bottom: Dp = Dp.Unspecified
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that positions the content in a layout such that the distance from the top of the layout to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, and the distance from the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` to the bottom of the layout is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

When the modified layout is min height constrained and the padded layout is smaller than the constraint, the modified layout will satisfy the min constraint and the content will be positioned to satisfy the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` requirement if specified, or the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` requirement otherwise.

Example usage:

```kotlin
import androidx.compose.foundation.layout.paddingFrom
import androidx.compose.foundation.layout.paddingFromBaseline
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// We want to have 30.dp distance from the top of the layout box to the baseline of the
// first line of text, and a 40.dp distance from the bottom of the layout box to the baseline
// of the last line of text. Note it is good practice to specify these distances in sp for font
// scaling, which can be done with the other overload.
val distanceToFirstBaseline = 30.dp
val distanceFromLastBaseline = 40.dp
Text(
    text = "This line has the first baseline.\nThis line has the last baseline.",
    modifier = Modifier.paddingFromBaseline(distanceToFirstBaseline, distanceFromLastBaseline),
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/paddingFrom.modifier#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.paddingFromBaseline

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/AlignmentLine.kt+function:paddingFromBaseline)

```
fun Modifier.paddingFromBaseline(
    top: TextUnit = TextUnit.Unspecified,
    bottom: TextUnit = TextUnit.Unspecified
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that positions the content in a layout such that the distance from the top of the layout to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`, and the distance from the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` to the bottom of the layout is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)`.

When the modified layout is min height constrained and the padded layout is smaller than the constraint, the modified layout will satisfy the min constraint and the content will be positioned to satisfy the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` requirement if specified, or the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).paddingFromBaseline(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)` requirement otherwise.

Example usage:

```kotlin
import androidx.compose.foundation.layout.paddingFrom
import androidx.compose.foundation.layout.paddingFromBaseline
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.sp

// We want to have 30.sp distance from the top of the layout box to the baseline of the
// first line of text, and a 40.sp distance from the bottom of the layout box to the baseline
// of the last line of text.
val distanceToFirstBaseline = 30.sp
val distanceFromLastBaseline = 40.sp
Text(
    text = "This line has the first baseline.\nThis line has the last baseline.",
    modifier = Modifier.paddingFromBaseline(distanceToFirstBaseline, distanceFromLastBaseline),
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/paddingFrom.modifier#(androidx.compose.ui.Modifier).paddingFrom(androidx.compose.ui.layout.AlignmentLine,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.alpha

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Alpha.kt+function:alpha)

```
fun Modifier.alpha(alpha: Float): Modifier
```

Draw content with modified alpha that may be less than 1.

Usage of this API renders this composable into a separate graphics layer. Note when an alpha less than 1.0f is provided, contents are implicitly clipped to their bounds. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted.

Performance Note: For animating alpha, it is highly recommended to use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` instead (e.g., `Modifier.graphicsLayer { alpha = ... }`). Changing the `alpha` parameter on `Modifier.alpha` causes the composable to be recomposed, which is less efficient than updating the `alpha` property within `graphicsLayer`, as `graphicsLayer` can optimize this change without requiring recomposition.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp).alpha(alpha = 0.5f).background(Color.Red))
```

| Parameters |
|---|---|
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | the fraction of children's alpha value and must be between `0` and `1`, inclusive. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` | Example usage: |

### Modifier.anchoredDraggable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/AnchoredDraggable.kt+function:anchoredDraggable)

```
fun <T : Any?> Modifier.anchoredDraggable(
    state: AnchoredDraggableState<T>,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    flingBehavior: FlingBehavior? = null
): Modifier
```

Enable drag gestures between a set of predefined values.

When a drag is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will be updated with the drag delta. If the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` is set to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation#Horizontal` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`'s value is `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection#Rtl`, the drag deltas will be reversed. You should use this offset to move your content accordingly (see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`). When the drag ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will also be updated to the value corresponding to the new anchor.

Dragging is constrained between the minimum and maximum anchors.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>` | The associated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState`. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` can be dragged. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` is enabled and should react to the user's input. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | optional effect to dispatch any excess delta or velocity to. The excess delta or velocity are a result of dragging/flinging and reaching the bounds. If you provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)`, make sure to apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` to render the effect as well. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | Optionally configure how the anchored draggable performs the fling. By default (if passing in null), this will snap to the closest anchor considering the velocity thresholds and positional thresholds. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableDefaults#flingBehavior(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Function1,androidx.compose.animation.core.AnimationSpec)`. |

### Modifier.anchoredDraggable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/AnchoredDraggable.kt+function:anchoredDraggable)

```
fun <T : Any?> Modifier.[anchoredDraggable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior))(
    state: AnchoredDraggableState<T>,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    startDragImmediately: Boolean = state.isAnimationRunning,
    flingBehavior: FlingBehavior? = null
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> startDragImmediately has been removed without replacement. Modifier.anchoredDraggable sets startDragImmediately to true by default when animations are running.

Enable drag gestures between a set of predefined values.

When a drag is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will be updated with the drag delta. If the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` is set to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation#Horizontal` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`'s value is `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection#Rtl`, the drag deltas will be reversed. You should use this offset to move your content accordingly (see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`). When the drag ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will also be updated to the value corresponding to the new anchor.

Dragging is constrained between the minimum and maximum anchors.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>` | The associated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState`. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` can be dragged. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` is enabled and should react to the user's input. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | optional effect to dispatch any excess delta or velocity to. The excess delta or velocity are a result of dragging/flinging and reaching the bounds. If you provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)`, make sure to apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` to render the effect as well. |
| `startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = state.isAnimationRunning` | when set to false, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)` will start dragging only when the gesture crosses the touchSlop. This is useful to prevent users from "catching" an animating widget when pressing on it. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)` to learn more about startDragImmediately. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | Optionally configure how the anchored draggable performs the fling. By default (if passing in null), this will snap to the closest anchor considering the velocity thresholds and positional thresholds. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableDefaults#flingBehavior(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Function1,androidx.compose.animation.core.AnimationSpec)`. |

### Modifier.anchoredDraggable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/AnchoredDraggable.kt+function:anchoredDraggable)

```
fun <T : Any?> Modifier.anchoredDraggable(
    state: AnchoredDraggableState<T>,
    reverseDirection: Boolean,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    flingBehavior: FlingBehavior? = null
): Modifier
```

Enable drag gestures between a set of predefined values.

When a drag is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will be updated with the drag delta. You should use this offset to move your content accordingly (see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`). When the drag ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will also be updated to the value corresponding to the new anchor.

Dragging is constrained between the minimum and maximum anchors.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>` | The associated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState`. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Whether to reverse the direction of the drag, so a top to bottom drag will behave like bottom to top, and a left to right drag will behave like right to left. If not specified, this will be determined based on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()` through the other `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` overload. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` can be dragged. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)` is enabled and should react to the user's input. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | optional effect to dispatch any excess delta or velocity to. The excess delta or velocity are a result of dragging/flinging and reaching the bounds. If you provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior)`, make sure to apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` to render the effect as well. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | Optionally configure how the anchored draggable performs the fling. By default (if passing in null), this will snap to the closest anchor considering the velocity thresholds and positional thresholds. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableDefaults#flingBehavior(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Function1,androidx.compose.animation.core.AnimationSpec)`. |

### Modifier.anchoredDraggable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/AnchoredDraggable.kt+function:anchoredDraggable)

```
fun <T : Any?> Modifier.[anchoredDraggable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior))(
    state: AnchoredDraggableState<T>,
    reverseDirection: Boolean,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    startDragImmediately: Boolean = state.isAnimationRunning,
    flingBehavior: FlingBehavior? = null
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> startDragImmediately has been removed without replacement. Modifier.anchoredDraggable sets startDragImmediately to true by default when animations are running.

Enable drag gestures between a set of predefined values.

When a drag is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will be updated with the drag delta. You should use this offset to move your content accordingly (see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`). When the drag ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState` will also be updated to the value corresponding to the new anchor.

Dragging is constrained between the minimum and maximum anchors.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState<T>` | The associated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableState`. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Whether to reverse the direction of the drag, so a top to bottom drag will behave like bottom to top, and a left to right drag will behave like right to left. If not specified, this will be determined based on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()` through the other `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` overload. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` can be dragged. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/anchoredDraggable.modifier#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)` is enabled and should react to the user's input. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | optional effect to dispatch any excess delta or velocity to. The excess delta or velocity are a result of dragging/flinging and reaching the bounds. If you provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).anchoredDraggable(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior)`, make sure to apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` to render the effect as well. |
| `startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = state.isAnimationRunning` | when set to false, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)` will start dragging only when the gesture crosses the touchSlop. This is useful to prevent users from "catching" an animating widget when pressing on it. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)` to learn more about startDragImmediately. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | Optionally configure how the anchored draggable performs the fling. By default (if passing in null), this will snap to the closest anchor considering the velocity thresholds and positional thresholds. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/AnchoredDraggableDefaults#flingBehavior(androidx.compose.foundation.gestures.AnchoredDraggableState,kotlin.Function1,androidx.compose.animation.core.AnimationSpec)`. |

### Modifier.dragAndDropSource

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/draganddrop/LegacyDragAndDropSourceWithDefaultPainter.android.kt+function:dragAndDropSource)

```
@ExperimentalFoundationApi
fun Modifier.[dragAndDropSource](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.coroutines.SuspendFunction1))(block: suspend DragAndDropSourceScope.() -> Unit): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Replaced by overload with a callback for obtain a transfer data,start detection is performed by Compose itself, use this instead:
>
> ```kotlin
> Modifier.dragAndDropSource(transferData)
> ```

A Modifier that allows an element it is applied to to be treated like a source for drag and drop operations. It displays the element dragged as a drag shadow.

Learn how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/dragAndDropSource.modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1,kotlin.coroutines.SuspendFunction1)`:

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.draganddrop.dragAndDropSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draganddrop.DragAndDropTransferData
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val label = remember { "Drag me" }
Box(
    modifier =
        modifier
            .dragAndDropSource { _ ->
                DragAndDropTransferData(
                    clipData = ClipData.newPlainText(label, label),
                    flags = View.DRAG_FLAG_GLOBAL,
                )
            }
            .border(
                border =
                    BorderStroke(
                        width = 4.dp,
                        brush = Brush.linearGradient(listOf(Color.Magenta, Color.Magenta)),
                    ),
                shape = RoundedCornerShape(16.dp),
            )
            .padding(24.dp)
) {
    Text(modifier = Modifier.align(Alignment.Center), text = label)
}
```

| Parameters |
|---|---|
| `block: suspend https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A lambda with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope` as a receiver which provides a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope` to detect the drag gesture, after which a drag and drop gesture can be started with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope#startTransfer(androidx.compose.ui.draganddrop.DragAndDropTransferData)`. |

### Modifier.animateBounds

Cmn Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimateBoundsModifier.kt+function:animateBounds)

```
fun Modifier.animateBounds(
    lookaheadScope: LookaheadScope,
    modifier: Modifier = Modifier,
    boundsTransform: BoundsTransform = DefaultBoundsTransform,
    animateMotionFrameOfReference: Boolean = false
): Modifier
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to animate layout changes (position and/or size) that occur within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope`.

So, the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` defines the coordinate space considered to trigger an animation. For example, if `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` was defined at the root of the app hierarchy, then any layout changes visible within the screen will trigger an animation, if it, in contrast was defined within a scrolling parent, then, as long the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` scrolls with is content, no animation will be triggered, as there will be no changes within its coordinate space.

The animation is driven with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` produced by the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` function, which you may use to customize the animations based on the initial and target bounds.

Do note that certain Layout Modifiers when chained with `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateBounds.modifier#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)`, may only cause an immediate observable change to either the child or the parent Layout which can result in undesired behavior. For those cases you can instead provide it to the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` parameter. This allows `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateBounds.modifier#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` to envelop the size and constraints change and propagate them gradually to both its parent and child Layout.

You may see the difference when supplying a Layout Modifier in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` on the following example:

```kotlin
import androidx.compose.animation.BoundsTransform
import androidx.compose.animation.animateBounds
import androidx.compose.animation.core.VisibilityThreshold
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Example showing the difference between providing a Layout Modifier as a parameter of
// `animateBounds` and chaining the Layout Modifier.

// We use `padding` in this example, as it provides an immediate change in layout to its child,
// but not the parent, which sees the same resulting layout. The difference can be seen in the
// Text (content under padding) and an accompanying Cyan Box (a sibling, under the same Row
// parent).
LookaheadScope {
    val boundsTransform = remember {
        BoundsTransform { _, _ ->
            spring(stiffness = 50f, visibilityThreshold = Rect.VisibilityThreshold)
        }
    }

    var toggleAnimation by remember { mutableStateOf(true) }

    Column(Modifier.clickable { toggleAnimation = !toggleAnimation }) {
        Text(
            "See the difference in animation when the Layout Modifier is a parameter of animateBounds. Padding, in this example."
        )
        Spacer(Modifier.height(12.dp))
        Text("Layout Modifier as a parameter.")
        Row(Modifier.fillMaxWidth()) {
            Box(
                Modifier.animateBounds(
                        lookaheadScope = this@LookaheadScope,
                        modifier =
                            // By providing this Modifier as a parameter of `animateBounds`,
                            // both content and parent see a gradual/animated change in Layout.
                            Modifier.padding(
                                horizontal = if (toggleAnimation) 10.dp else 50.dp
                            ),
                        boundsTransform = boundsTransform,
                    )
                    .background(Color.Red, RoundedCornerShape(12.dp))
                    .height(50.dp)
            ) {
                Text("Layout Content", Modifier.align(Alignment.Center))
            }
            Box(Modifier.size(50.dp).background(Color.Cyan, RoundedCornerShape(12.dp)))
        }
        Spacer(Modifier.height(12.dp))
        Text("Layout Modifier after AnimateBounds.")
        Row(Modifier.fillMaxWidth()) {
            Box(
                Modifier.animateBounds(
                        lookaheadScope = this@LookaheadScope,
                        boundsTransform = boundsTransform,
                    )
                    // The content is able to animate the change in padding, but since the
                    // parent Layout sees no difference, the change in position is immediate.
                    .padding(horizontal = if (toggleAnimation) 10.dp else 50.dp)
                    .background(Color.Red, RoundedCornerShape(12.dp))
                    .height(50.dp)
            ) {
                Text("Layout Content", Modifier.align(Alignment.Center))
            }
            Box(Modifier.size(50.dp).background(Color.Cyan, RoundedCornerShape(12.dp)))
        }
        Spacer(Modifier.height(12.dp))
        Text("Layout Modifier before AnimateBounds.")
        Row(Modifier.fillMaxWidth()) {
            Box(
                Modifier
                    // The parent is able to see the change in position and the animated size,
                    // so it can smoothly place both its children, but the content of the Box
                    // cannot see the gradual changes so it remains constant.
                    .padding(horizontal = if (toggleAnimation) 10.dp else 50.dp)
                    .animateBounds(
                        lookaheadScope = this@LookaheadScope,
                        boundsTransform = boundsTransform,
                    )
                    .background(Color.Red, RoundedCornerShape(12.dp))
                    .height(50.dp)
            ) {
                Text("Layout Content", Modifier.align(Alignment.Center))
            }
            Box(Modifier.size(50.dp).background(Color.Cyan, RoundedCornerShape(12.dp)))
        }
    }
}
```

By default, changes in position under `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates#introducesMotionFrameOfReference()` are excluded from the animation and are instead immediately applied, as they are expected to be frequent/continuous (to handle Layouts under Scroll). You may change this behavior by passing `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` as `true`. Keep in mind, doing that under a scroll may result in the Layout "chasing" the scroll offset, as it will constantly animate to the latest position.

A basic use-case is animating a layout based on content changes, such as the String changing on a Text:

```kotlin
import androidx.compose.animation.animateBounds
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Example where the change in content triggers the layout change on the item with animateBounds
val textShort = remember { "Foo ".repeat(10) }
val textLong = remember { "Bar ".repeat(50) }

var toggle by remember { mutableStateOf(true) }

LookaheadScope {
    Box(
        modifier = Modifier.fillMaxSize().clickable { toggle = !toggle },
        contentAlignment = Alignment.Center,
    ) {
        Text(
            text = if (toggle) textShort else textLong,
            modifier =
                Modifier.fillMaxWidth(0.7f)
                    .background(Color.LightGray)
                    .animateBounds(this@LookaheadScope)
                    .padding(10.dp),
        )
    }
}
```

It also provides an easy way to animate layout changes of a complex Composable Layout:

```kotlin
import androidx.compose.animation.animateBounds
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round
import androidx.compose.ui.util.fastForEach

var itemRowCount by remember { mutableIntStateOf(1) }
val colors = remember { listOf(Color.Cyan, Color.Magenta, Color.Yellow, Color.Green) }

// A case showing `animateBounds` being used to animate layout changes driven by a parent Layout
LookaheadScope {
    Column(Modifier.clickable { itemRowCount = if (itemRowCount != 2) 2 else 1 }) {
        Text("Click to toggle animation.")
        FlowRow(
            modifier =
                Modifier.fillMaxWidth()
                    // Note that the wrap content size changes for FlowRow as the content
                    // adjusts
                    // to one or two lines, we can simply use `animateContentSize()` to make
                    // sure
                    // all items are visible during their animation.
                    .animateContentSize(),
            // Try changing the arrangement as well!
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            // We use the maxItems parameter to change the layout of the FlowRow at different
            // states
            maxItemsInEachRow = itemRowCount,
        ) {
            colors.fastForEach {
                Box(
                    Modifier.animateBounds(this@LookaheadScope)
                        // Note the modifier order, we declare the background after
                        // `animateBounds` to make sure it animates with the rest of the content
                        .background(it, RoundedCornerShape(12.dp))
                        .weight(weight = 1f, fill = true)
                        .height(100.dp)
                )
            }
        }
    }
}
```

Since `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` is called when initiating an animation, you may also use it to calculate a keyframe based animation:

```kotlin
import androidx.compose.animation.BoundsTransform
import androidx.compose.animation.animateBounds
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.keyframesWithSpline
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

var toggle by remember { mutableStateOf(true) }

// Example using BoundsTransform to calculate an animation using keyframes with splines.
LookaheadScope {
    Box(Modifier.fillMaxSize().clickable { toggle = !toggle }) {
        Text(
            text = "Hello, World!",
            textAlign = TextAlign.Center,
            modifier =
                Modifier.align(if (toggle) Alignment.TopStart else Alignment.TopEnd)
                    .animateBounds(
                        lookaheadScope = this@LookaheadScope,
                        boundsTransform = { initialBounds, targetBounds ->
                            // We'll use a keyframe to emphasize the animation in position and
                            // size.
                            keyframesWithSpline {
                                durationMillis = 1200

                                // Emphasize with an increase in size
                                val size = targetBounds.size.times(2f)

                                // Emphasize the path with a slight curve at the halfway point
                                val position =
                                    targetBounds.topLeft
                                        .plus(initialBounds.topLeft)
                                        .times(0.5f)
                                        .plus(
                                            Offset(
                                                // Consider the increase in size (from the
                                                // center,
                                                // to keep the Layout aligned at the keyframe)
                                                x = -(size.width - targetBounds.width) * 0.5f,
                                                // Emphasize the path with a vertical offset
                                                y = size.height * 0.5f,
                                            )
                                        )

                                // Only need to define the intermediate keyframe, initial and
                                // target are implicit.
                                Rect(position, size).atFraction(0.5f).using(LinearEasing)
                            }
                        },
                    )
                    .background(Color.LightGray, RoundedCornerShape(50))
                    .padding(10.dp)
                    // Text is laid out with the animated fixed Constraints, relax constraints
                    // back to wrap content to be able to center Align vertically.
                    .wrapContentSize(Alignment.Center),
        )
    }
}
```

It may also be used together with `https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#movableContentOf(kotlin.Function0)` as long as the given `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` is in a common place within the Layout hierarchy of the slots presenting the `movableContent`:

```kotlin
import androidx.compose.animation.animateBounds
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.VisibilityThreshold
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.movableContentWithReceiverOf
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Example showing how to animate a Layout that can be presented on different Layout Composables
// as the state changes using `movableContent`.
var position by remember { mutableIntStateOf(-1) }

val movableContent = remember {
    // To animate a Layout that can be presented in different Composables, we can use
    // `animateBounds` with `movableContent`.
    movableContentWithReceiverOf<LookaheadScope> {
        Box(
            Modifier.animateBounds(
                    lookaheadScope = this@movableContentWithReceiverOf,
                    boundsTransform = { _, _ ->
                        spring(
                            dampingRatio = Spring.DampingRatioLowBouncy,
                            stiffness = Spring.StiffnessVeryLow,
                            visibilityThreshold = Rect.VisibilityThreshold,
                        )
                    },
                )
                // Our movableContent can always fill its container in this example.
                .fillMaxSize()
                .background(Color.Cyan, RoundedCornerShape(8.dp))
        )
    }
}

LookaheadScope {
    Box(Modifier.fillMaxSize()) {
        // Initial container of our Layout, at the center of the screen.
        Box(
            Modifier.size(200.dp)
                .border(3.dp, Color.Red, RoundedCornerShape(8.dp))
                .align(Alignment.Center)
                .clickable { position = -1 }
        ) {
            if (position < 0) {
                movableContent()
            }
        }

        repeat(4) { index ->
            // Four additional Boxes where our content may be move to.
            Box(
                Modifier.size(100.dp)
                    .border(2.dp, Color.Blue, RoundedCornerShape(8.dp))
                    .align { size, space, _ ->
                        val horizontal = if (index % 2 == 0) 0.15f else 0.85f
                        val vertical = if (index < 2) 0.15f else 0.85f

                        Offset(
                                x = (space.width - size.width) * horizontal,
                                y = (space.height - size.height) * vertical,
                            )
                            .round()
                    }
                    .clickable { position = index }
            ) {
                if (position == index) {
                    // The call to movable content will trigger `Modifier.animateBounds()` to
                    // animate the content's position and size from its previous state.
                    movableContent()
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `lookaheadScope: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` | The scope from which this `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateBounds.modifier#(androidx.compose.ui.Modifier).animateBounds(androidx.compose.ui.layout.LookaheadScope,androidx.compose.ui.Modifier,androidx.compose.animation.BoundsTransform,kotlin.Boolean)` will calculate its animations from. This implies that as long as you're expecting an animation the reference of the given `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` shouldn't change, otherwise you may get unexpected behavior. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional intermediate Modifier, may be used in cases where otherwise immediate layout changes are perceived as gradual by both the parent and child Layout. |
| `boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform = DefaultBoundsTransform` | Produce a customized `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` based on the initial and target bounds, called when an animation is triggered. |
| `animateMotionFrameOfReference: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | When `true`, changes under `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates#introducesMotionFrameOfReference()` (for continuous positional changes, such as Scroll Offset) are included when calculating an animation. `false` by default, where the changes are instead applied directly into the layout without triggering an animation. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachLayoutModifierNode` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope` |   |

### Modifier.animateContentSize

Cmn Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimationModifier.kt+function:animateContentSize)

```
fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null
): Modifier
```

This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. This allows the parent modifier to observe a smooth size change, resulting in an overall continuous visual change.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` can be optionally specified for the size change animation. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` will be used.

An optional `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)` can be supplied to get notified when the size change animation is finished. Since the content size change can be dynamic in many cases, both initial value and target value (i.e. final size) will be passed to the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)`. **Note:** if the animation is interrupted, the initial value will be the size at the point of interruption. This is intended to help determine the direction of the size change (i.e. expand or collapse in x and y dimensions).

```kotlin
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.LocalTextStyle
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val shortText = "Hi"
val longText = "Very long text\nthat spans across\nmultiple lines"
var short by remember { mutableStateOf(true) }
Box(
    modifier =
        Modifier.background(Color.Blue, RoundedCornerShape(15.dp))
            .clickable { short = !short }
            .padding(20.dp)
            .wrapContentSize()
            .animateContentSize()
) {
    Text(
        if (short) {
            shortText
        } else {
            longText
        },
        style = LocalTextStyle.current.copy(color = Color.White),
    )
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | a finite animation that will be used to animate size change, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default |
| `finishedListener: ((initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize, targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | an optional listener to be called when the content change animation is completed. |

### Modifier.animateContentSize

Cmn Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/AnimationModifier.kt+function:animateContentSize)

```
fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold,
        ),
    alignment: Alignment = Alignment.TopStart,
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null
): Modifier
```

This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. This allows the parent modifier to observe a smooth size change, resulting in an overall continuous visual change.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` can be optionally specified for the size change animation. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` will be used.

An optional `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Function2)` can be supplied to get notified when the size change animation is finished. Since the content size change can be dynamic in many cases, both initial value and target value (i.e. final size) will be passed to the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Function2)`. **Note:** if the animation is interrupted, the initial value will be the size at the point of interruption. This is intended to help determine the direction of the size change (i.e. expand or collapse in x and y dimensions).

```kotlin
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.LocalTextStyle
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val shortText = "Hi"
val longText = "Very long text\nthat spans across\nmultiple lines"
var short by remember { mutableStateOf(true) }
Box(
    modifier =
        Modifier.background(Color.Blue, RoundedCornerShape(15.dp))
            .clickable { short = !short }
            .padding(20.dp)
            .wrapContentSize()
            .animateContentSize()
) {
    Text(
        if (short) {
            shortText
        } else {
            longText
        },
        style = LocalTextStyle.current.copy(color = Color.White),
    )
}
```

| Parameters |
|---|---|
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize> = spring( stiffness = Spring.StiffnessMediumLow, visibilityThreshold = IntSize.VisibilityThreshold, )` | a finite animation that will be used to animate size change, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.TopStart` | sets the alignment of the content during the animation. `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#TopStart()` by default. |
| `finishedListener: ((initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize, targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | an optional listener to be called when the content change animation is completed. |

### Modifier.appearance

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Appearance.kt+function:appearance)

```
@ExperimentalFoundationStyleApi
fun Modifier.appearance(block: AppearanceScope.() -> Unit): Modifier
```

A modifier that allows drawing a background, border, foreground, and shadows with a single modifier. The values to use are in a callback that is invoked in the drawing phase and, if it reads mutable state, will only invalidate drawing.

If any mutable state, animations or style properties read in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` change `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` to be called again and update the appearance.

NOTE: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` can be invoked multiple times, which is why it's important for performance to minimize work done inside of it. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` may also be invoked before effects.

| Parameters |
|---|---|
| `block: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/AppearanceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the block used to determine what this modifier draws. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/AppearanceScope` |   |

### Modifier.styleAppearance

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Appearance.kt+function:styleAppearance)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleAppearance(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the behavior of the properties from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/BorderScope`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/BackgroundScope`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ForegroundScope`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ShadowScope` of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

This will be moved to be an example of how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/appearance.modifier#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` to implement the style properties similar to those provided in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.aspectRatio

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/AspectRatio.kt+function:aspectRatio)

```
fun Modifier.aspectRatio(
    ratio: @FloatRange(from = 0.0, fromInclusive = false) Float,
    matchHeightConstraintsFirst: Boolean = false
): Modifier
```

Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)` is `false` (which is the default), or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)` is `true`. The size in the other dimension is determined by the aspect ratio. The combinations will be tried in this order until one non-empty is found to satisfy the constraints. If no valid size is obtained this way, it means that there is no non-empty size satisfying both the constraints and the aspect ratio, so the constraints will not be respected and the content will be sized such that the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` is matched (depending on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)`).

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.width(100.dp).aspectRatio(2f).background(Color.Green))
```

| Parameters |
|---|---|
| `ratio: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | the desired width/height positive ratio |
| `matchHeightConstraintsFirst: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | if true, height constraints will be matched before width constraints and used to calculate the resulting size according to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)` |

### Modifier.contentType

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/autofill/AutofillModifier.kt+function:contentType)

```
fun Modifier.contentType(contentType: ContentType): Modifier
```

Set autofill hint with `https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/package-summary#(androidx.compose.ui.Modifier).contentType(androidx.compose.ui.autofill.ContentType)`.

This applies the `https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/package-summary#(androidx.compose.ui.Modifier).contentType(androidx.compose.ui.autofill.ContentType)` to the modifier's semantics, in turn enabling autofill and marking the hint to be associated with this composable. This allows autofill frameworks to provide relevant suggestions to users.

Using `contentType` is equivalent to simply setting the `contentType` semantic property, i.e. `Modifier.contentType(ContentType.NewUsername)` is equivalent to setting `Modifier.semantics { contentType = ContentType.NewUsername }`.

```kotlin
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.ui.Modifier
import androidx.compose.ui.autofill.ContentType
import androidx.compose.ui.autofill.contentType
import androidx.compose.ui.semantics.contentType

TextField(
    state = rememberTextFieldState(),
    label = { Text("Enter your new username here.") },
    // Set the content type hint with the modifier extension.
    modifier = Modifier.contentType(ContentType.NewUsername),
)
```

```kotlin
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.ui.Modifier
import androidx.compose.ui.autofill.ContentType
import androidx.compose.ui.autofill.contentType
import androidx.compose.ui.semantics.contentType
import androidx.compose.ui.semantics.semantics

TextField(
    state = rememberTextFieldState(),
    label = { Text("Enter your new password here.") },
    // Set the content type hint with semantics.
    modifier = Modifier.semantics { contentType = ContentType.NewPassword },
)
```

| Parameters |
|---|---|
| `contentType: https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/ContentType` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/ContentType` to apply to the component's semantics. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` with the specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/autofill/ContentType` semantics set. |

### Modifier.background

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Background.kt+function:background)

```
fun Modifier.background(color: Color, shape: Shape = RectangleShape): Modifier
```

Draws `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` with a solid `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` behind the content.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text("Text with background", Modifier.background(color = Color.Magenta).padding(10.dp))
```

| Parameters |
|---|---|
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | color to paint background with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | desired shape of the background |

### Modifier.background

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Background.kt+function:background)

```
fun Modifier.background(
    brush: Brush,
    shape: Shape = RectangleShape,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
): Modifier
```

Draws `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)` with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)` behind the content.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val gradientBrush =
    Brush.horizontalGradient(
        colors = listOf(Color.Red, Color.Blue, Color.Green),
        startX = 0.0f,
        endX = 500.0f,
    )
Text(
    "Text with gradient back",
    Modifier.background(brush = gradientBrush, shape = CutCornerShape(8.dp)).padding(10.dp),
)
```

| Parameters |
|---|---|
| `brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush` | brush to paint background with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | desired shape of the background |
| `alpha: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | Opacity to be applied to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).background(androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape,kotlin.Float)`, with `0` being completely transparent and `1` being completely opaque. The value must be between `0` and `1`. |

### Modifier.basicMarquee

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/BasicMarquee.kt+function:basicMarquee)

```
fun Modifier.basicMarquee(
    iterations: Int = Iterations,
    animationMode: MarqueeAnimationMode = Immediately,
    repeatDelayMillis: Int = RepeatDelayMillis,
    initialDelayMillis: Int = if (animationMode == Immediately) repeatDelayMillis else 0,
    spacing: MarqueeSpacing = Spacing,
    velocity: Dp = Velocity
): Modifier
```

Applies an animated marquee effect to the modified content if it's too wide to fit in the available space. This modifier has no effect if the content fits in the max constraints. The content will be measured with unbounded width.

When the animation is running, it will restart from the initial state any time:

- any of the parameters to this modifier change, or

- the content or container size change.

The animation only affects the drawing of the content, not its position. The offset returned by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of anything inside the marquee is undefined relative to anything outside the marquee, and may not match its drawn position on screen. This modifier also does not currently support content that accepts position-based input such as pointer events.

To only animate when the composable is focused, specify `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).basicMarquee(kotlin.Int,androidx.compose.foundation.MarqueeAnimationMode,kotlin.Int,kotlin.Int,androidx.compose.foundation.MarqueeSpacing,androidx.compose.ui.unit.Dp)` and make the composable focusable. This modifier does not add any visual effects aside from scrolling, but you can add your own by placing modifiers before this one.

```kotlin
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// Marquee only animates when the content doesn't fit in the max width.
Column(Modifier.width(30.dp)) { Text("hello world", Modifier.basicMarquee()) }
```

```kotlin
import androidx.compose.foundation.MarqueeSpacing
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.drawscope.ContentDrawScope
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

val edgeWidth = 32.dp
fun ContentDrawScope.drawFadedEdge(leftEdge: Boolean) {
    val edgeWidthPx = edgeWidth.toPx()
    drawRect(
        topLeft = Offset(if (leftEdge) 0f else size.width - edgeWidthPx, 0f),
        size = Size(edgeWidthPx, size.height),
        brush =
            Brush.horizontalGradient(
                colors = listOf(Color.Transparent, Color.Black),
                startX = if (leftEdge) 0f else size.width,
                endX = if (leftEdge) edgeWidthPx else size.width - edgeWidthPx,
            ),
        blendMode = BlendMode.DstIn,
    )
}

Text(
    "the quick brown fox jumped over the lazy dogs",
    Modifier.widthIn(max = edgeWidth * 4)
        // Rendering to an offscreen buffer is required to get the faded edges' alpha to be
        // applied only to the text, and not whatever is drawn below this composable (e.g. the
        // window).
        .graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
        .drawWithContent {
            drawContent()
            drawFadedEdge(leftEdge = true)
            drawFadedEdge(leftEdge = false)
        }
        .basicMarquee(
            // Animate forever.
            iterations = Int.MAX_VALUE,
            spacing = MarqueeSpacing(0.dp),
        )
        .padding(start = edgeWidth),
)
```

```kotlin
import androidx.compose.foundation.MarqueeAnimationMode
import androidx.compose.foundation.basicMarquee
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.unit.dp

val focusRequester = remember { FocusRequester() }

// Marquee only animates when the content doesn't fit in the max width.
Column(Modifier.width(30.dp)) {
    Text(
        "hello world",
        Modifier.clickable { focusRequester.requestFocus() }
            .basicMarquee(animationMode = MarqueeAnimationMode.WhileFocused)
            .focusRequester(focusRequester)
            .focusable(),
    )
}
```

| Parameters |
|---|---|
| `iterations: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Iterations` | The number of times to repeat the animation. `Int.MAX_VALUE` will repeat forever, and 0 will disable animation. |
| `animationMode: https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode = Immediately` | Whether the marquee should start animating `https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode#Immediately()` or only `https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode#WhileFocused()`. In `https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode#WhileFocused()` mode, the modified node or the content must be made `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)`. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).basicMarquee(kotlin.Int,androidx.compose.foundation.MarqueeAnimationMode,kotlin.Int,kotlin.Int,androidx.compose.foundation.MarqueeSpacing,androidx.compose.ui.unit.Dp)` is part of the animation, so this parameter determines when that initial delay starts counting down, not when the content starts to actually scroll. |
| `repeatDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = RepeatDelayMillis` | The duration to wait before starting each subsequent iteration, in millis. |
| `initialDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = if (animationMode == Immediately) repeatDelayMillis else 0` | The duration to wait before starting the first iteration of the animation, in millis. By default, there will be no initial delay if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).basicMarquee(kotlin.Int,androidx.compose.foundation.MarqueeAnimationMode,kotlin.Int,kotlin.Int,androidx.compose.foundation.MarqueeSpacing,androidx.compose.ui.unit.Dp)` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeAnimationMode#WhileFocused()`, otherwise the initial delay will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).basicMarquee(kotlin.Int,androidx.compose.foundation.MarqueeAnimationMode,kotlin.Int,kotlin.Int,androidx.compose.foundation.MarqueeSpacing,androidx.compose.ui.unit.Dp)`. |
| `spacing: https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeSpacing = Spacing` | A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/MarqueeSpacing` that specifies how much space to leave at the end of the content before showing the beginning again. |
| `velocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Velocity` | The speed of the animation in dps / second. A positive velocity means that the marquee will animate in the direction of the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`. |

### Modifier.edgeSwipeToDismiss

android Artifact: [androidx.wear.compose:compose-foundation](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/foundation/BasicSwipeToDismissBox.kt+function:edgeSwipeToDismiss)

```
fun Modifier.edgeSwipeToDismiss(
    swipeToDismissBoxState: SwipeToDismissBoxState,
    edgeWidth: Dp = SwipeToDismissBoxDefaults.EdgeWidth
): Modifier
```

Handles swipe to dismiss from the edge of the viewport.

Used when the content of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` is handling all the gestures of the viewport, which prevents `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` from handling the swipe-to-dismiss gesture. Examples of this scenario are horizontal paging, such as 2-d scrolling a Map or swiping horizontally between pages.

Use of `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` defines a zone on the left side of the viewport of width `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` in which the swipe-right gesture is intercepted. Other touch events are ignored - vertical scroll, click, long click, etc.

Currently Edge swipe, like swipe to dismiss, is only supported on the left part of the viewport regardless of layout direction as content is swiped away from left to right.

Requires that the element to which this modifier is applied exists within a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` which is using the same `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState` instance. As such, `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` is also compatible with SwipeDismissableNavHost up to and including API 35. However, for API 36 onwards, SwipeDismissableNavHost uses platform predictive back events for navigation, and is not compatible with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)`.

Requires that the element to which this modifier is applied notifies the nested scroll system about the scrolling events that are happening on the element. For example, using a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher`.

Example of a modifier usage with SwipeToDismiss

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.BasicSwipeToDismissBox
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
BasicSwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}
```

| Parameters |
|---|---|
| `swipeToDismissBoxState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState` | State of `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`. Used to trigger swipe gestures on SwipeToDismissBox. |
| `edgeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SwipeToDismissBoxDefaults.EdgeWidth` | Width of the edge zone in which the swipe will be recognised. |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur)

```
fun Modifier.blur(block: BlurScope.() -> Unit): Modifier
```

Draws content with a blur whose radius can vary across the surface.

When `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(kotlin.Function1)` assigns `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope#blurRadiusSpec()` multiple times, the last assignment wins.

A uniform radius renders on Android 12 (API 31) and above; spatially-varying radii (gradients and custom shaders) require Android 13 (API 33) and above. Below these versions the modifier is ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the top, increasingly blurred toward the bottom.
        .blur(BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = 24.dp))
)
```

```kotlin
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

var blurred by remember { mutableStateOf(false) }
val blurRadius by animateDpAsState(if (blurred) 24.dp else 0.dp, label = "blurRadius")
Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // blurRadius is read inside the draw-time block, so the animation invalidates only the
        // draw phase.
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = blurRadius)
        }
        .clickable { blurred = !blurred }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.graphics.blur.BlurStop
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.verticalGradient(
                    listOf(
                        BlurStop(fraction = 0f, radius = 0.dp),
                        BlurStop(fraction = 0.5f, radius = 4.dp),
                        BlurStop(fraction = 1f, radius = 24.dp),
                    )
                )
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

// Blur direction in degrees, CSS convention: 0° fades toward the top, positive angles turn
// clockwise, so 45° fades toward the top-right.
val angleDegrees = 45f
Box(
    Modifier.size(width = 240.dp, height = 120.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur {
            val angle = angleDegrees * PI.toFloat() / 180f
            // Unit direction of increasing blur; y is negated because screen y points down.
            val dirX = sin(angle)
            val dirY = -cos(angle)
            // Half-length of the gradient line that exactly spans the layer at this angle:
            // the layer's corners project onto the line at fractions 0 and 1.
            val width = size.width.value
            val height = size.height.value
            val halfLength = (abs(width * dirX) + abs(height * dirY)) / 2f
            val center = DpOffset((width / 2f).dp, (height / 2f).dp)
            val halfLine = DpOffset((dirX * halfLength).dp, (dirY * halfLength).dp)
            blurRadiusSpec =
                BlurRadiusSpec.linearGradient(
                    start = center - halfLine,
                    end = center + halfLine,
                    startRadius = 0.dp,
                    endRadius = 16.dp,
                )
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the center, blurred toward the edges (center and extent default to the
        // layer).
        .blur {
            blurRadiusSpec =
                BlurRadiusSpec.radialGradient(startRadius = 0.dp, endRadius = 24.dp)
        }
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

// A RuntimeShader whose alpha channel is a 0..1 blur intensity over the mask's maxRadius.
val radiusShader = remember {
    RuntimeShader(
        """
        uniform float2 size;
        half4 main(float2 coord) {
            // alpha is the blur intensity: 0 at the top (sharp) to 1 at the bottom.
            return half4(0.0, 0.0, 0.0, coord.y / max(size.y, 1.0));
        }
        """
            .trimIndent()
    )
}
// Hoisted so a single configuration is reused; the block re-runs at each resolve with the
// current layer size.
val maskRadius =
    remember(radiusShader) {
        BlurRadiusSpec.shader(maxRadius = 24.dp) { sizePx ->
            radiusShader.setFloatUniform("size", sizePx.width, sizePx.height)
            radiusShader
        }
    }
Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        .blur { blurRadiusSpec = maskRadius }
)
```

| Parameters |
|---|---|
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | configuration block run against `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurScope` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur)

```
fun Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle
): Modifier
```

Draws content blurred with the specified radius.

Note this effect is only supported on Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(300.dp)
        // Blur content allowing the result to extend beyond the bounds of the original content
        .blur(30.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
        .background(Color.Red, CircleShape)
)
```

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

Image(
    painter = painterResource(R.drawable.circus),
    contentDescription = "sample blurred image",
    // Blur content within the original bounds, clipping the result to a rounded rectangle
    modifier = Modifier.blur(30.dp, BlurredEdgeTreatment(RoundedCornerShape(5.dp))),
)
```

| Parameters |
|---|---|
| `radius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along both the x and y axis |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur)

```
fun Modifier.blur(
    blurRadiusSpec: BlurRadiusSpec,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle,
    alpha: Float = 1.0f
): Modifier
```

Draws content with a blur specified by `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).blur(androidx.compose.ui.graphics.blur.BlurRadiusSpec,androidx.compose.ui.draw.BlurredEdgeTreatment,kotlin.Float)`.

A uniform radius renders on Android 12 (API 31) and above; spatially-varying radii (gradients and custom shaders) require Android 13 (API 33) and above. Below these versions the modifier is ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. Introduce additional space around the drawn content by the specified blur radius to remain within content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.blur.BlurRadiusSpec
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(200.dp)
        .background(Brush.verticalGradient(listOf(Color.Red, Color.Blue)))
        // Sharp at the top, increasingly blurred toward the bottom.
        .blur(BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = 24.dp))
)
```

| Parameters |
|---|---|
| `blurRadiusSpec: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/blur/BlurRadiusSpec` | varying blur radius configuration across the surface |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | opacity of the blurred content in the 0..1 range |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.blur

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Blur.kt+function:blur)

```
fun Modifier.blur(
    radiusX: Dp,
    radiusY: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle
): Modifier
```

Draws content blurred with the specified radii.

Note this effect is only supported on Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. Introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(
    Modifier.size(300.dp)
        // Blur content allowing the result to extend beyond the bounds of the original content
        .blur(30.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
        .background(Color.Red, CircleShape)
)
```

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

Image(
    painter = painterResource(R.drawable.circus),
    contentDescription = "sample blurred image",
    // Blur content within the original bounds, clipping the result to a rounded rectangle
    modifier = Modifier.blur(30.dp, BlurredEdgeTreatment(RoundedCornerShape(5.dp))),
)
```

| Parameters |
|---|---|
| `radiusX: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along the x axis |
| `radiusY: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | radius of the blur along the y axis |
| `edgeTreatment: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle` | strategy used to render pixels outside content bounds |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border)

```
fun Modifier.border(border: BorderStroke, shape: Shape = RectangleShape): Modifier
```

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.foundation.BorderStroke,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text("Text with  square border", modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp))
```

| Parameters |
|---|---|
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` class that specifies border appearance, such as size and color |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | shape of the border |

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border)

```
fun Modifier.border(width: Dp, brush: Brush, shape: Shape): Modifier
```

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Brush,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val gradientBrush =
    Brush.horizontalGradient(
        colors = listOf(Color.Red, Color.Blue, Color.Green),
        startX = 0.0f,
        endX = 500.0f,
        tileMode = TileMode.Repeated,
    )
Text(
    "Text with gradient border",
    modifier =
        Modifier.border(width = 2.dp, brush = gradientBrush, shape = CircleShape)
            .padding(10.dp),
)
```

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val widthRange = (1..10)
var width by remember { mutableStateOf((widthRange.random()).dp) }

val shapes = remember { listOf(CutCornerShape(8.dp), CircleShape, RoundedCornerShape(20)) }
var selectedShape by remember { mutableStateOf(shapes.random()) }

val colors =
    listOf(
        Color.Black,
        Color.DarkGray,
        Color.Gray,
        Color.LightGray,
        Color.White,
        Color.Red,
        Color.Blue,
        Color.Green,
        Color.Yellow,
        Color.Cyan,
        Color.Magenta,
    )
var gradientBrush by remember {
    mutableStateOf(
        Brush.horizontalGradient(
            colors = listOf(colors.random(), colors.random(), colors.random()),
            startX = 0.0f,
            endX = 500.0f,
            tileMode = TileMode.Repeated,
        )
    )
}

Column(Modifier.padding(2.dp)) {
    Text(text = "Update border with buttons")
    Row {
        Button(
            modifier = Modifier.width(60.dp),
            onClick = { width = (widthRange.random()).dp },
        ) {
            Text(fontSize = 8.sp, text = "width")
        }
        Button(
            modifier = Modifier.width(60.dp),
            onClick = {
                gradientBrush =
                    Brush.horizontalGradient(
                        colors = listOf(colors.random(), colors.random(), colors.random()),
                        startX = 0.0f,
                        endX = 500.0f,
                        tileMode = TileMode.Repeated,
                    )
            },
        ) {
            Text(fontSize = 8.sp, text = "brush")
        }
        Button(
            modifier = Modifier.width(60.dp),
            onClick = { selectedShape = shapes.random() },
        ) {
            Text(fontSize = 8.sp, text = "shape")
        }
    }
    Text(
        "Dynamic border",
        modifier =
            Modifier.border(width = width, brush = gradientBrush, shape = selectedShape)
                .padding(10.dp),
    )
}
```

| Parameters |
|---|---|
| `width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | width of the border. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Hairline()` for a hairline border. |
| `brush: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush` | brush to paint the border with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | shape of the border |

### Modifier.border

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Border.kt+function:border)

```
fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape): Modifier
```

Modify element to add border with appearance specified with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)`, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).border(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape)` and clip it.

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Text(
    "Text with gradient border",
    modifier =
        Modifier.border(border = BorderStroke(2.dp, Color.Blue), shape = CutCornerShape(8.dp))
            .padding(10.dp),
)
```

| Parameters |
|---|---|
| `width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | width of the border. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Hairline()` for a hairline border. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | color to paint the border with |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | shape of the border |

### Modifier.bringIntoViewRequester

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/relocation/BringIntoViewRequester.kt+function:bringIntoViewRequester)

```
fun Modifier.bringIntoViewRequester(
    bringIntoViewRequester: BringIntoViewRequester
): Modifier
```

Modifier that can be used to send `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester#bringIntoView(androidx.compose.ui.geometry.Rect)` requests.

The following example uses a `bringIntoViewRequester` to bring an item into the parent bounds. The example demonstrates how a composable can ask its parents to scroll so that the component using this modifier is brought into the bounds of all its parents.

```kotlin
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusTarget
import androidx.compose.ui.focus.onFocusChanged

Row(Modifier.horizontalScroll(rememberScrollState())) {
    repeat(100) {
        val bringIntoViewRequester = remember { BringIntoViewRequester() }
        val coroutineScope = rememberCoroutineScope()
        Box(
            Modifier
                // This associates the RelocationRequester with a Composable that wants to be
                // brought into view.
                .bringIntoViewRequester(bringIntoViewRequester)
                .onFocusChanged {
                    if (it.isFocused) {
                        coroutineScope.launch {
                            // This sends a request to all parents that asks them to scroll so
                            // that this item is brought into view.
                            bringIntoViewRequester.bringIntoView()
                        }
                    }
                }
                .focusTarget()
        )
    }
}
```

| Parameters |
|---|---|
| `bringIntoViewRequester: https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester` | An instance of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester`. This hoisted object can be used to send `https://developer.android.com/reference/kotlin/androidx/compose/ui/relocation/package-summary#(androidx.compose.ui.node.DelegatableNode).bringIntoView(kotlin.Function0)` requests to parents of the current composable. |

### Modifier.bringIntoViewResponder

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/relocation/BringIntoViewResponder.kt+function:bringIntoViewResponder)

```
fun Modifier.[bringIntoViewResponder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).bringIntoViewResponder(androidx.compose.foundation.relocation.BringIntoViewResponder))(responder: BringIntoViewResponder): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use BringIntoViewModifierNode instead

A parent that can respond to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester` requests from its children, and adjust itself so that the item is visible on screen. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewResponder` for more details about how this mechanism works.

```kotlin
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusTarget
import androidx.compose.ui.focus.onFocusChanged

Row(Modifier.horizontalScroll(rememberScrollState())) {
    repeat(100) {
        val bringIntoViewRequester = remember { BringIntoViewRequester() }
        val coroutineScope = rememberCoroutineScope()
        Box(
            Modifier
                // This associates the RelocationRequester with a Composable that wants to be
                // brought into view.
                .bringIntoViewRequester(bringIntoViewRequester)
                .onFocusChanged {
                    if (it.isFocused) {
                        coroutineScope.launch {
                            // This sends a request to all parents that asks them to scroll so
                            // that this item is brought into view.
                            bringIntoViewRequester.bringIntoView()
                        }
                    }
                }
                .focusTarget()
        )
    }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester` |   |

### Modifier.carouselParallaxScrollEffect

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/carousel/CarouselParallaxScrollEffect.kt+function:carouselParallaxScrollEffect)

```
@ExperimentalMaterial3Api
@Composable
fun Modifier.carouselParallaxScrollEffect(
    index: Int,
    state: CarouselParallaxScrollEffectState,
    shape: Shape,
    border: BorderStroke? = null
): Modifier
```

Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport.

Use `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/carouselParallaxScrollEffect.composable#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` to give any scrollable container the look and feel of a Material uncontained multi-aspect carousel. Unlike dedicated Carousel composables (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalMultiBrowseCarousel.composable#HorizontalMultiBrowseCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalCenteredHeroCarousel.composable#HorizontalCenteredHeroCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)`) which are based on Pager and require all items to be the same size, this modifier can be used with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyRow.composable#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyHorizontalGrid.composable#LazyHorizontalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyVerticalGrid.composable#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, or any custom scrollable where items are able to vary in size.

```kotlin
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.carousel.CarouselParallaxScrollEffectState
import androidx.compose.material3.carousel.carouselParallaxScrollEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

data class CarouselItem(
    val id: Int,
    @DrawableRes val imageResId: Int,
    @StringRes val contentDescriptionResId: Int,
    val mainAxisSize: Dp,
)

val items =
    listOf(
        CarouselItem(
            0,
            R.drawable.carousel_image_1,
            R.string.carousel_image_1_description,
            305.dp,
        ),
        CarouselItem(
            1,
            R.drawable.carousel_image_2,
            R.string.carousel_image_2_description,
            205.dp,
        ),
        CarouselItem(
            2,
            R.drawable.carousel_image_3,
            R.string.carousel_image_3_description,
            275.dp,
        ),
        CarouselItem(
            3,
            R.drawable.carousel_image_4,
            R.string.carousel_image_4_description,
            350.dp,
        ),
        CarouselItem(
            4,
            R.drawable.carousel_image_5,
            R.string.carousel_image_5_description,
            100.dp,
        ),
    )

val state = rememberLazyListState()
val effectState = remember(state) { CarouselParallaxScrollEffectState(state) }
LazyRow(
    state = state,
    contentPadding = PaddingValues(16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxWidth().height(221.dp),
) {
    itemsIndexed(items) { i, item ->
        Image(
            painter = painterResource(id = item.imageResId),
            contentDescription = stringResource(item.contentDescriptionResId),
            modifier =
                Modifier.width(item.mainAxisSize)
                    .height(205.dp)
                    .carouselParallaxScrollEffect(
                        i,
                        effectState,
                        MaterialTheme.shapes.extraLarge,
                    ),
            contentScale = ContentScale.Crop,
        )
    }
}
```

| Parameters |
|---|---|
| `index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | the index of the item this modifier is applied to |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState` | the object holding the scrollable container's effect state |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | the shape to clip the item and optional border to |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | an optional border to draw around the clipped `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` |

### Modifier.clickable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Clickable.kt+function:clickable)

```
fun Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to receive clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds and show a default indication when it's pressed.

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of clickable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of clickable, it is recommended to instead provide `null` to enable lazy creation. If you need the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If you need to support double click or long click alongside the single click, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/combinedClickable.modifier#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`.

***Note*** Any removal operations on Android Views from `clickable` should wrap `onClick` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
```

| Parameters |
|---|---|
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`, and this modifier will appear disabled for accessibility services |
| `onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this clickable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks on the element |

### Modifier.clickable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Clickable.kt+function:clickable)

```
fun Modifier.clickable(
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to receive clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds and show an indication as specified in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` parameter.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` only when needed. This reduces the performance cost of clickable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of clickable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` instead of `null`, as this cannot be lazily created inside clickable.

If you need to support double click or long click alongside the single click, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/combinedClickable.modifier#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`.

***Note*** Any removal operations on Android Views from `clickable` should wrap `onClick` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
```

| Parameters |
|---|---|
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this clickable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when modified element is pressed. By default, indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Pass `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)`, and this modifier will appear disabled for accessibility services |
| `onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)` action |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks on the element |

### Modifier.combinedClickable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Clickable.kt+function:combinedClickable)

```
fun Modifier.combinedClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    hapticFeedbackEnabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds.

If you need only click handling, and no double or long clicks, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of combinedClickable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of combinedClickable, it is recommended to instead provide `null` to enable lazy creation. If you need the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

Note, if the modifier instance gets re-used between a key down and key up events, the ongoing input will be aborted.

***Note*** Any removal operations on Android Views from `clickable` should wrap `onClick` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
```

| Parameters |
|---|---|
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` won't be invoked |
| `onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | will be called when user long presses on the element |
| `onDoubleClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | will be called when user double clicks on the element |
| `hapticFeedbackEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether to use the default `https://developer.android.com/reference/kotlin/androidx/compose/ui/hapticfeedback/HapticFeedback` behavior |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this clickable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks on the element |

### Modifier.combinedClickable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Clickable.kt+function:combinedClickable)

```
fun Modifier.combinedClickable(
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    hapticFeedbackEnabled: Boolean = true,
    onClick: () -> Unit
): Modifier
```

Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds.

If you need only click handling, and no double or long clicks, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`.

Add this modifier to the element to make it clickable within its bounds.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` only when needed. This reduces the performance cost of clickable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of clickable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` instead of `null`, as this cannot be lazily created inside clickable.

Note, if the modifier instance gets re-used between a key down and key up events, the ongoing input will be aborted.

***Note*** Any removal operations on Android Views from `clickable` should wrap `onClick` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
```

| Parameters |
|---|---|
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this clickable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when modified element is pressed. By default, indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Pass `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` won't be invoked |
| `onClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` action |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)` action |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | will be called when user long presses on the element |
| `onDoubleClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | will be called when user double clicks on the element |
| `hapticFeedbackEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether to use the default `https://developer.android.com/reference/kotlin/androidx/compose/ui/hapticfeedback/HapticFeedback` behavior |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks on the element |

### Modifier.clip

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Clip.kt+function:clip)

```
fun Modifier.clip(shape: Shape): Modifier
```

Clip the content to `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).clip(androidx.compose.ui.graphics.Shape)`.

| Parameters |
|---|---|
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | the content will be clipped to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape`. |

### Modifier.clipToBounds

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Clip.kt+function:clipToBounds)

```
fun Modifier.clipToBounds(): Modifier
```

Clip the content to the bounds of a layer defined at this modifier.

### Modifier.clipScrollableContainer

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ClipScrollableContainer.kt+function:clipScrollableContainer)

```
fun Modifier.clipScrollableContainer(orientation: Orientation): Modifier
```

Clips bounds of scrollable container on main axis while leaving space for background effects (like shadows) on cross axis.

| Parameters |
|---|---|
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | orientation of the scrolling |

### Modifier.composed

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:composed)

```
fun Modifier.composed(
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
): Modifier
```

Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.Function1,kotlin.Function1)` may be used to implement **stateful modifiers** that have instance-specific state for each modified element, allowing the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` instance to be safely reused for multiple elements while maintaining element-specific state.

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.Function1,kotlin.Function1)` is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo

// let's create your own custom stateful modifier
fun Modifier.myColorModifier(color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myColorModifier"
                // specify a single argument as the value when the argument name is irrelevant
                value = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.Dp

// let's create your own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myModifier"
                // add name and value of each argument
                properties["width"] = width
                properties["height"] = height
                properties["color"] = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)` must be called to create instance-specific modifiers if you are directly applying a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to an element tree node.

### Modifier.composed

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:composed)

```
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
): Modifier
```

Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Function1,kotlin.Function1)` may be used to implement **stateful modifiers** that have instance-specific state for each modified element, allowing the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Function1,kotlin.Function1)` produces a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will compare `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/equals.html` to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Function1,kotlin.Function1)` should be the fully-qualified `import` name for your modifier factory function, e.g. `com.example.myapp.ui.fancyPadding`.

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Function1,kotlin.Function1)` is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo

// let's create your own custom stateful modifier
fun Modifier.myColorModifier(color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myColorModifier"
                // specify a single argument as the value when the argument name is irrelevant
                value = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.Dp

// let's create your own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myModifier"
                // add name and value of each argument
                properties["width"] = width
                properties["height"] = height
                properties["color"] = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)` must be called to create instance-specific modifiers if you are directly applying a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to an element tree node.

### Modifier.composed

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:composed)

```
fun Modifier.composed(
    fullyQualifiedName: String,
    vararg keys: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
): Modifier
```

Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Array,kotlin.Function1,kotlin.Function1)` may be used to implement **stateful modifiers** that have instance-specific state for each modified element, allowing the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Array,kotlin.Function1,kotlin.Function1)` produces a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will compare `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/equals.html` to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Array,kotlin.Function1,kotlin.Function1)` should be the fully-qualified `import` name for your modifier factory function, e.g. `com.example.myapp.ui.fancyPadding`.

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Array,kotlin.Function1,kotlin.Function1)` is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo

// let's create your own custom stateful modifier
fun Modifier.myColorModifier(color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myColorModifier"
                // specify a single argument as the value when the argument name is irrelevant
                value = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.Dp

// let's create your own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myModifier"
                // add name and value of each argument
                properties["width"] = width
                properties["height"] = height
                properties["color"] = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)` must be called to create instance-specific modifiers if you are directly applying a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to an element tree node.

### Modifier.composed

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:composed)

```
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    key2: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
): Modifier
```

Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` may be used to implement **stateful modifiers** that have instance-specific state for each modified element, allowing the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` produces a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will compare `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/equals.html` to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` should be the fully-qualified `import` name for your modifier factory function, e.g. `com.example.myapp.ui.fancyPadding`.

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo

// let's create your own custom stateful modifier
fun Modifier.myColorModifier(color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myColorModifier"
                // specify a single argument as the value when the argument name is irrelevant
                value = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.Dp

// let's create your own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myModifier"
                // add name and value of each argument
                properties["width"] = width
                properties["height"] = height
                properties["color"] = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)` must be called to create instance-specific modifiers if you are directly applying a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to an element tree node.

### Modifier.composed

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:composed)

```
fun Modifier.composed(
    fullyQualifiedName: String,
    key1: Any?,
    key2: Any?,
    key3: Any?,
    inspectorInfo: InspectorInfo.() -> Unit = NoInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
): Modifier
```

Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` may be used to implement **stateful modifiers** that have instance-specific state for each modified element, allowing the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` instance to be safely reused for multiple elements while maintaining element-specific state.

When keys are provided, `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` produces a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will compare `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/equals.html` to another modifier constructed with the same keys in order to take advantage of caching and skipping optimizations. `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` should be the fully-qualified `import` name for your modifier factory function, e.g. `com.example.myapp.ui.fancyPadding`.

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.Modifier).composed(kotlin.String,kotlin.Any,kotlin.Any,kotlin.Any,kotlin.Function1,kotlin.Function1)` is specified this modifier will be visible to tools during development. Specify the name and arguments of the original modifier.

Example usage:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo

// let's create your own custom stateful modifier
fun Modifier.myColorModifier(color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myColorModifier"
                // specify a single argument as the value when the argument name is irrelevant
                value = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.unit.Dp

// let's create your own custom stateful modifier with multiple arguments
fun Modifier.myModifier(width: Dp, height: Dp, color: Color) =
    composed(
        // pass inspector information for debug
        inspectorInfo =
            debugInspectorInfo {
                // name should match the name of the modifier
                name = "myModifier"
                // add name and value of each argument
                properties["width"] = width
                properties["height"] = height
                properties["color"] = color
            },
        // pass your modifier implementation that resolved per modified element
        factory = {
            // add your modifier implementation here
            Modifier
        },
    )
```

`https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)` must be called to create instance-specific modifiers if you are directly applying a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to an element tree node.

### Modifier.layoutId

android 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/ConstraintLayoutTag.kt+function:layoutId)

```
fun Modifier.layoutId(layoutId: String, tag: String? = null): Modifier
```

Alternative to `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutId.modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)` that enables the use of `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/package-summary#(androidx.compose.ui.Modifier).layoutId(kotlin.String,kotlin.String)`.

| Parameters |
|---|---|
| `layoutId: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | The unique Id string assigned to the Composable |
| `tag: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | A string to represent a group of Composables that may be affected by a ConstraintLayout function. Eg: The `Variables` block in a JSON5 based `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintSet` |

### Modifier.contentColorProvider

android Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/ContentColor.kt+function:contentColorProvider)

```
fun Modifier.contentColorProvider(contentColor: Color): Modifier
```

Provides `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).contentColorProvider(androidx.compose.ui.graphics.Color)` for text and iconography to consume. Content color is provided automatically by `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/surface.composable#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` - contentColorProvider can be used for cases where some text or icons inside a surface require a different color for emphasis.

| Parameters |
|---|---|
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | the content color to provide for descendants |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/surface.composable#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` |   |
| `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#calculateContentColor(androidx.compose.ui.graphics.Color)` |   |

### Modifier.curveToEdge

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/CurveToEdge.kt+function:curveToEdge)

```
@RequiresApi(value = 33)
fun Modifier.curveToEdge(
    maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle,
    angularDirection: AngularDirection = AngularDirection.Clockwise,
    anchor: Float = 270.0f,
    anchorType: AngularAnchorType = AngularAnchorType.Center
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that curves a component to the border of the parent container around the center, always treating the container as a circle. Useful for circular screens. It draws outside the bounds of the container, then a shader is applied that calculates and draws the curved content.

If the container is a rectangle, it will be treated as a circle with radius of the height divided by 2.

Content towards the center of the container will be smaller due to the method of calculating the curve. This is most apparent in text that runs over one line.

There are currently some limitations: clickable components will have incorrect clickable bounds, and talkback doesn't highlight components correctly.

Simple example of applying Modifier.curveToEdge to text:

```kotlin
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.curveToEdge

Text("Curved Text", Modifier.curveToEdge())
```

Example of applying Modifier.curveToEdge to a long piece of text, with overflow handling:

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.CurvedTextDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.curveToEdge

Text(
    "A really long piece of curved text",
    Modifier.curveToEdge(CurvedTextDefaults.StaticContentMaxSweepAngle),
    overflow = TextOverflow.Ellipsis,
    maxLines = 1,
)
```

| Parameters |
|---|---|
| `maxSweepAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = CurvedTextDefaults.ScrollableContentMaxSweepAngle` | The maximum sweep angle in degrees, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CurvedTextDefaults#ScrollableContentMaxSweepAngle()` by default. For screens without scrollable content, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CurvedTextDefaults#StaticContentMaxSweepAngle()` may be used instead. |
| `angularDirection: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AngularDirection = AngularDirection.Clockwise` | Specify the direction of the content. Default is clockwise (so that text appears the correct way up while at the top of the container) |
| `anchor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 270.0f` | The angle at which the content is laid out relative to, in degrees. An angle of 0 corresponds to the right (3 o'clock on a watch), 90 degrees is bottom (6 o'clock), and so on. Default is 270 degrees (top of the container). |
| `anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AngularAnchorType = AngularAnchorType.Center` | Specify how the content is drawn with respect to the anchor. Default is to center the content on the anchor. |

### Modifier.depthEffect

android Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/DepthEffect.kt+function:depthEffect)

```
fun Modifier.depthEffect(depthEffect: DepthEffect?, shape: Shape): Modifier
```

Renders shadows for the provided `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).depthEffect(androidx.xr.glimmer.DepthEffect,androidx.compose.ui.graphics.Shape)`.

| Parameters |
|---|---|
| `depthEffect: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/DepthEffect?` | Depth effect to render shadows for. If `null`, no shadows will be rendered. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` of the shadows |

### Modifier.dragAndDropSource

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/draganddrop/DragAndDropSource.kt+function:dragAndDropSource)

```
fun Modifier.dragAndDropSource(
    transferData: (Offset) -> DragAndDropTransferData?
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that allows an element it is applied to be treated like a source for drag and drop operations. It displays the element dragged as a drag shadow.

Learn how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/dragAndDropSource.modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.draganddrop.dragAndDropSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draganddrop.DragAndDropTransferData
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val label = remember { "Drag me" }
Box(
    modifier =
        modifier
            .dragAndDropSource { _ ->
                DragAndDropTransferData(
                    clipData = ClipData.newPlainText(label, label),
                    flags = View.DRAG_FLAG_GLOBAL,
                )
            }
            .border(
                border =
                    BorderStroke(
                        width = 4.dp,
                        brush = Brush.linearGradient(listOf(Color.Magenta, Color.Magenta)),
                    ),
                shape = RoundedCornerShape(16.dp),
            )
            .padding(24.dp)
) {
    Text(modifier = Modifier.align(Alignment.Center), text = label)
}
```

| Parameters |
|---|---|
| `transferData: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData?` | A function that receives the current offset of the drag operation and returns the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData` to be transferred. If null is returned, the drag and drop transfer won't be started. |

### Modifier.dragAndDropSource

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/draganddrop/LegacyDragAndDropSource.android.kt+function:dragAndDropSource)

```
@ExperimentalFoundationApi
fun Modifier.[dragAndDropSource](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1,kotlin.coroutines.SuspendFunction1))(
    drawDragDecoration: DrawScope.() -> Unit,
    block: suspend DragAndDropSourceScope.() -> Unit
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Replaced by overload with a callback for obtain a transfer data,start detection is performed by Compose itself, use this instead:
>
> ```kotlin
> Modifier.dragAndDropSource(transferData)
> ```

A Modifier that allows an element it is applied to to be treated like a source for drag and drop operations.

Learn how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/dragAndDropSource.modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1,kotlin.coroutines.SuspendFunction1)` while providing a custom drag shadow:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.draganddrop.dragAndDropSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Box(
    modifier =
        Modifier.size(56.dp).background(color = color).dragAndDropSource(
            drawDragDecoration = { drawRect(color) }
        ) { _ ->
            color.toDragAndDropTransfer()
        }
)
```

| Parameters |
|---|---|
| `drawDragDecoration: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | provides the visual representation of the item dragged during the drag and drop gesture. |
| `block: suspend https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A lambda with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope` as a receiver which provides a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope` to detect the drag gesture, after which a drag and drop gesture can be started with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/DragAndDropSourceScope#startTransfer(androidx.compose.ui.draganddrop.DragAndDropTransferData)`. |

### Modifier.dragAndDropSource

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/draganddrop/DragAndDropSource.kt+function:dragAndDropSource)

```
fun Modifier.dragAndDropSource(
    drawDragDecoration: DrawScope.() -> Unit,
    transferData: (Offset) -> DragAndDropTransferData?
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that allows an element it is applied to be treated like a source for drag and drop operations.

Learn how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/dragAndDropSource.modifier#(androidx.compose.ui.Modifier).dragAndDropSource(kotlin.Function1)` while providing a custom drag shadow:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.draganddrop.dragAndDropSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Box(
    modifier =
        Modifier.size(56.dp).background(color = color).dragAndDropSource(
            drawDragDecoration = { drawRect(color) }
        ) { _ ->
            color.toDragAndDropTransfer()
        }
)
```

| Parameters |
|---|---|
| `drawDragDecoration: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | provides the visual representation of the item dragged during the drag and drop gesture. |
| `transferData: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData?` | A function that receives the current offset of the drag operation and returns the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTransferData` to be transferred. If null is returned, the drag and drop transfer won't be started. |

### Modifier.dragAndDropTarget

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/draganddrop/DragAndDropTarget.kt+function:dragAndDropTarget)

```
fun Modifier.dragAndDropTarget(
    shouldStartDragAndDrop: (startEvent: DragAndDropEvent) -> Boolean,
    target: DragAndDropTarget
): Modifier
```

A modifier that allows for receiving from a drag and drop gesture.

Learn how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/dragAndDropTarget.modifier#(androidx.compose.ui.Modifier).dragAndDropTarget(kotlin.Function1,androidx.compose.ui.draganddrop.DragAndDropTarget)` to receive drag and drop events from inside your app or from other apps:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.draganddrop.dragAndDropTarget
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draganddrop.DragAndDropEvent
import androidx.compose.ui.draganddrop.DragAndDropTarget
import androidx.compose.ui.draganddrop.mimeTypes
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val validMimeTypePrefixes = remember {
    setOf(ClipDescription.MIMETYPE_TEXT_INTENT, "image/", "text/", "video/", "audio/")
}
var backgroundColor by remember { mutableStateOf(Color.Transparent) }
val dragAndDropTarget = remember {
    object : DragAndDropTarget {
        override fun onStarted(event: DragAndDropEvent) {
            backgroundColor = Color.DarkGray.copy(alpha = 0.2f)
        }

        override fun onDrop(event: DragAndDropEvent): Boolean {
            onDragAndDropEventDropped(event)
            return true
        }

        override fun onEnded(event: DragAndDropEvent) {
            backgroundColor = Color.Transparent
        }
    }
}
Box(
    modifier =
        Modifier.fillMaxSize()
            .dragAndDropTarget(
                shouldStartDragAndDrop = accept@{ startEvent ->
                        val hasValidMimeType =
                            startEvent.mimeTypes().any { eventMimeType ->
                                validMimeTypePrefixes.any(eventMimeType::startsWith)
                            }
                        hasValidMimeType
                    },
                target = dragAndDropTarget,
            )
            .background(backgroundColor)
            .border(width = 4.dp, color = Color.Magenta, shape = RoundedCornerShape(16.dp))
) {
    when (eventSummary) {
        null -> Text(modifier = Modifier.align(Alignment.Center), text = "Drop anything here")
        else ->
            Text(
                modifier =
                    Modifier.padding(horizontal = 16.dp, vertical = 24.dp)
                        .verticalScroll(rememberScrollState()),
                text = eventSummary,
            )
    }
}
```

| Parameters |
|---|---|
| `shouldStartDragAndDrop: (startEvent: https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Allows the Composable to decide if it wants to receive from a given drag and drop session by inspecting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropEvent` that started the session. |
| `target: https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTarget` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/draganddrop/DragAndDropTarget` that will receive events for a given drag and drop session. All drag and drop target modifiers in the hierarchy will be given an opportunity to participate in a given drag and drop session via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/draganddrop/package-summary#(androidx.compose.ui.Modifier).dragAndDropTarget(kotlin.Function1,androidx.compose.ui.draganddrop.DragAndDropTarget)`. |

### Modifier.draggable2D

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Draggable2D.kt+function:draggable2D)

```
fun Modifier.draggable2D(
    state: Draggable2DState,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    startDragImmediately: Boolean = false,
    onDragStarted: (startedPosition: Offset) -> Unit = NoOpOnDragStart,
    onDragStopped: (velocity: Velocity) -> Unit = NoOpOnDragStop,
    reverseDirection: Boolean = false
): Modifier
```

Configure touch dragging for the UI element in both orientations. The drag distance reported to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Draggable2DState`, allowing users to react to the drag delta and update their state.

The common common usecase for this component is when you need to be able to drag something inside the component on the screen and represent this state via one float value

If you are implementing dragging in a single orientation, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.draggable2D
import androidx.compose.foundation.gestures.rememberDraggable2DState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// Draw a box that has a a grey background
// with a red square that moves along 300.dp dragging in both directions
val max = 200.dp
val min = 0.dp
val (minPx, maxPx) = with(LocalDensity.current) { min.toPx() to max.toPx() }
// this is the offset we will update while dragging
var offsetPositionX by remember { mutableStateOf(0f) }
var offsetPositionY by remember { mutableStateOf(0f) }

Box(
    modifier =
        Modifier.width(max)
            .height(max)
            .draggable2D(
                state =
                    rememberDraggable2DState { delta ->
                        val newValueX = offsetPositionX + delta.x
                        val newValueY = offsetPositionY + delta.y
                        offsetPositionX = newValueX.coerceIn(minPx, maxPx)
                        offsetPositionY = newValueY.coerceIn(minPx, maxPx)
                    }
            )
            .background(Color.LightGray)
) {
    Box(
        Modifier.offset {
                IntOffset(offsetPositionX.roundToInt(), offsetPositionY.roundToInt())
            }
            .size(50.dp)
            .background(Color.Red)
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Draggable2DState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Draggable2DState` state of the draggable2D. Defines how drag events will be interpreted by the user land logic. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not drag is enabled |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/DragInteraction.Start` when this draggable is being dragged. |
| `startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | when set to true, draggable2D will start dragging immediately and prevent other gesture detectors from reacting to "down" events (in order to block composed press-based gestures). This is intended to allow end users to "catch" an animating widget by pressing on it. It's useful to set it when value you're dragging is settling / animating. |
| `onDragStarted: (startedPosition: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = NoOpOnDragStart` | callback that will be invoked when drag is about to start at the starting position, allowing user to perform preparation for drag. |
| `onDragStopped: (velocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Velocity) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = NoOpOnDragStop` | callback that will be invoked when drag is finished, allowing the user to react on velocity and process it. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of the dragging, so top to bottom dragging will behave like bottom to top and left to right will behave like right to left. |

### Modifier.draggable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Draggable.kt+function:draggable)

```
fun Modifier.draggable(
    state: DraggableState,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    startDragImmediately: Boolean = false,
    onDragStarted: suspend CoroutineScope.(startedPosition: Offset) -> Unit = NoOpOnDragStarted,
    onDragStopped: suspend CoroutineScope.(velocity: Float) -> Unit = NoOpOnDragStopped,
    reverseDirection: Boolean = false
): Modifier
```

Configure touch dragging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`. The drag distance reported to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/DraggableState`, allowing users to react on the drag delta and update their state.

The common usecase for this component is when you need to be able to drag something inside the component on the screen and represent this state via one float value

If you need to control the whole dragging flow, consider using `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` instead with the helper functions like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.input.pointer.PointerInputScope).detectDragGestures(kotlin.Function1,kotlin.Function0,kotlin.Function0,kotlin.Function2)`.

If you want to enable dragging in 2 dimensions, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable2D.modifier#(androidx.compose.ui.Modifier).draggable2D(androidx.compose.foundation.gestures.Draggable2DState,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Boolean)`.

If you are implementing scroll/fling behavior, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// Draw a seekbar-like composable that has a black background
// with a red square that moves along the 300.dp drag distance
val max = 300.dp
val min = 0.dp
val (minPx, maxPx) = with(LocalDensity.current) { min.toPx() to max.toPx() }
// this is the  state we will update while dragging
val offsetPosition = remember { mutableStateOf(0f) }

// seekbar itself
Box(
    modifier =
        Modifier.width(max)
            .draggable(
                orientation = Orientation.Horizontal,
                state =
                    rememberDraggableState { delta ->
                        val newValue = offsetPosition.value + delta
                        offsetPosition.value = newValue.coerceIn(minPx, maxPx)
                    },
            )
            .background(Color.Black)
) {
    Box(
        Modifier.offset { IntOffset(offsetPosition.value.roundToInt(), 0) }
            .size(50.dp)
            .background(Color.Red)
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/DraggableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/DraggableState` state of the draggable. Defines how drag events will be interpreted by the user land logic. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | orientation of the drag |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not drag is enabled |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/DragInteraction.Start` when this draggable is being dragged. |
| `startDragImmediately: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | when set to true, draggable will start dragging immediately and prevent other gesture detectors from reacting to "down" events (in order to block composed press-based gestures). This is intended to allow end users to "catch" an animating widget by pressing on it. It's useful to set it when value you're dragging is settling / animating. |
| `onDragStarted: suspend https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-coroutine-scope/index.html.(startedPosition: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = NoOpOnDragStarted` | callback that will be invoked when drag is about to start at the starting position, allowing user to suspend and perform preparation for drag, if desired. This suspend function is invoked with the draggable scope, allowing for async processing, if desired. Note that the scope used here is the one provided by the draggable node, for long running work that needs to outlast the modifier being in the composition you should use a scope that fits the lifecycle needed. |
| `onDragStopped: suspend https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-coroutine-scope/index.html.(velocity: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = NoOpOnDragStopped` | callback that will be invoked when drag is finished, allowing the user to react on velocity and process it. This suspend function is invoked with the draggable scope, allowing for async processing, if desired. Note that the scope used here is the one provided by the draggable node, for long running work that needs to outlast the modifier being in the composition you should use a scope that fits the lifecycle needed. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of the scroll, so top to bottom scroll will behave like bottom to top and left to right will behave like right to left. |

### Modifier.drawBehind

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/DrawModifier.kt+function:drawBehind)

```
fun Modifier.drawBehind(onDraw: DrawScope.() -> Unit): Modifier
```

Draw into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Canvas` behind the modified content.

### Modifier.drawWithCache

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/DrawModifier.kt+function:drawWithCache)

```
fun Modifier.drawWithCache(onBuildDrawCache: CacheDrawScope.() -> DrawResult): Modifier
```

Draw into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope` with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed. In the event that the drawing area changes, or the underlying state values that are being read change, this method is invoked again to recreate objects to be used during drawing

For example, a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/LinearGradient` that is to occupy the full bounds of the drawing area can be created once the size has been defined and referenced for subsequent draw calls without having to re-allocate.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

Box(
    Modifier.drawWithCache {
        val gradient =
            Brush.linearGradient(
                colors = listOf(Color.Red, Color.Blue),
                start = Offset.Zero,
                end = Offset(size.width, size.height),
            )
        onDrawBehind { drawRect(gradient) }
    }
)
```

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

val colors1 = listOf(Color.Red, Color.Blue)
val colors2 = listOf(Color.Yellow, Color.Green)
var toggle by remember { mutableStateOf(true) }
Box(
    Modifier.clickable { toggle = !toggle }
        .drawWithCache {
            val gradient =
                Brush.linearGradient(
                    colors = if (toggle) colors1 else colors2,
                    start = Offset.Zero,
                    end = Offset(size.width, size.height),
                )
            onDrawBehind { drawRect(gradient) }
        }
)
```

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.Path
import androidx.compose.ui.graphics.vector.PathData
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.unit.dp

val vectorPainter =
    rememberVectorPainter(24.dp, 24.dp, autoMirror = true) { viewportWidth, viewportHeight ->
        Path(
            pathData =
                PathData {
                    lineTo(viewportWidth, 0f)
                    lineTo(0f, viewportHeight)
                    close()
                },
            fill = SolidColor(Color.Black),
        )
    }
Image(
    painter = vectorPainter,
    contentDescription = null,
    modifier =
        Modifier.requiredSize(120.dp).drawWithCache {
            val gradient =
                Brush.linearGradient(
                    colors = listOf(Color.Red, Color.Blue),
                    start = Offset.Zero,
                    end = Offset(0f, size.height),
                )
            onDrawWithContent {
                drawContent()
                drawRect(gradient, blendMode = BlendMode.Plus)
            }
        },
)
```

### Modifier.drawWithContent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/DrawModifier.kt+function:drawWithContent)

```
fun Modifier.drawWithContent(onDraw: ContentDrawScope.() -> Unit): Modifier
```

Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DrawModifier` that allows the developer to draw before or after the layout's contents. It also allows the modifier to adjust the layout's canvas.

### Modifier.excludeFromSystemGesture

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ExcludeFromSystemGesture.android.kt+function:excludeFromSystemGesture)

```
fun Modifier.[excludeFromSystemGesture](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).excludeFromSystemGesture())(): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use systemGestureExclusion, use this instead:
>
> ```kotlin
> systemGestureExclusion
> ```

Excludes the layout rectangle from the system gesture.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setSystemGestureExclusionRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.excludeFromSystemGesture

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ExcludeFromSystemGesture.android.kt+function:excludeFromSystemGesture)

```
fun Modifier.[excludeFromSystemGesture](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).excludeFromSystemGesture(kotlin.Function1))(
    exclusion: (LayoutCoordinates) -> Rect
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use systemGestureExclusion, use this instead:
>
> ```kotlin
> systemGestureExclusion
> ```

Excludes a rectangle within the local layout coordinates from the system gesture. After layout, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).excludeFromSystemGesture(kotlin.Function1)` is called to determine the `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` to exclude from the system gesture area.

The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`'s location in the layout is passed as passed as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).excludeFromSystemGesture(kotlin.Function1)`'s parameter.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setSystemGestureExclusionRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.animateFloatingActionButton

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/FloatingActionButton.kt+function:animateFloatingActionButton)

```
fun Modifier.animateFloatingActionButton(
    visible: Boolean,
    alignment: Alignment,
    targetScale: Float = FloatingActionButtonDefaults.ShowHideTargetScale,
    scaleAnimationSpec: AnimationSpec<Float>? = null,
    alphaAnimationSpec: AnimationSpec<Float>? = null
): Modifier
```

Apply this modifier to a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` to show or hide it with an animation, typically based on the app's main content scrolling.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MediumFloatingActionButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.animateFloatingActionButton
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val listState = rememberLazyListState()
// The FAB is initially shown. Upon scrolling past the first item we hide the FAB by using a
// remembered derived state to minimize unnecessary compositions.
val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }

Scaffold(
    floatingActionButton = {
        // A FAB should have a tooltip associated with it.
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = {
                PlainTooltip(
                    modifier =
                        Modifier.semantics {
                            // TODO(b/496338253): Remove this modifier once bug where tooltip
                            //  text is not announced by a11y screen readers is resolved.
                            liveRegion = LiveRegionMode.Assertive
                            paneTitle = "Localized description"
                        }
                ) {
                    Text("Localized description")
                }
            },
            state = rememberTooltipState(),
        ) {
            MediumFloatingActionButton(
                modifier =
                    Modifier.animateFloatingActionButton(
                        visible = fabVisible,
                        alignment = Alignment.BottomEnd,
                    ),
                onClick = { /* do something */ },
            ) {
                Icon(
                    Icons.Filled.Add,
                    contentDescription = "Localized description",
                    modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
                )
            }
        }
    },
    floatingActionButtonPosition = FabPosition.End,
) {
    LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
        for (index in 0 until 100) {
            item { Text(text = "List item - $index", modifier = Modifier.padding(24.dp)) }
        }
    }
}
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether the FAB should be shown or hidden with an animation |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` | the direction towards which the FAB should be scaled to and from |
| `targetScale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = FloatingActionButtonDefaults.ShowHideTargetScale` | the initial scale value when showing the FAB and the final scale value when hiding the FAB |
| `scaleAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>? = null` | the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` to use for the scale part of the animation, if null the Fast Spatial spring spec from the `https://developer.android.com/reference/kotlin/androidx/compose/material3/MotionScheme` will be used |
| `alphaAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>? = null` | the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` to use for the alpha part of the animation, if null the Fast Effects spring spec from the `https://developer.android.com/reference/kotlin/androidx/compose/material3/MotionScheme` will be used |

### Modifier.onFocusChanged

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusChangedModifier.kt+function:onFocusChanged)

```
fun Modifier.onFocusChanged(onFocusChanged: (FocusState) -> Unit): Modifier
```

Add this modifier to a component to observe focus state events. `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)` is invoked when the focus state changes. The `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)` modifier listens to the state of the first `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` following this modifier.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Green
import androidx.compose.ui.unit.dp

var color by remember { mutableStateOf(Black) }
Box(
    Modifier.border(2.dp, color)
        // The onFocusChanged should be added BEFORE the focusable that is being observed.
        .onFocusChanged { color = if (it.isFocused) Green else Black }
        .focusable()
)
```

Note: If you want to be notified every time the internal focus state is written to (even if it hasn't changed), use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusEvent.modifier#(androidx.compose.ui.Modifier).onFocusEvent(kotlin.Function1)` instead.

### Modifier.onFocusEvent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusEventModifier.kt+function:onFocusEvent)

```
fun Modifier.onFocusEvent(onFocusEvent: (FocusState) -> Unit): Modifier
```

Add this modifier to a component to observe focus state events.

### Modifier.focusModifier

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusModifier.kt+function:focusModifier)

```
fun Modifier.[focusModifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusModifier())(): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Replaced by focusTarget, use this instead:
>
> ```kotlin
> focusTarget()
> ```

Add this modifier to a component to make it focusable.

### Modifier.focusTarget

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusModifier.kt+function:focusTarget)

```
fun Modifier.focusTarget(): Modifier
```

Add this modifier to a component to make it focusable.

Focus state is stored within this modifier. The bounds of this modifier reflect the bounds of the focus box.

Note: This is a low level modifier. Before using this consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)`. It uses a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` in its implementation. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` adds semantics that are needed for accessibility.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusTarget
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Green
import androidx.compose.ui.unit.dp

var color by remember { mutableStateOf(Black) }
Box(
    Modifier.border(2.dp, color)
        // The onFocusChanged should be added BEFORE the focusTarget that is being observed.
        .onFocusChanged { color = if (it.isFocused) Green else Black }
        .focusTarget()
)
```

### Modifier.focusOrder

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusOrderModifier.kt+function:focusOrder)

```
fun Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(kotlin.Function1))(focusOrderReceiver: FocusOrder.() -> Unit): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use focusProperties() instead, use this instead:
>
> ```kotlin
> this.focusProperties(focusOrderReceiver)
> ```

Use this modifier to specify a custom focus traversal order.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}
```

| Parameters |
|---|---|
| `focusOrderReceiver: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Specifies `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester`s that are used when the user wants to move the current focus to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder#next()` item, or wants to move focus `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder#left()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder#right()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder#up()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusOrder#down()`. |

### Modifier.focusOrder

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusOrderModifier.kt+function:focusOrder)

```
fun Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester))(focusRequester: FocusRequester): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use focusRequester() instead, use this instead:
>
> ```kotlin
> this.focusRequester(focusRequester)
> ```

A modifier that lets you specify a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` for the current composable so that this `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester)` can be used by another composable to specify a custom focus order.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}
```

### Modifier.focusOrder

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusOrderModifier.kt+function:focusOrder)

```
fun Modifier.[focusOrder](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester,kotlin.Function1))(
    focusRequester: FocusRequester,
    focusOrderReceiver: FocusOrder.() -> Unit
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use focusProperties() and focusRequester() instead, use this instead:
>
> ```kotlin
> this.focusRequester(focusRequester).focusProperties(focusOrderReceiver)
> ```

A modifier that lets you specify a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` for the current composable along with `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusOrder.modifier#(androidx.compose.ui.Modifier).focusOrder(androidx.compose.ui.focus.FocusRequester,kotlin.Function1)`.

### Modifier.focusProperties

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusProperties.kt+function:focusProperties)

```
fun Modifier.focusProperties(scope: FocusProperties.() -> Unit): Modifier
```

This modifier allows you to specify properties that are accessible to `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()`s further down the modifier chain or on child layout nodes.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusTarget
import androidx.compose.ui.input.InputMode.Companion.Touch
import androidx.compose.ui.platform.LocalInputModeManager

Column {
    // Always focusable.
    Box(modifier = Modifier.focusProperties { canFocus = true }.focusTarget())
    // Only focusable in non-touch mode.
    val inputModeManager = LocalInputModeManager.current
    Box(
        modifier =
            Modifier.focusProperties { canFocus = inputModeManager.inputMode != Touch }
                .focusTarget()
    )
}
```

### Modifier.focusRequester

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusRequesterModifier.kt+function:focusRequester)

```
fun Modifier.focusRequester(focusRequester: FocusRequester): Modifier
```

Add this modifier to a component to request changes to focus.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Green
import androidx.compose.ui.unit.dp

val focusRequester = remember { FocusRequester() }
var color by remember { mutableStateOf(Black) }
Box(
    Modifier.clickable { focusRequester.requestFocus() }
        .border(2.dp, color)
        // The focusRequester should be added BEFORE the focusable.
        .focusRequester(focusRequester)
        // The onFocusChanged should be added BEFORE the focusable that is being observed.
        .onFocusChanged { color = if (it.isFocused) Green else Black }
        .focusable()
)
```

### Modifier.focusRestorer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusRestorer.kt+function:focusRestorer)

```
fun Modifier.focusRestorer(fallback: FocusRequester = Default): Modifier
```

This modifier can be used to save and restore focus to a focus group. When focus leaves the focus group, it stores a reference to the item that was previously focused. Then when focus re-enters this focus group, it restores focus to the previously focused item.

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer

LazyRow(Modifier.focusRestorer()) {
    item { Button(onClick = {}) { Text("1") } }
    item { Button(onClick = {}) { Text("2") } }
    item { Button(onClick = {}) { Text("3") } }
    item { Button(onClick = {}) { Text("4") } }
}
```

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.focusRestorer

val focusRequester = remember { FocusRequester() }
LazyRow(
    // If restoration fails, focus would fallback to the item associated with focusRequester.
    Modifier.focusRestorer(focusRequester)
) {
    item {
        Button(modifier = Modifier.focusRequester(focusRequester), onClick = {}) { Text("1") }
    }
    item { Button(onClick = {}) { Text("2") } }
    item { Button(onClick = {}) { Text("3") } }
    item { Button(onClick = {}) { Text("4") } }
}
```

| Parameters |
|---|---|
| `fallback: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester = Default` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` that is used when focus restoration fails to restore the initially focused item. For example, this might happen if the item is not available to be focused. The default value of `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#Default()` chooses the default focusable item. |

### Modifier.focusRestorer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusRestorer.kt+function:focusRestorer)

```
@ExperimentalComposeUiApi
fun Modifier.[focusRestorer](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).focusRestorer(kotlin.Function0))(onRestoreFailed: (() -> FocusRequester)?): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use focusRestorer(FocusRequester) instead, use this instead:
>
> ```kotlin
> this.focusRestorer(onRestoreFailed())
> ```

Deprecated focusRestorer API. Use the version accepting `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` instead of the lambda. This method will be removed soon after submitting.

### Modifier.focusGroup

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Focusable.kt+function:focusGroup)

```
fun Modifier.focusGroup(): Modifier
```

Creates a focus group or marks this component as a focus group. This means that when we move focus using the keyboard or programmatically using `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusManager#moveFocus(androidx.compose.ui.focus.FocusDirection)`, the items within the focus group will be given a higher priority before focus moves to items outside the focus group.

In the sample below, each column is a focus group, so pressing the tab key will move focus to all the buttons in column 1 before visiting column 2.

```kotlin
import androidx.compose.foundation.focusGroup
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

Row {
    Column(Modifier.focusGroup()) {
        Button({}) { Text("Row1 Col1") }
        Button({}) { Text("Row2 Col1") }
        Button({}) { Text("Row3 Col1") }
    }
    Column(Modifier.focusGroup()) {
        Button({}) { Text("Row1 Col2") }
        Button({}) { Text("Row2 Col2") }
        Button({}) { Text("Row3 Col2") }
    }
}
```

Note: The focusable children of a focusable parent automatically form a focus group. This modifier is to be used when you want to create a focus group where the parent is not focusable. If you encounter a component that uses a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusGroup.modifier#(androidx.compose.ui.Modifier).focusGroup()` internally, you can make it focusable by using a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` modifier. In the second sample here, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyRow.composable#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` is a focus group that is not itself focusable. But you can make it focusable by adding a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` modifier.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.focusable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Red
import androidx.compose.ui.unit.dp

val interactionSource = remember { MutableInteractionSource() }
LazyRow(
    Modifier.focusable(interactionSource = interactionSource)
        .border(1.dp, if (interactionSource.collectIsFocusedAsState().value) Red else Black)
) {
    repeat(10) { item { Button({}) { Text("Button$it") } } }
}
```

### Modifier.focusable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Focusable.kt+function:focusable)

```
fun Modifier.focusable(
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null
): Modifier
```

Configure component to be focusable via focus system or accessibility "focus" event.

Add this modifier to the element to make it focusable within its bounds.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester

// initialize focus reference to be able to request focus programmatically
val focusRequester = remember { FocusRequester() }
// MutableInteractionSource to track changes of the component's interactions (like "focused")
val interactionSource = remember { MutableInteractionSource() }

// text below will change when we focus it via button click
val isFocused = interactionSource.collectIsFocusedAsState().value
val text =
    if (isFocused) {
        "Focused! tap anywhere to free the focus"
    } else {
        "Bring focus to me by tapping the button below!"
    }
Column {
    // this Text will change it's text parameter depending on the presence of a focus
    Text(
        text = text,
        modifier =
            Modifier
                // add focusRequester modifier before the focusable (or even in the parent)
                .focusRequester(focusRequester)
                .focusable(interactionSource = interactionSource),
    )
    Button(onClick = { focusRequester.requestFocus() }) {
        Text("Bring focus to the text above")
    }
}
```

| Parameters |
|---|---|
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, element won't participate in the focus |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/FocusInteraction.Focus` when this element is being focused. |

### Modifier.onFocusedBoundsChanged

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/FocusedBounds.kt+function:onFocusedBoundsChanged)

```
fun Modifier.[onFocusedBoundsChanged](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFocusedBoundsChanged(kotlin.Function1))(
    onPositioned: (LayoutCoordinates?) -> Unit
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> onFocusedBoundsChanged doesn't reliably observe focus bounds changes through layout coordinate changes and focus changes. The existing best-effort implementation has been removed, resulting in this becoming a no-op Modifier where onPositioned will never be called. Use FocusTargetModifierNode.getFocusedRect() instead to query this information on demand as needed.

Modifier.onFocusedBoundsChanged has been deprecated, and its implementation has been removed. This modifier now no-ops. To retrieve the position of a focused node, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.focus.FocusTargetModifierNode).getFocusedRect()` to query this information as needed.

### Modifier.preferredFrameRate

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/FrameRate.kt+function:preferredFrameRate)

```
fun Modifier.preferredFrameRate(frameRateCategory: FrameRateCategory): Modifier
```

Set a requested frame rate on Composable

You can set the preferred frame rate (frames per second) for a Composable using a frame rate category see: `https://developer.android.com/reference/kotlin/androidx/compose/ui/FrameRateCategory`.

For increased frame rates, please consider using FrameRateCategory.High.

Keep in mind that the preferred frame rate affects the frame rate for the next frame, so use this method carefully. It's important to note that the preference is valid as long as the Composable is drawn.

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.Text
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.FrameRateCategory
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.preferredFrameRate
import androidx.compose.ui.unit.dp

var targetAlpha by remember { mutableFloatStateOf(1f) }
val context = LocalContext.current
val activity: Activity? = findOwner(context)
DisposableEffect(activity) {
    activity?.window?.frameRateBoostOnTouchEnabled = false
    onDispose { activity?.window?.frameRateBoostOnTouchEnabled = true }
}

val alpha by
    animateFloatAsState(targetValue = targetAlpha, animationSpec = tween(durationMillis = 5000))

Column(modifier = Modifier.size(300.dp)) {
    Button(
        onClick = { targetAlpha = if (targetAlpha == 1f) 0.2f else 1f },
        modifier =
            Modifier.testTag("frameRateTag")
                .background(LocalContentColor.current.copy(alpha = alpha)),
    ) {
        Text(
            text = "Click Me for alpha change with frame rate category High",
            color = LocalContentColor.current.copy(alpha = alpha),
            modifier = Modifier.preferredFrameRate(FrameRateCategory.High),
        )
    }
}
```

| Parameters |
|---|---|
| `frameRateCategory: https://developer.android.com/reference/kotlin/androidx/compose/ui/FrameRateCategory` | The preferred frame rate category the content should be rendered at. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.preferredFrameRate

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/FrameRate.kt+function:preferredFrameRate)

```
fun Modifier.preferredFrameRate(
    frameRate: @FloatRange(from = 0.0, to = 360.0) Float
): Modifier
```

Set a requested frame rate on Composable

You can set the preferred frame rate (frames per second) for a Composable using a non-negative number. This API should only be used when a specific frame rate is needed for your Composable. For example, 24 or 30 for video play.

If multiple frame rates are requested, they will be aggregated to determine a feasible frame rate.

If you no longer want this modifier to influence the frame rate, clear the preference by setting it to 0.

Keep in mind that the preferred frame rate affects the frame rate for the next frame, so use this method carefully. It's important to note that the preference is valid as long as the Composable is drawn.

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.Text
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.preferredFrameRate
import androidx.compose.ui.unit.dp

var targetAlpha by remember { mutableFloatStateOf(1f) }
val context = LocalContext.current
val activity: Activity? = findOwner(context)
DisposableEffect(activity) {
    activity?.window?.frameRateBoostOnTouchEnabled = false
    onDispose { activity?.window?.frameRateBoostOnTouchEnabled = true }
}

val alpha by
    animateFloatAsState(targetValue = targetAlpha, animationSpec = tween(durationMillis = 5000))

Column(modifier = Modifier.size(300.dp)) {
    Button(
        onClick = { targetAlpha = if (targetAlpha == 1f) 0.2f else 1f },
        modifier =
            Modifier.testTag("frameRateTag")
                .background(LocalContentColor.current.copy(alpha = alpha)),
    ) {
        Text(
            text = "Click Me for alpha change with 30 Hz frame rate",
            color = LocalContentColor.current.copy(alpha = alpha), // Adjust text alpha
            modifier = Modifier.preferredFrameRate(30f),
        )
    }
}
```

| Parameters |
|---|---|
| `frameRate: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 360.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The preferred frame rate the content should be rendered at. Default value is 0. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.graphicsLayer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/graphics/GraphicsLayerModifier.kt+function:graphicsLayer)

```
fun Modifier.graphicsLayer(block: GraphicsLayerScope.() -> Unit): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)` should be used when the content updates independently from anything above it to minimize the invalidated content.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)` can be used to apply effects to content, such as scaling, rotation, opacity, shadow, and clipping. Prefer this version when you have layer properties backed by a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` or an animated value as reading a state inside `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)` will only cause the layer properties update without triggering recomposition and relayout.

NOTE: `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)` can be invoked multiple times, which is why it's important for performance to minimize work done inside of it. `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)` may also be invoked before effects.

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer

val animatedAlpha = remember { Animatable(0f) }
Text(
    "Hello World",
    Modifier.graphicsLayer {
        alpha = animatedAlpha.value
        clip = true
    },
)
LaunchedEffect(animatedAlpha) { animatedAlpha.animateTo(1f) }
```

| Parameters |
|---|---|
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | block on `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope` where you define the layer properties. |

### Modifier.graphicsLayer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/graphics/GraphicsLayerModifier.kt+function:graphicsLayer)

```
fun Modifier.graphicsLayer(
    scaleX: Float = 1.0f,
    scaleY: Float = 1.0f,
    alpha: Float = 1.0f,
    translationX: Float = 0.0f,
    translationY: Float = 0.0f,
    shadowElevation: Float = 0.0f,
    rotationX: Float = 0.0f,
    rotationY: Float = 0.0f,
    rotationZ: Float = 0.0f,
    cameraDistance: Float = DefaultCameraDistance,
    transformOrigin: TransformOrigin = TransformOrigin.Center,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    renderEffect: RenderEffect? = null,
    ambientShadowColor: Color = DefaultShadowColor,
    spotShadowColor: Color = DefaultShadowColor,
    compositingStrategy: CompositingStrategy = CompositingStrategy.Auto,
    blendMode: BlendMode = BlendMode.SrcOver,
    colorFilter: ColorFilter? = null,
    outsets: LayerOutsets = LayerOutsets.Zero
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` should be used when the content updates independently from anything above it to minimize the invalidated content.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` can also be used to apply effects to content, such as scaling (`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`), rotation (`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`), opacity (`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`), shadow (`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`), clipping (`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`), as well as altering the result of the layer with `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/RenderEffect`. Shadow color and ambient colors can be modified by configuring the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` respectively.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy` determines whether or not the contents of this layer are rendered into an offscreen buffer. This is useful in order to optimize alpha usages with `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy#ModulateAlpha()` which will skip the overhead of an offscreen buffer but can generate different rendering results depending on whether or not the contents of the layer are overlapping. Similarly leveraging `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy#Offscreen()` is useful in situations where creating an offscreen buffer is preferred usually in conjunction with `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode` usage.

Note that if you provide a non-zero `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` and if the passed `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` is concave the shadow will not be drawn on Android versions less than 10.

Also note that alpha values less than 1.0f will have their contents implicitly clipped to their bounds unless `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy#ModulateAlpha()` is specified or layer outsets are provided. This is because an intermediate compositing layer is created to render contents into first before being drawn into the destination with the desired alpha. This layer is sized to the bounds of the composable this modifier is configured on, and contents outside of these bounds are omitted. To avoid this implicit clipping, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/LayerOutsets` can be used to increase the size of this layer further from the composable's size. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin` will all still be based on the original size i.e. the bounds of the composable.

If the layer parameters are backed by a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` or an animated value prefer an overload with a lambda block on `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope` as reading a state inside the block will only cause the layer properties update without triggering recomposition and relayout.

```kotlin
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer

Text("Hello World", Modifier.graphicsLayer(alpha = 0.5f, clip = true))
```

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

Canvas(
    modifier =
        Modifier.size(100.dp)
            .background(Color.Black)
            .graphicsLayer(
                alpha = 0.5f,
                compositingStrategy = CompositingStrategy.ModulateAlpha,
            )
) {
    // Configuring an alpha less than 1.0 and specifying
    // CompositingStrategy.ModulateAlpha ends up with the overlapping region
    // of the 2 draw rect calls to blend transparent blue and transparent red
    // against the black background instead of just transparent blue which is what would
    // occur with CompositingStrategy.Auto or CompositingStrategy.Offscreen
    inset(0f, 0f, size.width / 3, size.height / 3) { drawRect(color = Color.Red) }
    inset(size.width / 3, size.height / 3, 0f, 0f) { drawRect(color = Color.Blue) }
}
```

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.LayerOutsets
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp).graphicsLayer(alpha = 0.5f, outsets = LayerOutsets(100.dp))) {
    // Configuring an alpha less than 1.0 has promoted the layer to an offscreen buffer thus
    // implicitly clipping
    // the layer to its bounds. The inner box draws a Rect which extends beyond the layout
    // bounds of the outer
    // box. LayerOutsets are provided to the layer that is promoted to the offscreen buffer to
    // extend its visual bounds
    // to avoid clipping the content drawn by its children.
    Box(
        Modifier.fillMaxSize().drawBehind {
            drawRect(
                topLeft = Offset(100f, 100f),
                brush = SolidColor(Color.Red),
                size = Size(800f, 500f),
            )
        }
    )
}
```

| Parameters |
|---|---|
| `scaleX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#scaleX()` |
| `scaleY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#scaleY()` |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#alpha()` |
| `translationX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#translationX()` |
| `translationY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#translationY()` |
| `shadowElevation: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#shadowElevation()` |
| `rotationX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#rotationX()` |
| `rotationY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#rotationY()` |
| `rotationZ: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#rotationZ()` |
| `cameraDistance: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = DefaultCameraDistance` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#cameraDistance()` |
| `transformOrigin: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/TransformOrigin = TransformOrigin.Center` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#transformOrigin()` |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#shape()` |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#clip()` |
| `renderEffect: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/RenderEffect? = null` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#renderEffect()` |
| `ambientShadowColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DefaultShadowColor` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#ambientShadowColor()` |
| `spotShadowColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DefaultShadowColor` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#spotShadowColor()` |
| `compositingStrategy: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/CompositingStrategy = CompositingStrategy.Auto` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#compositingStrategy()` |
| `blendMode: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode = BlendMode.SrcOver` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#blendMode()` |
| `colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? = null` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#colorFilter()` |
| `outsets: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/LayerOutsets = LayerOutsets.Zero` | see `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope#outsets()` |

### Modifier.toolingGraphicsLayer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/graphics/GraphicsLayerModifier.kt+function:toolingGraphicsLayer)

```
fun Modifier.toolingGraphicsLayer(): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that adds a draw layer such that tooling can identify an element in the drawn image.

### Modifier.handwritingDetector

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/text/handwriting/HandwritingDetector.android.kt+function:handwritingDetector)

```
fun Modifier.handwritingDetector(callback: () -> Unit): Modifier
```

Configures an element to act as a handwriting detector which detects stylus handwriting and delegates handling of the recognised text to another element.

Stylus movement on the element will start a handwriting session, and trigger the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/package-summary#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)`. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/package-summary#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)` implementation is expected to show and focus a text input field with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/handwritingHandler.modifier#(androidx.compose.ui.Modifier).handwritingHandler()` modifier which can handle the recognized text from the handwriting session.

A common use case is a component which looks like a text input field but does not actually support text input itself, and clicking on this fake text input field causes a real text input field to be shown. To support handwriting initiation in this case, this modifier can be applied to the fake text input field to configure it as a detector, and a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/handwritingHandler.modifier#(androidx.compose.ui.Modifier).handwritingHandler()` modifier can be applied to the real text input field. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/package-summary#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)` implementation is typically the same as the `onClick` implementation for the fake text field's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` modifier, which shows and focuses the real text input field.

This function returns a no-op modifier on API levels below Android U (34) as stylus handwriting is not supported.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.handwriting.handwritingDetector
import androidx.compose.foundation.text.handwriting.handwritingHandler
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog

var openDialog by remember { mutableStateOf(false) }
val focusRequester = remember { FocusRequester() }

Column(
    Modifier.imePadding().requiredWidth(300.dp).verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text(
        "This is not an actual text field, but it is a handwriting detector so you can use " +
            "a stylus to write here."
    )
    Spacer(Modifier.size(16.dp))
    Text(
        "Fake text field",
        Modifier.fillMaxWidth()
            .handwritingDetector { openDialog = !openDialog }
            .padding(4.dp)
            .padding(16.dp),
    )
}

if (openDialog) {
    Dialog(onDismissRequest = { openDialog = false }) {
        Card(modifier = Modifier.width(300.dp), shape = RoundedCornerShape(16.dp)) {
            Column(
                modifier = Modifier.padding(24.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text("This text field is a handwriting handler.")
                Spacer(Modifier.size(16.dp))
                val state = remember { TextFieldState() }
                BasicTextField(
                    state = state,
                    modifier =
                        Modifier.fillMaxWidth()
                            .focusRequester(focusRequester)
                            .handwritingHandler(),
                    decorator = { innerTextField ->
                        Box(Modifier.padding(4.dp).padding(16.dp)) { innerTextField() }
                    },
                )
            }
        }

        val windowInfo = LocalWindowInfo.current
        LaunchedEffect(windowInfo) {
            snapshotFlow { windowInfo.isWindowFocused }
                .collect { isWindowFocused ->
                    if (isWindowFocused) {
                        focusRequester.requestFocus()
                    }
                }
        }
    }
}
```

| Parameters |
|---|---|
| `callback: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | a callback which will be triggered when stylus handwriting is detected |

### Modifier.handwritingHandler

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/text/handwriting/HandwritingHandler.android.kt+function:handwritingHandler)

```
fun Modifier.handwritingHandler(): Modifier
```

Configures an element to act as a stylus handwriting handler which can handle text input from a handwriting session which was triggered by stylus handwriting on a handwriting detector.

When this element gains focus, if there is an ongoing stylus handwriting delegation which was triggered by stylus handwriting on a handwriting detector, this element will receive text input from the handwriting session via its input connection.

A common use case is a component which looks like a text input field but does not actually support text input itself, and clicking on this fake text input field causes a real text input field to be shown. To support handwriting initiation in this case, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/handwritingDetector.modifier#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)` modifier can be applied to the fake text input field to configure it as a detector, and this modifier can be applied to the real text input field. The `callback` implementation for the fake text field's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/handwriting/handwritingDetector.modifier#(androidx.compose.ui.Modifier).handwritingDetector(kotlin.Function0)` modifier is typically the same as the `onClick` implementation its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` modifier, which shows and focuses the real text input field.

This function returns a no-op modifier on API levels below Android U (34) as stylus handwriting is not supported.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.handwriting.handwritingDetector
import androidx.compose.foundation.text.handwriting.handwritingHandler
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog

var openDialog by remember { mutableStateOf(false) }
val focusRequester = remember { FocusRequester() }

Column(
    Modifier.imePadding().requiredWidth(300.dp).verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text(
        "This is not an actual text field, but it is a handwriting detector so you can use " +
            "a stylus to write here."
    )
    Spacer(Modifier.size(16.dp))
    Text(
        "Fake text field",
        Modifier.fillMaxWidth()
            .handwritingDetector { openDialog = !openDialog }
            .padding(4.dp)
            .padding(16.dp),
    )
}

if (openDialog) {
    Dialog(onDismissRequest = { openDialog = false }) {
        Card(modifier = Modifier.width(300.dp), shape = RoundedCornerShape(16.dp)) {
            Column(
                modifier = Modifier.padding(24.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text("This text field is a handwriting handler.")
                Spacer(Modifier.size(16.dp))
                val state = remember { TextFieldState() }
                BasicTextField(
                    state = state,
                    modifier =
                        Modifier.fillMaxWidth()
                            .focusRequester(focusRequester)
                            .handwritingHandler(),
                    decorator = { innerTextField ->
                        Box(Modifier.padding(4.dp).padding(16.dp)) { innerTextField() }
                    },
                )
            }
        }

        val windowInfo = LocalWindowInfo.current
        LaunchedEffect(windowInfo) {
            snapshotFlow { windowInfo.isWindowFocused }
                .collect { isWindowFocused ->
                    if (isWindowFocused) {
                        focusRequester.requestFocus()
                    }
                }
        }
    }
}
```

### Modifier.hierarchicalFocusGroup

android Artifact: [androidx.wear.compose:compose-foundation](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/foundation/HierarchicalFocus.kt+function:hierarchicalFocusGroup)

```
fun Modifier.hierarchicalFocusGroup(active: Boolean): Modifier
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` is used to annotate composables in an application, so we can keep track of what is the active part of the composition. In turn, this is used to coordinate focus in a declarative way, requesting focus when needed, as the user navigates through the app (such as between screens or between pages within a screen). In most cases, this is automatically handled by Wear Compose components and no action is necessary. In particular this is done by `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` and PickerGroup. This modifier is useful if you implement a custom component that needs to direct focus to one of several children, like a custom Pager, a Tabbed layout, etc.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`s can be nested to form a focus tree, with an implicit root. For sibling `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`s, only one should have active = true. Within the focus tree, components that need to request focus can do so using `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()`. Note that ScalingLazyColumn and TransformingLazyColumn are using it already, so there is no need to add it explicitly.

When focus changes, the focus tree is examined and the topmost (closest to the root of the tree) `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` which has all its `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` ancestors with active = true will request focus. If no such `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` exists, the focus will be cleared.

NOTE: This shouldn't be used together with `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#requestFocus(androidx.compose.ui.focus.FocusDirection)` calls in `https://developer.android.com/reference/kotlin/androidx/compose/runtime/LaunchedEffect.composable#LaunchedEffect(kotlin.coroutines.SuspendFunction1)`.

Example usage:

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.hierarchicalFocusGroup
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive

var selected by remember { mutableIntStateOf(0) }

Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
    repeat(5) { colIx ->
        Box(
            Modifier.hierarchicalFocusGroup(active = selected == colIx)
                .weight(1f)
                .clickable { selected = colIx }
                .then(
                    if (selected == colIx) {
                        Modifier.border(BorderStroke(2.dp, Color.Red))
                    } else {
                        Modifier
                    }
                )
        ) {
            // This is used to add a Gray background to the currently focused item, as seen by
            // the focus system.
            var focused by remember { mutableStateOf(false) }

            BasicText(
                "$colIx",
                style =
                    TextStyle(
                        color = Color.White,
                        fontSize = 20.sp,
                        textAlign = TextAlign.Center,
                    ),
                modifier =
                    Modifier.fillMaxWidth()
                        .requestFocusOnHierarchyActive()
                        .onFocusChanged { focused = it.isFocused }
                        .focusable()
                        .then(
                            if (focused) {
                                Modifier.background(Color.Gray)
                            } else {
                                Modifier
                            }
                        ),
            )
        }
    }
}
```

Sample using nested `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`:

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.hierarchicalFocusGroup
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive

Column(Modifier.fillMaxSize()) {
    var selectedRow by remember { mutableIntStateOf(0) }
    repeat(2) { rowIx ->
        Row(
            Modifier.weight(1f)
                .fillMaxWidth()
                .hierarchicalFocusGroup(active = selectedRow == rowIx)
        ) {
            var selectedItem by remember { mutableIntStateOf(0) }
            repeat(2) { itemIx ->
                Box(
                    Modifier.weight(1f).hierarchicalFocusGroup(active = selectedItem == itemIx)
                ) {
                    // ScalingLazyColumn uses requestFocusOnHierarchyActive internally
                    ScalingLazyColumn(
                        Modifier.fillMaxWidth().clickable {
                            selectedRow = rowIx
                            selectedItem = itemIx
                        }
                    ) {
                        val prefix = (rowIx * 2 + itemIx + 'A'.code).toChar()
                        items(20) {
                            BasicText(
                                "$prefix $it",
                                style =
                                    TextStyle(
                                        color = Color.White,
                                        fontSize = 20.sp,
                                        textAlign = TextAlign.Center,
                                    ),
                            )
                        }
                    }
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `active: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Pass true when this sub tree of the focus tree is active and may require the focus - otherwise, pass false. For example, a pager can apply this modifier to each page's content with a call to `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`, marking only the current page as active. |

### Modifier.requestFocusOnHierarchyActive

android Artifact: [androidx.wear.compose:compose-foundation](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/foundation/HierarchicalFocus.kt+function:requestFocusOnHierarchyActive)

```
fun Modifier.requestFocusOnHierarchyActive(): Modifier
```

This Modifier is used in conjunction with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain). The focusable element is usually a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/rotaryScrollable.modifier#(androidx.compose.ui.Modifier).rotaryScrollable(androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.ui.focus.FocusRequester,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect)` (or, in some rarer cases a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()`)

Multiple `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` Modifiers shouldn't be siblings, in those cases they need to surround each with a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`, and at most one of them should have active = true, to inform which `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` should get the focus.

NOTE: This shouldn't be used together with `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#requestFocus(androidx.compose.ui.focus.FocusDirection)` calls in `https://developer.android.com/reference/kotlin/androidx/compose/runtime/LaunchedEffect.composable#LaunchedEffect(kotlin.coroutines.SuspendFunction1)`.

Example usage:

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.hierarchicalFocusGroup
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive

var selected by remember { mutableIntStateOf(0) }

Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
    repeat(5) { colIx ->
        Box(
            Modifier.hierarchicalFocusGroup(active = selected == colIx)
                .weight(1f)
                .clickable { selected = colIx }
                .then(
                    if (selected == colIx) {
                        Modifier.border(BorderStroke(2.dp, Color.Red))
                    } else {
                        Modifier
                    }
                )
        ) {
            // This is used to add a Gray background to the currently focused item, as seen by
            // the focus system.
            var focused by remember { mutableStateOf(false) }

            BasicText(
                "$colIx",
                style =
                    TextStyle(
                        color = Color.White,
                        fontSize = 20.sp,
                        textAlign = TextAlign.Center,
                    ),
                modifier =
                    Modifier.fillMaxWidth()
                        .requestFocusOnHierarchyActive()
                        .onFocusChanged { focused = it.isFocused }
                        .focusable()
                        .then(
                            if (focused) {
                                Modifier.background(Color.Gray)
                            } else {
                                Modifier
                            }
                        ),
            )
        }
    }
}
```

### Modifier.hoverable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Hoverable.kt+function:hoverable)

```
fun Modifier.hoverable(
    interactionSource: MutableInteractionSource,
    enabled: Boolean = true
): Modifier
```

Configure component to be hoverable via pointer enter/exit events.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// MutableInteractionSource to track changes of the component's interactions (like "hovered")
val interactionSource = remember { MutableInteractionSource() }
val isHovered by interactionSource.collectIsHoveredAsState()

// the color will change depending on the presence of a hover
Box(
    modifier =
        Modifier.size(128.dp)
            .background(if (isHovered) Color.Red else Color.Blue)
            .hoverable(interactionSource = interactionSource),
    contentAlignment = Alignment.Center,
) {
    Text(if (isHovered) "Hovered" else "Unhovered")
}
```

| Parameters |
|---|---|
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/HoverInteraction.Enter` when this element is being hovered. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state. When `false`, hover events will be ignored. |

### Modifier.indication

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Indication.kt+function:indication)

```
fun Modifier.indication(
    interactionSource: InteractionSource,
    indication: Indication?
): Modifier
```

Draws visual effects for this component when interactions occur.

```kotlin
import androidx.compose.foundation.LocalIndication
import androidx.compose.foundation.clickable
import androidx.compose.foundation.indication
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val interactionSource = remember { MutableInteractionSource() }
Column {
    Text(
        text = "Click me and my neighbour will indicate as well!",
        modifier =
            Modifier
                // clickable will dispatch events using MutableInteractionSource
                .clickable(
                    interactionSource = interactionSource,
                    indication = LocalIndication.current,
                ) {
                    /** do something */
                }
                .padding(10.dp),
    )
    Spacer(Modifier.requiredHeight(10.dp))
    Text(
        text = "I'm neighbour and I indicate when you click the other one",
        modifier =
            Modifier
                // this element doesn't have a click, but will show default indication from the
                // CompositionLocal as it accepts the same MutableInteractionSource
                .indication(interactionSource, LocalIndication.current)
                .padding(10.dp),
    )
}
```

| Parameters |
|---|---|
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` that will be used by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` to draw visual effects - this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` represents the stream of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this component. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` used to draw visual effects. If `null`, no visual effects will be shown for this component. |

### Modifier.onIndirectPointerGesture

android Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/IndirectPointerGesture.kt+function:onIndirectPointerGesture)

```
fun Modifier.onIndirectPointerGesture(
    enabled: Boolean = true,
    onSwipeForward: (() -> Unit)? = null,
    onSwipeBackward: (() -> Unit)? = null,
    onClick: (() -> Unit)? = null
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that detects high-level click and horizontal swipe gestures from an `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/indirect/IndirectPointerEvent` source. The component (or one of its descendants) using this modifier **must be focused** to intercept events.

This modifier allows optionality for swipe gesture callbacks. If a specific swipe gesture callback is `null`, the corresponding swipe events will not be consumed by this modifier. For example:

- When nesting `onIndirectPointerGesture` modifiers, if the inner modifier provides an `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` callback but leaves `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` as `null`, the outer modifier can still detect and handle the forward swipe, and vice versa.

Note that the initial `down` event is always consumed by this modifier (if not already consumed) as long as at least one callback (`https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`, `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`, or `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).onIndirectPointerGesture(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`) is provided.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusTarget
import androidx.xr.glimmer.onIndirectPointerGesture

Box(
    modifier =
        Modifier.fillMaxSize()
            .onIndirectPointerGesture(
                enabled = true,
                onSwipeForward = { /* onSwipeForward */ },
                onSwipeBackward = { /* onSwipeBackward */ },
                onClick = { /* onClick */ },
            )
            .focusTarget()
) {
    // App()
}
```

| Parameters |
|---|---|
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls whether gesture detection is active. When `false`, this modifier has no effect and no callbacks will be invoked. |
| `onSwipeForward: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Invoked when a successful forward swipe is detected. |
| `onSwipeBackward: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Invoked when a successful backward swipe is detected. |
| `onClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Invoked when a successful click is detected. |

### Modifier.inspectable

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/platform/InspectableValue.kt+function:inspectable)

```
inline fun Modifier.[inspectable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).inspectable(kotlin.Function1,kotlin.Function1))(
    noinline inspectorInfo: InspectorInfo.() -> Unit,
    factory: Modifier.() -> Modifier
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> This API will create more invalidations of your modifier than necessary, so it's use is discouraged. Implementing the inspectableProperties method on ModifierNodeElement is the recommended zero-cost alternative to exposing properties on a Modifier to tooling.

Use this to group a common set of modifiers and provide `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/InspectorInfo` for the resulting modifier.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.platform.inspectable
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

/** Sample with a single parameter */
fun Modifier.simpleFrame(color: Color) =
    inspectable(
        inspectorInfo =
            debugInspectorInfo {
                name = "simpleFrame"
                value = color
            }
    ) {
        background(color, RoundedCornerShape(5.0.dp))
    }

/** Sample with multiple parameters */
fun Modifier.fancyFrame(size: Dp, color: Color) =
    inspectable(
        inspectorInfo =
            debugInspectorInfo {
                name = "fancyFrame"
                properties["size"] = size
                properties["color"] = color
            }
    ) {
        background(color, RoundedCornerShape(size))
    }
```

### Modifier.minimumInteractiveComponentSize

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/InteractiveComponentSize.kt+function:minimumInteractiveComponentSize)

```
fun Modifier.minimumInteractiveComponentSize(): Modifier
```

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

https://m2.material.io/design/usability/accessibility.html#layout-and-typography

This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size. The minimum clickable / touch target size (48.dp by default) is controlled by the system via `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ViewConfiguration` and automatically expanded at the touch input layer.

This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.

Because layout constraints are affected by modifier order, for this modifier to take effect, it must come before any size modifiers on the element that might limit its constraints.

### Modifier.minimumInteractiveComponentSize

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/InteractiveComponentSize.kt+function:minimumInteractiveComponentSize)

```
fun Modifier.minimumInteractiveComponentSize(): Modifier
```

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

[Target sizes](https://m3.material.io/foundations/designing/structure#dab862b1-e042-4c40-b680-b484b9f077f6)

This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size. The minimum clickable / touch target size (48.dp by default) is controlled by the system via `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ViewConfiguration` and automatically expanded at the touch input layer.

This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.

Because layout constraints are affected by modifier order, for this modifier to take effect, it must come before any size modifiers on the element that might limit its constraints.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun Widget(color: Color, modifier: Modifier = Modifier) {
    // Default size is 24.dp, which is smaller than the recommended touch target
    Box(modifier.size(24.dp).background(color))
}

Column(Modifier.border(1.dp, Color.Black)) {
    // Not interactable, no need for touch target enforcement
    Widget(Color.Red)

    Widget(
        color = Color.Green,
        modifier =
            Modifier.clickable { /* do something */ }
                // Component is now interactable, so it should enforce a sufficient touch target
                .minimumInteractiveComponentSize(),
    )

    Widget(
        color = Color.Blue,
        modifier =
            Modifier.clickable { /* do something */ }
                // Component is now interactable, so it should enforce a sufficient touch target
                .minimumInteractiveComponentSize()
                // Any size modifiers should come after `minimumInteractiveComponentSize`
                // so as not to interfere with layout expansion
                .size(36.dp),
    )
}
```

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

var checked by remember { mutableStateOf(false) }

// The entire row accepts interactions to toggle the checkbox,
// so we apply `minimumInteractiveComponentSize`
Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier =
        Modifier.toggleable(
                value = checked,
                onValueChange = { checked = it },
                role = Role.Checkbox,
            )
            .minimumInteractiveComponentSize(),
) {
    // Cannot rely on Checkbox for touch target expansion because it only enforces
    // `minimumInteractiveComponentSize` if onCheckedChange is non-null
    Checkbox(checked = checked, onCheckedChange = null)
    Spacer(Modifier.width(8.dp))
    Text("Label for checkbox")
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LocalMinimumInteractiveComponentSize()` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#MinimumInteractiveTopAlignmentLine()` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#MinimumInteractiveLeftAlignmentLine()` |   |

### Modifier.minimumInteractiveComponentSize

android Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/InteractiveComponentSize.kt+function:minimumInteractiveComponentSize)

```
fun Modifier.minimumInteractiveComponentSize(): Modifier
```

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

https://m3.material.io/foundations/accessible-design/accessibility-basics#28032e45-c598-450c-b355-f9fe737b1cd8

This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size.

This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.

### Modifier.height

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Intrinsic.kt+function:height)

```
fun Modifier.height(intrinsicSize: IntrinsicSize): Modifier
```

Declare the preferred height of the content to be the same as the min or max intrinsic height of the content. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` for other options of sizing to intrinsic width. Also see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for other options to set the preferred height.

Example usage for min intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Builds a layout containing two pieces of text separated by a divider, where the divider
// is sized according to the height of the longest text.
//
// Here height min intrinsic is adding a height premeasurement pass for the Row,
// whose minimum intrinsic height will correspond to the height of the largest Text. Then
// height min intrinsic will measure the Row with tight height, the same as the
// premeasured minimum intrinsic height, which due to fillMaxHeight will force the Texts and
// the divider to use the same height.
Box {
    Row(Modifier.height(IntrinsicSize.Min)) {
        Text(
            text = "This is a really short text",
            modifier = Modifier.weight(1f).fillMaxHeight(),
        )
        Box(Modifier.width(1.dp).fillMaxHeight().background(Color.Black))
        Text(
            text =
                "This is a much much much much much much much much much much" +
                    " much much much much much much longer text",
            modifier = Modifier.weight(1f).fillMaxHeight(),
        )
    }
}
```

Example usage for max intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Builds a layout containing two aspectRatios separated by a divider, where the divider
// is sized according to the height of the taller aspectRatio.
//
// Here height max intrinsic is adding a height premeasurement pass for the
// Row, whose maximum intrinsic height will correspond to the height of the taller
// aspectRatio. Then height max intrinsic will measure the Row with tight height,
// the same as the premeasured maximum intrinsic height, which due to fillMaxHeight modifier
// will force the aspectRatios and the divider to use the same height.
//
Box {
    Row(Modifier.height(IntrinsicSize.Max)) {
        val modifier = Modifier.fillMaxHeight().weight(1f)
        Box(modifier.aspectRatio(2f).background(Color.Gray))
        Box(Modifier.width(1.dp).fillMaxHeight().background(Color.Black))
        Box(modifier.aspectRatio(1f).background(Color.Blue))
    }
}
```

### Modifier.requiredHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Intrinsic.kt+function:requiredHeight)

```
fun Modifier.requiredHeight(intrinsicSize: IntrinsicSize): Modifier
```

Declare the height of the content to be exactly the same as the min or max intrinsic height of the content. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content intrinsic height does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` for options of sizing to intrinsic width. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for options to set the preferred height. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredHeight.modifier#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredHeightIn.modifier#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for other options to set the required height.

### Modifier.requiredWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Intrinsic.kt+function:requiredWidth)

```
fun Modifier.requiredWidth(intrinsicSize: IntrinsicSize): Modifier
```

Declare the width of the content to be exactly the same as the min or max intrinsic width of the content. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content intrinsic width does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` for options of sizing to intrinsic height. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for options to set the preferred width. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredWidth.modifier#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredWidthIn.modifier#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for other options to set the required width.

### Modifier.width

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Intrinsic.kt+function:width)

```
fun Modifier.width(intrinsicSize: IntrinsicSize): Modifier
```

Declare the preferred width of the content to be the same as the min or max intrinsic width of the content. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` for options of sizing to intrinsic height. Also see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for other options to set the preferred width.

Example usage for min intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Builds a layout containing three Box having the same width as the widest one.
//
// Here width min intrinsic is adding a width premeasurement pass for the
// Column, whose minimum intrinsic width will correspond to the preferred width of the largest
// Box. Then width min intrinsic will measure the Column with tight width, the
// same as the premeasured minimum intrinsic width, which due to fillMaxWidth will force
// the Box's to use the same width.
Box {
    Column(Modifier.width(IntrinsicSize.Min).fillMaxHeight()) {
        Box(modifier = Modifier.fillMaxWidth().size(20.dp, 10.dp).background(Color.Gray))
        Box(modifier = Modifier.fillMaxWidth().size(30.dp, 10.dp).background(Color.Blue))
        Box(modifier = Modifier.fillMaxWidth().size(10.dp, 10.dp).background(Color.Magenta))
    }
}
```

Example usage for max intrinsic:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

// Builds a layout containing three Text boxes having the same width as the widest one.
//
// Here width max intrinsic is adding a width premeasurement pass for the Column,
// whose maximum intrinsic width will correspond to the preferred width of the largest
// Box. Then width max intrinsic will measure the Column with tight width, the
// same as the premeasured maximum intrinsic width, which due to fillMaxWidth modifiers will
// force the Boxs to use the same width.

Box {
    Column(Modifier.width(IntrinsicSize.Max).fillMaxHeight()) {
        Box(Modifier.fillMaxWidth().background(Color.Gray)) { Text("Short text") }
        Box(Modifier.fillMaxWidth().background(Color.Blue)) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth().background(Color.Magenta)) { Text("Medium length text") }
    }
}
```

### Modifier.keepScreenOn

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/KeepScreenOn.kt+function:keepScreenOn)

```
fun Modifier.keepScreenOn(): Modifier
```

A modifier that keeps the device screen on as long as it is part of the composition on supported platforms.

This is useful for scenarios where the user might not be interacting with the screen frequently but the content needs to remain visible, such as during video playback.

### Modifier.onKeyEvent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/key/KeyInputModifier.kt+function:onKeyEvent)

```
fun Modifier.onKeyEvent(onKeyEvent: (KeyEvent) -> Boolean): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events when it (or one of its children) is focused.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.onPreviewKeyEvent

// When the inner Box is focused, and the user presses a key, the key goes down the hierarchy
// and then back up to the parent. At any stage you can stop the propagation by returning
// true to indicate that you consumed the event.
Box(Modifier.onPreviewKeyEvent { keyEvent1 -> false }.onKeyEvent { keyEvent4 -> false }) {
    Box(
        Modifier.onPreviewKeyEvent { keyEvent2 -> false }
            .onKeyEvent { keyEvent3 -> false }
            .focusable()
    )
}
```

| Parameters |
|---|---|
| `onKeyEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/onKeyEvent.modifier#(androidx.compose.ui.Modifier).onKeyEvent(kotlin.Function1)`'s parent. |

### Modifier.onPreviewKeyEvent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/key/KeyInputModifier.kt+function:onPreviewKeyEvent)

```
fun Modifier.onPreviewKeyEvent(onPreviewKeyEvent: (KeyEvent) -> Boolean): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events when it (or one of its children) is focused.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.onPreviewKeyEvent

// When the inner Box is focused, and the user presses a key, the key goes down the hierarchy
// and then back up to the parent. At any stage you can stop the propagation by returning
// true to indicate that you consumed the event.
Box(Modifier.onPreviewKeyEvent { keyEvent1 -> false }.onKeyEvent { keyEvent4 -> false }) {
    Box(
        Modifier.onPreviewKeyEvent { keyEvent2 -> false }
            .onKeyEvent { keyEvent3 -> false }
            .focusable()
    )
}
```

| Parameters |
|---|---|
| `onPreviewKeyEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent`. Return true to stop propagation of this event. If you return false, the key event will be sent to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/onPreviewKeyEvent.modifier#(androidx.compose.ui.Modifier).onPreviewKeyEvent(kotlin.Function1)`'s child. If none of the children consume the event, it will be sent back up to the root `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyInputModifierNode` using the onKeyEvent callback. |

### Modifier.layoutBounds

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/LayoutBoundsHolder.kt+function:layoutBounds)

```
fun Modifier.layoutBounds(holder: LayoutBoundsHolder): Modifier
```

This will map the `https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds` of the modifier into the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder`. A given instance of `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder` should not be passed into more than one of these modifiers.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` |   |

### Modifier.layoutId

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/LayoutId.kt+function:layoutId)

```
fun Modifier.layoutId(layoutId: Any): Modifier
```

Tag the element with `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutId.modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)` to identify the element within its parent.

Example usage:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.Constraints

Layout({
    // Here the Containers are only needed to apply the modifiers. You could use the
    // modifier on header and footer directly if they are composables accepting modifiers.
    Box(Modifier.layoutId("header")) { header() }
    Box(Modifier.layoutId("footer")) { footer() }
}) { measurables, constraints ->
    val placeables = measurables.map { measurable ->
        when (measurable.layoutId) {
            // You should use appropriate constraints. Here we measure fake constraints.
            "header" -> measurable.measure(Constraints.fixed(100, 100))
            "footer" -> measurable.measure(constraints)
            else -> error("Unexpected tag")
        }
    }
    // Size should be derived from children measured sizes on placeables,
    // but this is simplified for the purposes of the example.
    layout(100, 100) { placeables.forEach { it.placeRelative(0, 0) } }
}
```

### Modifier.layout

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/LayoutModifier.kt+function:layout)

```
fun Modifier.layout(measure: MeasureScope.(Measurable, Constraints) -> MeasureResult): Modifier
```

Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` that allows changing how the wrapped element is measured and laid out.

This is a convenience API of creating a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` modifier, without having to create a class or an object that implements the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` interface. The intrinsic measurements follow the default logic provided by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.offset

Box(
    Modifier.background(Color.Gray).layout { measurable, constraints ->
        // an example modifier that adds 50 pixels of vertical padding.
        val padding = 50
        val placeable = measurable.measure(constraints.offset(vertical = -padding))
        layout(placeable.width, placeable.height + padding) {
            placeable.placeRelative(0, padding)
        }
    }
) {
    Box(Modifier.fillMaxSize().background(Color.DarkGray))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` |   |

### Modifier.approachLayout

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/LookaheadScope.kt+function:approachLayout)

```
fun Modifier.approachLayout(
    isMeasurementApproachInProgress: (lookaheadSize: IntSize) -> Boolean,
    isPlacementApproachInProgress: Placeable.PlacementScope.(lookaheadCoordinates: LayoutCoordinates) -> Boolean = defaultPlacementApproachInProgress,
    approachMeasure: ApproachMeasureScope.(measurable: Measurable, constraints: Constraints) -> MeasureResult
): Modifier
```

Creates an approach layout intended to help gradually approach the destination layout calculated in the lookahead pass. This can be particularly helpful when the destination layout is anticipated to change drastically and would consequently result in visual disruptions.

In order to create a smooth approach, an interpolation (often through animations) can be used in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` to interpolate the measurement or placement from a previously recorded size and/or position to the destination/target size and/or position. The destination size is available in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachMeasureScope` as `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachIntrinsicMeasureScope#lookaheadSize()`. And the target position can also be acquired in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachMeasureScope` during placement by using `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)` with the layout's `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Placeable.PlacementScope#coordinates()`. The sample code below illustrates how that can be achieved.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` signals whether the measurement is in progress of approaching destination size. It will be queried after the destination has been determined by the lookahead pass, before `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` is invoked. The lookahead size is provided to `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` for convenience in deciding whether the destination size has been reached.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` indicates whether the position is currently approaching destination defined by the lookahead, hence it's a signal to the system for whether additional approach placements are necessary. `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` will be invoked after the destination position has been determined by lookahead pass, and before the placement phase in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)`.

Once both `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` return false, the system may skip approach pass until additional approach passes are necessary as indicated by `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)`.

**IMPORTANT** : It is important to be accurate in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).approachLayout(kotlin.Function1,kotlin.Function2,kotlin.Function3)`. A prolonged indication of incomplete approach will prevent the system from potentially skipping approach pass when possible.

```kotlin
import androidx.compose.animation.core.AnimationVector2D
import androidx.compose.animation.core.DeferredTargetAnimation
import androidx.compose.animation.core.VectorConverter
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.approachLayout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Creates a custom modifier that animates the constraints and measures child with the
// animated constraints. This modifier is built on top of `Modifier.approachLayout` to approach
// th destination size determined by the lookahead pass. A resize animation will be kicked off
// whenever the lookahead size changes, to animate children from current size to destination
// size. Fixed constraints created based on the animation value will be used to measure
// child, so the child layout gradually changes its animated constraints until the approach
// completes.
fun Modifier.animateConstraints(
    sizeAnimation: DeferredTargetAnimation<IntSize, AnimationVector2D>,
    coroutineScope: CoroutineScope,
) =
    this.approachLayout(
        isMeasurementApproachInProgress = { lookaheadSize ->
            // Update the target of the size animation.
            sizeAnimation.updateTarget(lookaheadSize, coroutineScope)
            // Return true if the size animation has pending target change or hasn't finished
            // running.
            !sizeAnimation.isIdle
        }
    ) { measurable, _ ->
        // In the measurement approach, the goal is to gradually reach the destination size
        // (i.e. lookahead size). To achieve that, we use an animation to track the current
        // size, and animate to the destination size whenever it changes. Once the animation
        // finishes, the approach is complete.

        // First, update the target of the animation, and read the current animated size.
        val (width, height) = sizeAnimation.updateTarget(lookaheadSize, coroutineScope)
        // Then create fixed size constraints using the animated size
        val animatedConstraints = Constraints.fixed(width, height)
        // Measure child with animated constraints.
        val placeable = measurable.measure(animatedConstraints)
        layout(placeable.width, placeable.height) { placeable.place(0, 0) }
    }

var fullWidth by remember { mutableStateOf(false) }

// Creates a size animation with a target unknown at the time of instantiation.
val sizeAnimation = remember { DeferredTargetAnimation(IntSize.VectorConverter) }
val coroutineScope = rememberCoroutineScope()
Row(
    (if (fullWidth) Modifier.fillMaxWidth() else Modifier.width(100.dp))
        .height(200.dp)
        // Use the custom modifier created above to animate the constraints passed
        // to the child, and therefore resize children in an animation.
        .animateConstraints(sizeAnimation, coroutineScope)
        .clickable { fullWidth = !fullWidth }
) {
    Box(Modifier.weight(1f).fillMaxHeight().background(Color(0xffff6f69)))
    Box(Modifier.weight(2f).fillMaxHeight().background(Color(0xffffcc5c)))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ApproachLayoutModifierNode` |   |

### Modifier.magnifier

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Magnifier.android.kt+function:magnifier)

```
fun Modifier.magnifier(
    sourceCenter: Density.() -> Offset,
    magnifierCenter: (Density.() -> Offset)? = null,
    onSizeChanged: ((DpSize) -> Unit)? = null,
    zoom: Float = Float.NaN,
    size: DpSize = DpSize.Unspecified,
    cornerRadius: Dp = Dp.Unspecified,
    elevation: Dp = Dp.Unspecified,
    clip: Boolean = true
): Modifier
```

Shows a `https://developer.android.com/reference/android/widget/Magnifier.html` widget that shows an enlarged version of the content at `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` relative to the current layout node.

This function returns a no-op modifier on API levels below P (28), since the framework does not support the `https://developer.android.com/reference/android/widget/Magnifier.html` widget on those levels. However, even on higher API levels, not all magnifier features are supported on all platforms. Please refer to parameter explanations below to learn more about supported features on different platform versions.

This function does not allow configuration of `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setSourceBounds(int, int, int, int)` since the magnifier widget does not support constraining to the bounds of composables.

```kotlin
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.magnifier
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput

// When the magnifier center position is Unspecified, it is hidden.
// Hide the magnifier until a drag starts.
var magnifierCenter by remember { mutableStateOf(Offset.Unspecified) }

if (Build.VERSION.SDK_INT < 28) {
    Text("Magnifier is not supported on this platform.")
} else {
    Box(
        Modifier.magnifier(sourceCenter = { magnifierCenter }, zoom = 2f)
            .pointerInput(Unit) {
                detectDragGestures(
                    // Show the magnifier at the original pointer position.
                    onDragStart = { magnifierCenter = it },
                    // Make the magnifier follow the finger while dragging.
                    onDrag = { _, delta -> magnifierCenter += delta },
                    // Hide the magnifier when the finger lifts.
                    onDragEnd = { magnifierCenter = Offset.Unspecified },
                    onDragCancel = { magnifierCenter = Offset.Unspecified },
                )
            }
            .drawBehind {
                // Some concentric circles to zoom in on.
                for (diameter in 2 until size.maxDimension.toInt() step 10) {
                    drawCircle(color = Color.Black, radius = diameter / 2f, style = Stroke())
                }
            }
    )
}
```

| Parameters |
|---|---|
| `sourceCenter: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset` | The offset of the center of the magnified content. Measured in pixels from the top-left of the layout node this modifier is applied to. This offset is passed to `https://developer.android.com/reference/android/widget/Magnifier.html#show(float, float)`. |
| `magnifierCenter: (https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)? = null` | The offset of the magnifier widget itself, where the magnified content is rendered over the original content. Measured in density-independent pixels from the top-left of the layout node this modifier is applied to. If left null or returns an `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpOffset#Unspecified()` value, the magnifier widget will be placed at a default offset relative to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)`. The value of that offset is specified by the system. |
| `onSizeChanged: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional callback that will be invoked when the magnifier widget is initialized to report on its actual size. This can be useful when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` parameter is left unspecified. |
| `zoom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = Float.NaN` | See `https://developer.android.com/reference/android/widget/Magnifier.html#setZoom(float)`. Only supported on API 29+. |
| `size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize = DpSize.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setSize(int, int)`. Only supported on API 29+. |
| `cornerRadius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setCornerRadius(float)`. Only supported on API 29+. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setElevation(float)`. Only supported on API 29+. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setClippingEnabled(boolean)`. Only supported on API 29+. |

### Modifier.modifierLocalConsumer

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/modifier/ModifierLocalConsumer.kt+function:modifierLocalConsumer)

```
fun Modifier.modifierLocalConsumer(consumer: ModifierLocalReadScope.() -> Unit): Modifier
```

A Modifier that can be used to consume `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that were provided by other modifiers to the left of this modifier, or above this modifier in the layout tree.

### Modifier.modifierLocalProvider

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/modifier/ModifierLocalProvider.kt+function:modifierLocalProvider)

```
fun <T : Any?> Modifier.modifierLocalProvider(
    key: ProvidableModifierLocal<T>,
    value: () -> T
): Modifier
```

A Modifier that can be used to provide `https://developer.android.com/reference/kotlin/androidx/compose/ui/modifier/ModifierLocal`s that can be read by other modifiers to the right of this modifier, or modifiers that are children of the layout node that this modifier is attached to.

### Modifier.nestedScroll

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/nestedscroll/NestedScrollModifier.kt+function:nestedScroll)

```
fun Modifier.nestedScroll(
    connection: NestedScrollConnection,
    dispatcher: NestedScrollDispatcher? = null
): Modifier
```

Modify element to make it participate in the nested scrolling hierarchy.

There are two ways to participate in the nested scroll: as a scrolling child by dispatching scrolling events via `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher` to the nested scroll chain; and as a member of nested scroll chain by providing `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection`, which will be called when another nested scrolling child below dispatches scrolling events.

It's mandatory to participate as a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection` in the chain, but dispatching scrolling events is optional since there are cases where an element wants to participate in nested scrolling without being directly scrollable.

Here's the collapsing toolbar example that participates in a chain, but doesn't dispatch:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// here we use LazyColumn that has build-in nested scroll, but we want to act like a
// parent for this LazyColumn and participate in its nested scroll.
// Let's make a collapsing toolbar for LazyColumn
val toolbarHeight = 48.dp
val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx().toFloat() }
// our offset to collapse toolbar
val toolbarOffsetHeightPx = remember { mutableStateOf(0f) }
// now, let's create connection to the nested scroll system and listen to the scroll
// happening inside child LazyColumn
val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            // try to consume before LazyColumn to collapse toolbar if needed, hence pre-scroll
            val delta = available.y
            val newOffset = toolbarOffsetHeightPx.value + delta
            toolbarOffsetHeightPx.value = newOffset.coerceIn(-toolbarHeightPx, 0f)
            // here's the catch: let's pretend we consumed 0 in any case, since we want
            // LazyColumn to scroll anyway for good UX
            // We're basically watching scroll without taking it
            return Offset.Zero
        }
    }
}
Box(
    Modifier.fillMaxSize()
        // attach as a parent to the nested scroll system
        .nestedScroll(nestedScrollConnection)
) {
    // our list with build in nested scroll support that will notify us about its scroll
    LazyColumn(contentPadding = PaddingValues(top = toolbarHeight)) {
        items(100) { index ->
            Text("I'm item $index", modifier = Modifier.fillMaxWidth().padding(16.dp))
        }
    }
    TopAppBar(
        modifier =
            Modifier.height(toolbarHeight).offset {
                IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt())
            },
        title = { Text("toolbar offset is ${toolbarOffsetHeightPx.value}") },
    )
}
```

On the other side, dispatch via `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher` is optional. It's needed if a component is able to receive and react to the drag/fling events and you want this components to be able to notify parents when scroll occurs, resulting in better overall coordination.

Here's the example of the component that is draggable and dispatches nested scroll to participate in the nested scroll chain:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.unit.dp

// Let's take Modifier.draggable (which doesn't have nested scroll build in, unlike Modifier
// .scrollable) and add nested scroll support our component that contains draggable

// this will be a generic components that will work inside other nested scroll components.
// put it inside LazyColumn or / Modifier.verticalScroll to see how they will interact

// first, state and it's bounds
val basicState = remember { mutableStateOf(0f) }
val minBound = -100f
val maxBound = 100f
// lambda to update state and return amount consumed
val onNewDelta: (Float) -> Float = { delta ->
    val oldState = basicState.value
    val newState = (basicState.value + delta).coerceIn(minBound, maxBound)
    basicState.value = newState
    newState - oldState
}
// create a dispatcher to dispatch nested scroll events (participate like a nested scroll child)
val nestedScrollDispatcher = remember { NestedScrollDispatcher() }

// create nested scroll connection to react to nested scroll events (participate like a parent)
val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource,
        ): Offset {
            // we have no fling, so we're interested in the regular post scroll cycle
            // let's try to consume what's left if we need and return the amount consumed
            val vertical = available.y
            val weConsumed = onNewDelta(vertical)
            return Offset(x = 0f, y = weConsumed)
        }
    }
}
Box(
    Modifier.size(100.dp)
        .background(Color.LightGray)
        // attach ourselves to nested scroll system
        .nestedScroll(connection = nestedScrollConnection, dispatcher = nestedScrollDispatcher)
        .draggable(
            orientation = Orientation.Vertical,
            state =
                rememberDraggableState { delta ->
                    // here's regular drag. Let's be good citizens and ask parents first if they
                    // want to pre consume (it's a nested scroll contract)
                    val parentsConsumed =
                        nestedScrollDispatcher.dispatchPreScroll(
                            available = Offset(x = 0f, y = delta),
                            source = NestedScrollSource.UserInput,
                        )
                    // adjust what's available to us since might have consumed smth
                    val adjustedAvailable = delta - parentsConsumed.y
                    // we consume
                    val weConsumed = onNewDelta(adjustedAvailable)
                    // dispatch as a post scroll what's left after pre-scroll and our
                    // consumption
                    val totalConsumed = Offset(x = 0f, y = weConsumed) + parentsConsumed
                    val left = adjustedAvailable - weConsumed
                    nestedScrollDispatcher.dispatchPostScroll(
                        consumed = totalConsumed,
                        available = Offset(x = 0f, y = left),
                        source = NestedScrollSource.UserInput,
                    )
                    // we won't dispatch pre/post fling events as we have no flinging here, but
                    // the
                    // idea is very similar:
                    // 1. dispatch pre fling, asking parents to pre consume
                    // 2. fling (while dispatching scroll events like above for any fling tick)
                    // 3. dispatch post fling, allowing parent to react to velocity left
                },
        )
) {
    Text("State: ${basicState.value.roundToInt()}", modifier = Modifier.align(Alignment.Center))
}
```

**Note:** It is recommended to reuse `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher` objects between recompositions since different object will cause nested scroll graph to be recalculated unnecessary.

There are 4 main phases in nested scrolling system:

1. Pre-scroll. This callback is triggered when the descendant is about to perform a scroll operation and gives parent an opportunity to consume part of child's delta beforehand. This pass should happen every time scrollable components receives delta and dispatches it via `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher`. Dispatching child should take into account how much all ancestors above the hierarchy consumed and adjust the consumption accordingly.

2. Post-scroll. This callback is triggered when the descendant consumed the delta already (after taking into account what parents pre-consumed in 1.) and wants to notify the ancestors with the amount of delta unconsumed. This pass should happen every time scrollable components receives delta and dispatches it via `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher`. Any parent that receives `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection#onPostScroll(androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Offset,androidx.compose.ui.input.nestedscroll.NestedScrollSource)` should consume no more than `left` and return the amount consumed.

3. Pre-fling. Pass that happens when the scrolling descendant stopped dragging and about to fling with the some velocity. This callback allows ancestors to consume part of the velocity. This pass should happen before the fling itself happens. Similar to pre-scroll, parent can consume part of the velocity and nodes below (including the dispatching child) should adjust their logic to accommodate only the velocity left.

4. Post-fling. Pass that happens after the scrolling descendant stopped flinging and wants to notify ancestors about that fact, providing velocity left to consume as a part of this. This pass should happen after the fling itself happens on the scrolling child. Ancestors of the dispatching node will have opportunity to fling themselves with the `velocityLeft` provided. Parent must call `notifySelfFinish` callback in order to continue the propagation of the velocity that is left to ancestors above.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)` have build in support for nested scrolling, however, it's desirable to be able to react and influence their scroll via nested scroll system.

**Note:** The nested scroll system is orientation independent. This mean it is based off the screen direction (x and y coordinates) rather than being locked to a specific orientation.

| Parameters |
|---|---|
| `connection: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection` | connection to the nested scroll system to participate in the event chaining, receiving events when scrollable descendant is being scrolled. |
| `dispatcher: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher? = null` | object to be attached to the nested scroll system on which `dispatch*` methods can be called to notify ancestors within nested scroll system about scrolling happening |

### Modifier.absoluteOffset

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Offset.kt+function:absoluteOffset)

```
fun Modifier.absoluteOffset(offset: Density.() -> IntOffset): Modifier
```

Offset the content by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(kotlin.Function1)` px. The offsets can be positive as well as non-positive. Applying an offset only changes the position of the content, without interfering with its size measurement.

This modifier is designed to be used for offsets that change, possibly due to user interactions. It avoids recomposition when the offset is changing, and also adds a graphics layer that prevents unnecessary redrawing of the context when the offset is changing.

This modifier will not consider layout direction when calculating the position of the content: a positive horizontal offset will always move the content to the right. For a modifier that considers layout direction when applying the offset, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(kotlin.Function1)`.

Example usage:

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.absoluteOffset
import androidx.compose.foundation.layout.offset
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// This text will be offset in steps of 10.dp from the top left of the available space.
var offset by remember { mutableStateOf(0) }
Text(
    "Layout offset modifier sample",
    Modifier.clickable { offset += 10 }.absoluteOffset { IntOffset(offset, offset) },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(kotlin.Function1)` |   |

### Modifier.absoluteOffset

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Offset.kt+function:absoluteOffset)

```
fun Modifier.absoluteOffset(x: Dp = 0.dp, y: Dp = 0.dp): Modifier
```

Offset the content by (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp). The offsets can be positive as well as non-positive. Applying an offset only changes the position of the content, without interfering with its size measurement.

This modifier will not consider layout direction when calculating the position of the content: a positive `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` offset will always move the content to the right. For a modifier that considers the layout direction when applying the offset, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.layout.absoluteOffset
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// This text will be offset (10.dp, 20.dp) from the center of the available space.
Text(
    "Layout offset modifier sample",
    Modifier.fillMaxSize().wrapContentSize(Alignment.Center).absoluteOffset(10.dp, 20.dp),
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.offset

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Offset.kt+function:offset)

```
fun Modifier.offset(offset: Density.() -> IntOffset): Modifier
```

Offset the content by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(kotlin.Function1)` px. The offsets can be positive as well as non-positive. Applying an offset only changes the position of the content, without interfering with its size measurement.

This modifier is designed to be used for offsets that change, possibly due to user interactions. It avoids recomposition when the offset is changing, and also adds a graphics layer that prevents unnecessary redrawing of the context when the offset is changing.

This modifier will automatically adjust the horizontal offset according to the layout direction: when the LD is LTR, positive horizontal offsets will move the content to the right and when the LD is RTL, positive horizontal offsets will move the content to the left. For a modifier that offsets without considering layout direction, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/absoluteOffset.modifier#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.offset
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// This text will be offset in steps of 10.dp from the top left of the available space in
// left-to-right context, and from top right in right-to-left context.
var offset by remember { mutableStateOf(0) }
Text(
    "Layout offset modifier sample",
    Modifier.clickable { offset += 10 }.offset { IntOffset(offset, offset) },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/absoluteOffset.modifier#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.offset

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Offset.kt+function:offset)

```
fun Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp): Modifier
```

Offset the content by (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp). The offsets can be positive as well as non-positive. Applying an offset only changes the position of the content, without interfering with its size measurement.

This modifier will automatically adjust the horizontal offset according to the layout direction: when the layout direction is LTR, positive `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` offsets will move the content to the right and when the layout direction is RTL, positive `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` offsets will move the content to the left. For a modifier that offsets without considering layout direction, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/absoluteOffset.modifier#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// This text will be offset (10.dp, 20.dp) from the center of the available space. In the
// right-to-left context, the offset will be (-10.dp, 20.dp).
Text(
    "Layout offset modifier sample",
    Modifier.fillMaxSize().wrapContentSize(Alignment.Center).offset(10.dp, 20.dp),
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/absoluteOffset.modifier#(androidx.compose.ui.Modifier).absoluteOffset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` |   |

### Modifier.onFirstVisible

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnFirstVisibleModifier.kt+function:onFirstVisible)

```
fun Modifier.[onFirstVisible](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).onFirstVisible(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function0))(
    minDurationMs: @IntRange(from = 0) Long = 0,
    minFractionVisible: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    viewportBounds: LayoutBoundsHolder? = null,
    callback: () -> Unit
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> This modifier is deprecated as its behavior is misleading and doesn't always follow the contract claimed by the name. For example, when it is added on an item of LazyColumn, this callback will be called everytime this item became visible after scrolling.It is not what the users of the modifier with this name might have expected. It is recommended to use Modifier.onVisibilityChanged() instead and manually track if the layout was visible already previously based on the requirement of the specific use case, use this instead:
>
> ```kotlin
> onVisibilityChanged(minDurationMs, minFractionVisible, viewportBounds) { visible ->if (visible) { callback() } }
> ```

Registers a callback to monitor when the node is first inside of the viewport of the window or not. Example use cases for this include impression and view counting, starting animations, or doing work that is only required once the item is visible to the user.

```kotlin
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onFirstVisible

@Composable
fun VideoFeed(feedData: List<Video>, logger: Logger) {
    LazyColumn {
        items(feedData) { video ->
            VideoRow(
                video,
                Modifier.onFirstVisible(minDurationMs = 500, minFractionVisible = 1f) {
                    logger.logImpression(video.id)
                },
            )
        }
    }
}
```

```kotlin
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LayoutBoundsHolder
import androidx.compose.ui.layout.layoutBounds
import androidx.compose.ui.layout.onFirstVisible

@Composable
fun VideoFeed(feedData: List<Video>, logger: Logger) {
    val viewport = remember { LayoutBoundsHolder() }
    LazyColumn(Modifier.layoutBounds(viewport)) {
        items(feedData) { video ->
            VideoRow(
                video,
                Modifier.onFirstVisible(
                    minDurationMs = 500,
                    minFractionVisible = 1f,
                    viewportBounds = viewport,
                ) {
                    logger.logImpression(video.id)
                },
            )
        }
    }
}
```

| Parameters |
|---|---|
| `minDurationMs: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html = 0` | the amount of time in milliseconds that this node should be considered visible before invoking the callback. Depending on your use case, it might be useful to provide a non-zero number here if it is desirable to avoid triggering the callback on elements during really fast scrolls where they are only visible for a short amount of time. |
| `minFractionVisible: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | the fraction of the node which should be inside the viewport to be considered visible. A value of 1f means that the entire bounds of the rect need to be inside of the viewport, or that the rect fills 100% of the viewport. A value of 0f means that this will get triggered as soon as a non-zero amount of pixels are inside of the viewport. |
| `viewportBounds: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder? = null` | a reference to the bounds to use as a "viewport" with which to calculate the amount of visibility this element has *inside* of that viewport. This is most commonly used to account for UI elements such as navigation bars which are drawn on top of the content that this modifier is applied to. It is required that this be passed in to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutBounds.modifier#(androidx.compose.ui.Modifier).layoutBounds(androidx.compose.ui.layout.LayoutBoundsHolder)` somewhere else in order for this parameter to get used properly. If null is provided, the window of the application will be used as the viewport. |
| `callback: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | lambda that is invoked when the fraction of this node inside of the specified viewport is greater than minFractionVisible. This lambda will only get invoked a maximum of one time while the element is attached. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onLayoutRectChanged.modifier#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.node.DelegatableNode).registerOnLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds#fractionVisibleIn(androidx.compose.ui.spatial.RelativeLayoutBounds)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutBounds.modifier#(androidx.compose.ui.Modifier).layoutBounds(androidx.compose.ui.layout.LayoutBoundsHolder)` |   |

### Modifier.onGloballyPositioned

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnGloballyPositionedModifier.kt+function:onGloballyPositioned)

```
fun Modifier.onGloballyPositioned(
    onGloballyPositioned: (LayoutCoordinates) -> Unit
): Modifier
```

Invoke `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onGloballyPositioned.modifier#(androidx.compose.ui.Modifier).onGloballyPositioned(kotlin.Function1)` with the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the element when the global position of the content may have changed. Note that it will be called **after** a composition when the coordinates are finalized.

This callback will be invoked at least once when the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` are available, and every time the element's position changes within the window. However, it is not guaranteed to be invoked every time the position *relative to the screen* of the modified element changes. For example, the system may move the contents inside a window around without firing a callback. If you are using the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` to calculate position on the screen, and not just inside the window, you may not receive a callback.

Usage example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.positionInRoot
import androidx.compose.ui.layout.positionInWindow
import androidx.compose.ui.unit.dp

Column(
    Modifier.onGloballyPositioned { coordinates ->
        // This will be the size of the Column.
        coordinates.size
        // The position of the Column relative to the application window.
        coordinates.positionInWindow()
        // The position of the Column relative to the Compose root.
        coordinates.positionInRoot()
        // These will be the alignment lines provided to the layout (empty here for Column).
        coordinates.providedAlignmentLines
        // This will be a LayoutCoordinates instance corresponding to the parent of Column.
        coordinates.parentLayoutCoordinates
    }
) {
    Box(Modifier.size(20.dp).background(Color.Green))
    Box(Modifier.size(20.dp).background(Color.Blue))
}
```

### Modifier.onLayoutRectChanged

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnLayoutRectChangedModifier.kt+function:onLayoutRectChanged)

```
fun Modifier.onLayoutRectChanged(
    throttleMillis: Long = 0,
    debounceMillis: Long = 64,
    callback: (RelativeLayoutBounds) -> Unit
): Modifier
```

Invokes `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` with the position of this layout node relative to the coordinate system of the root of the composition, as well as in screen coordinates and window coordinates. This will be called after layout pass. This API allows for throttling and debouncing parameters in order to moderate the frequency with which the callback gets invoked during high rates of change (e.g. scrolling).

Specifying `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` will prevent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` from being executed more than once over that time period. Specifying `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` will delay the execution of `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` until that amount of time has elapsed without a new position, scheduling the callback to be executed when that amount of time expires.

Specifying 0 for both `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` will result in the callback being executed every time the position has changed. Specifying non-zero amounts for both will result in both conditions being met. Specifying a non-zero `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` but a zero `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` is equivalent to providing the same value for both `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)`.

| Parameters |
|---|---|
| `throttleMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html = 0` | The duration, in milliseconds, to prevent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` from being executed more than once over that time period. |
| `debounceMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html = 64` | The duration, in milliseconds, to delay the execution of `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` until that amount of time has elapsed without a new position. |
| `callback: (https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The callback to be executed. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onGloballyPositioned.modifier#(androidx.compose.ui.Modifier).onGloballyPositioned(kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.node.DelegatableNode).registerOnLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` |   |

### Modifier.onPlaced

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnPlacedModifier.kt+function:onPlaced)

```
fun Modifier.onPlaced(onPlaced: (LayoutCoordinates) -> Unit): Modifier
```

Invoke `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onPlaced.modifier#(androidx.compose.ui.Modifier).onPlaced(kotlin.Function1)` after the parent `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` and parent layout has been placed and before child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` is placed. This allows child `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutModifier` to adjust its own placement based on where the parent is.

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.AnimationVector2D
import androidx.compose.animation.core.Spring.StiffnessMediumLow
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.layout.positionInParent
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

fun Modifier.animatePlacement(): Modifier = composed {
    val scope = rememberCoroutineScope()
    var targetOffset by remember { mutableStateOf(IntOffset.Zero) }
    var animatable by remember {
        mutableStateOf<Animatable<IntOffset, AnimationVector2D>?>(null)
    }
    this.onPlaced {
            // Calculate the position in the parent layout
            targetOffset = it.positionInParent().round()
        }
        .offset {
            // Animate to the new target offset when alignment changes.
            val anim =
                animatable
                    ?: Animatable(targetOffset, IntOffset.VectorConverter).also {
                        animatable = it
                    }
            if (anim.targetValue != targetOffset) {
                scope.launch {
                    anim.animateTo(targetOffset, spring(stiffness = StiffnessMediumLow))
                }
            }
            // Offset the child in the opposite direction to the targetOffset, and slowly catch
            // up to zero offset via an animation to achieve an overall animated movement.
            animatable?.let { it.value - targetOffset } ?: IntOffset.Zero
        }
}

@Composable
fun AnimatedChildAlignment(alignment: Alignment) {
    Box(Modifier.fillMaxSize().padding(4.dp).border(1.dp, Color.Red)) {
        Box(
            modifier =
                Modifier.animatePlacement().align(alignment).size(100.dp).background(Color.Red)
        )
    }
}
```

### Modifier.onSizeChanged

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnRemeasuredModifier.kt+function:onSizeChanged)

```
fun Modifier.onSizeChanged(onSizeChanged: (IntSize) -> Unit): Modifier
```

Invoked with the size of the modified Compose UI element when the element is first measured or when the size of the element changes.

There are no guarantees `onSizeChanged` will not be re-invoked with the same size.

Using the `onSizeChanged` size value in a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/MutableState` to update layout causes the new size value to be read and the layout to be recomposed in the succeeding frame, resulting in a one frame lag.

You can use `onSizeChanged` to affect drawing operations. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/SubcomposeLayout.composable#SubcomposeLayout(androidx.compose.ui.Modifier,kotlin.Function2)` to enable the size of one component to affect the size of another.

Example usage:

```kotlin
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onSizeChanged

// Use onSizeChanged() for diagnostics. Use Layout or SubcomposeLayout if you want
// to use the size of one component to affect the size of another component.
Text(
    "Hello $name",
    Modifier.onSizeChanged { size -> println("The size of the Text in pixels is $size") },
)
```

### Modifier.onVisibilityChanged

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/layout/OnVisibilityChangedModifier.kt+function:onVisibilityChanged)

```
fun Modifier.onVisibilityChanged(
    minDurationMs: @IntRange(from = 0) Long = 0,
    minFractionVisible: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    viewportBounds: LayoutBoundsHolder? = null,
    callback: (Boolean) -> Unit
): Modifier
```

Registers a callback to monitor whether or not the node is inside of the viewport of the window or not. Example use cases for this include, auto-playing videos in a feed, logging how long an item was visible, and starting/stopping animations.

```kotlin
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onVisibilityChanged

@Composable
fun VideoFeed(feedData: List<Video>) {
    LazyColumn {
        items(feedData) { video ->
            VideoRow(
                video,
                Modifier.onVisibilityChanged(minDurationMs = 500, minFractionVisible = 1f) {
                    visible ->
                    if (visible) video.play() else video.pause()
                },
            )
        }
    }
}
```

```kotlin
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LayoutBoundsHolder
import androidx.compose.ui.layout.layoutBounds
import androidx.compose.ui.layout.onVisibilityChanged

@Composable
fun VideoFeed(feedData: List<Video>) {
    val viewport = remember { LayoutBoundsHolder() }
    LazyColumn(Modifier.layoutBounds(viewport)) {
        items(feedData) { video ->
            VideoRow(
                video,
                Modifier.onVisibilityChanged(
                    minDurationMs = 500,
                    minFractionVisible = 1f,
                    viewportBounds = viewport,
                ) { visible ->
                    if (visible) video.play() else video.pause()
                },
            )
        }
    }
}
```

```kotlin
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onVisibilityChanged

@Composable
fun VideoFeed(feedData: List<Video>, logger: Logger) {
    LazyColumn {
        items(feedData) { video ->
            var startTime by remember { mutableLongStateOf(-1) }
            VideoRow(
                video,
                Modifier.onVisibilityChanged(minDurationMs = 500, minFractionVisible = 1f) {
                    visible ->
                    if (visible) {
                        startTime = System.currentTimeMillis()
                    } else if (startTime >= 0) {
                        val durationMs = System.currentTimeMillis() - startTime
                        logger.logImpression(video.id, durationMs)
                        startTime = -1
                    }
                },
            )
        }
    }
}
```

| Parameters |
|---|---|
| `minDurationMs: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html = 0` | the amount of time in milliseconds that this node should be considered visible before invoking the callback with (true). Depending on your use case, it might be useful to provide a non-zero number here if it is desirable to avoid triggering the callback on elements during really fast scrolls where they went from visible to invisible in a really short amount of time. |
| `minFractionVisible: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | the fraction of the node which should be inside the viewport for the callback to get called with a value of true. A value of 1f means that the entire bounds of the rect need to be inside of the viewport, or that the rect fills 100% of the viewport. A value of 0f means that this will get triggered as soon as a non-zero amount of pixels are inside of the viewport. |
| `viewportBounds: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutBoundsHolder? = null` | a reference to the bounds to use as a "viewport" with which to calculate the amount of visibility this element has *inside* of that viewport. This is most commonly used to account for UI elements such as navigation bars which are drawn on top of the content that this modifier is applied to. It is required that this be passed in to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutBounds.modifier#(androidx.compose.ui.Modifier).layoutBounds(androidx.compose.ui.layout.LayoutBoundsHolder)` somewhere else in order for this parameter to get used properly. If null is provided, the window of the application will be used as the viewport. |
| `callback: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | lambda that is invoked when the fraction of this node inside of the specified viewport crosses the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)`. The boolean argument passed into this lambda will be true in cases where the fraction visible is greater, and false when it is not. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onLayoutRectChanged.modifier#(androidx.compose.ui.Modifier).onLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.node.DelegatableNode).registerOnLayoutRectChanged(kotlin.Long,kotlin.Long,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/spatial/RelativeLayoutBounds#fractionVisibleIn(androidx.compose.ui.spatial.RelativeLayoutBounds)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/layoutBounds.modifier#(androidx.compose.ui.Modifier).layoutBounds(androidx.compose.ui.layout.LayoutBoundsHolder)` |   |

### Modifier.oneHandedGesture

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/onehandedgesture/OneHandedGestureModifier.kt+function:oneHandedGesture)

```
fun Modifier.oneHandedGesture(
    gestureConfiguration: OneHandedGestureConfiguration,
    onGestureLabel: String?,
    enabledInAmbient: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    onGestureAvailable: () -> Unit = {},
    onGesture: suspend () -> Unit
): Modifier
```

Registers a gesture handler.

Note: Gesture recognition can be explicitly disabled across a component hierarchy by providing false\` to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/package-summary#LocalOneHandedGestureEnabled()`.

**Visibility Management:** This gesture handler is active as long as the Modifier is part of the composition. On its own, it does not track whether the composable is visible or clipped (e.g., in a Lazy layout).

To prevent accidental triggers from off-screen items, developers should apply this modifier conditionally. For many cases, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` Modifier can be used to determine the visibility of a composable.

Example usage in a list:

```kotlin
var isVisible by remember { mutableStateOf(false) }
val gestureModifier = remember(isVisible) {
  if (isVisible) Modifier.oneHandedGesture() else Modifier
}

Box(
  modifier = Modifier
    .onVisibilityChanged { isVisible = it }
    .then(gestureModifier)
) {
  ...
}
```

**Haptics:** When a gesture is successfully triggered, the system automatically performs haptic feedback to acknowledge the interaction; developers do not need to trigger haptics manually within `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/package-summary#(androidx.compose.ui.Modifier).oneHandedGesture(androidx.wear.compose.material3.onehandedgesture.OneHandedGestureConfiguration,kotlin.String,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.coroutines.SuspendFunction0)`.

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = { label = "Clicked/Gestured" }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGestureClickIndicatorState() }
val coroutineScope = rememberCoroutineScope()

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.fillMaxWidth()
                .oneHandedGesture(
                    gestureConfiguration = gestureConfig,
                    interactionSource = interactionSource,
                    onGestureLabel = "activate the button",
                    onGestureAvailable = {
                        coroutineScope.launch { indicatorState.showIndicator() }
                    },
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureClickIndicator(gestureConfig, indicatorState) {
            Text(label, modifier = Modifier.fillMaxWidth())
        }
    }
}
```

Example of adding one-handed gesture handler that is enabled in ambient mode to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.AmbientMode
import androidx.wear.compose.foundation.LocalAmbientModeManager
import androidx.wear.compose.foundation.rememberAmbientModeManager
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = { label = "Clicked/Gestured" }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGestureClickIndicatorState() }
val coroutineScope = rememberCoroutineScope()
val activityAmbientModeManager = rememberAmbientModeManager()
var showGestureIndicator by remember { mutableStateOf(true) }

CompositionLocalProvider(LocalAmbientModeManager provides activityAmbientModeManager) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val isInAmbientMode =
            LocalAmbientModeManager.current?.currentAmbientMode is AmbientMode.Ambient
        Button(
            onClick = onClick,
            interactionSource = interactionSource,
            modifier =
                Modifier.fillMaxWidth()
                    .oneHandedGesture(
                        gestureConfiguration = gestureConfig,
                        interactionSource = interactionSource,
                        enabledInAmbient = true,
                        onGestureLabel = "activate the button",
                        onGestureAvailable = {
                            // Bypass repeating the gesture indicator on every recomposition.
                            if (showGestureIndicator) {
                                coroutineScope.launch { indicatorState.showIndicator() }
                                showGestureIndicator = false
                            }
                        },
                        onGesture = onClick,
                    ),
            colors =
                if (isInAmbientMode) ButtonDefaults.outlinedButtonColors()
                else ButtonDefaults.buttonColors(),
            border =
                if (isInAmbientMode) ButtonDefaults.outlinedButtonBorder(enabled = true)
                else null,
        ) {
            OneHandedGestureClickIndicator(gestureConfig, indicatorState) {
                Text(label, modifier = Modifier.fillMaxWidth())
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumn.composable#TransformingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.TransformingLazyColumnState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider,kotlin.Function1)`:

```kotlin
import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePriority
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val backDispatcherOwner = LocalOnBackPressedDispatcherOwner.current
val onClick =
    remember<() -> Unit> { { backDispatcherOwner?.onBackPressedDispatcher?.onBackPressed() } }
val scrollState = rememberTransformingLazyColumnState()
val coroutineScope = rememberCoroutineScope()

val buttonInteractionSource = remember { MutableInteractionSource() }
val buttonGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Clickable,
    )
val buttonIndicatorState = remember { OneHandedGestureClickIndicatorState() }

val scrollGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Scrollable,
    )
val scrollIndicatorState =
    remember(scrollGestureConfig) { OneHandedGestureScrollIndicatorState() }

ScreenScaffold(
    scrollState = scrollState,
    edgeButton = {
        EdgeButton(
            onClick = onClick,
            interactionSource = buttonInteractionSource,
            modifier =
                if (scrollState.canScrollForward) {
                    Modifier
                } else {
                    // Apply the one-handed gesture modifier only when the container cannot
                    // scroll further, ensuring the EdgeButton is fully visible and interactive
                    Modifier.oneHandedGesture(
                        gestureConfiguration = buttonGestureConfig,
                        interactionSource = buttonInteractionSource,
                        onGestureLabel = "close",
                        onGestureAvailable = {
                            coroutineScope.launch { buttonIndicatorState.showIndicator() }
                        },
                        onGesture = onClick,
                    )
                } then
                    Modifier.scrollable(
                        state = scrollState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
        ) {
            OneHandedGestureClickIndicator(buttonGestureConfig, buttonIndicatorState) {
                Text("Close")
            }
        }
    },
    scrollIndicator = {
        OneHandedGestureScrollIndicator(
            gestureConfiguration = scrollGestureConfig,
            indicatorState = scrollIndicatorState,
            scrollState = scrollState,
            modifier = Modifier.align(Alignment.CenterEnd),
        )
    },
) { contentPadding ->
    TransformingLazyColumn(
        state = scrollState,
        contentPadding = contentPadding,
        modifier =
            Modifier.fillMaxSize()
                .oneHandedGesture(
                    gestureConfiguration = scrollGestureConfig,
                    onGestureLabel = "scroll",
                    onGestureAvailable = {
                        coroutineScope.launch { scrollIndicatorState.showIndicator() }
                    },
                    onGesture = { OneHandedGestureDefaults.scrollDown(scrollState) },
                ),
    ) {
        items(10) { Text("Item $it") }
    }
}
```

Example of using `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` to trigger adding a one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onVisibilityChanged
import androidx.compose.ui.text.style.TextAlign
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePriority
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Double-pinch") }
val onClick = { label = "Gestured" }
val scrollState = rememberTransformingLazyColumnState()
val coroutineScope = rememberCoroutineScope()

val scrollGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Scrollable,
    )
val scrollIndicatorState =
    remember(scrollGestureConfig) { OneHandedGestureScrollIndicatorState() }

ScreenScaffold(
    scrollState = scrollState,
    scrollIndicator = {
        OneHandedGestureScrollIndicator(
            gestureConfiguration = scrollGestureConfig,
            indicatorState = scrollIndicatorState,
            scrollState = scrollState,
            modifier = Modifier.align(Alignment.CenterEnd),
        )
    },
) { contentPadding ->
    TransformingLazyColumn(
        state = scrollState,
        contentPadding = contentPadding,
        modifier =
            Modifier.fillMaxSize()
                .oneHandedGesture(
                    gestureConfiguration = scrollGestureConfig,
                    onGestureLabel = "scroll",
                    onGestureAvailable = {
                        coroutineScope.launch { scrollIndicatorState.showIndicator() }
                    },
                    onGesture = { OneHandedGestureDefaults.scrollDown(scrollState) },
                ),
    ) {
        items(10) { Text("Item $it") }
        item {
            var isButtonVisible by remember { mutableStateOf(false) }
            val buttonInteractionSource = remember { MutableInteractionSource() }
            val buttonGestureConfig =
                rememberOneHandedGestureConfiguration(
                    action = OneHandedGestureAction.Primary,
                    priority = OneHandedGesturePriority.Clickable,
                )
            val buttonIndicatorState = remember { OneHandedGestureClickIndicatorState() }

            Button(
                onClick = onClick,
                interactionSource = buttonInteractionSource,
                modifier =
                    Modifier.onVisibilityChanged(minFractionVisible = 0.9f) {
                            isButtonVisible = it
                        }
                        .then(
                            if (isButtonVisible) {
                                // Apply the one-handed gesture modifier only when the button
                                // is at least 90% visible.
                                Modifier.oneHandedGesture(
                                    gestureConfiguration = buttonGestureConfig,
                                    interactionSource = buttonInteractionSource,
                                    onGestureLabel = "activate the button",
                                    onGestureAvailable = {
                                        coroutineScope.launch {
                                            buttonIndicatorState.showIndicator()
                                        }
                                    },
                                    onGesture = onClick,
                                )
                            } else {
                                Modifier
                            }
                        ),
            ) {
                OneHandedGestureClickIndicator(buttonGestureConfig, buttonIndicatorState) {
                    Text(
                        label,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                    )
                }
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureHorizontalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePageIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val pagerState = rememberPagerState(pageCount = { 10 })
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGesturePageIndicatorState() }
val coroutineScope = rememberCoroutineScope()

HorizontalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureHorizontalPageIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            pagerState = pagerState,
        )
    },
) {
    HorizontalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                onGestureLabel = "scroll to the next page",
                onGestureAvailable = {
                    coroutineScope.launch { indicatorState.showIndicator() }
                },
            ) {
                OneHandedGestureDefaults.scrollToNextPage(pagerState)
            },
    ) { page ->
        AnimatedPage(pageIndex = page, pagerState = pagerState) {
            ScreenScaffold { contentPadding ->
                Column(
                    modifier = Modifier.fillMaxSize().padding(contentPadding),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe left and right")
                }
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePageIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureVerticalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val pagerState = rememberPagerState(pageCount = { 10 })
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGesturePageIndicatorState() }
val coroutineScope = rememberCoroutineScope()

VerticalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureVerticalPageIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            pagerState = pagerState,
        )
    },
) {
    VerticalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                onGestureLabel = "scroll to the next page",
                onGestureAvailable = {
                    coroutineScope.launch { indicatorState.showIndicator() }
                },
            ) {
                OneHandedGestureDefaults.scrollToNextPage(pagerState)
            },
    ) { page ->
        AnimatedPage(pageIndex = page, pagerState = pagerState) {
            ScreenScaffold { contentPadding ->
                Column(
                    modifier = Modifier.fillMaxSize().padding(contentPadding),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe up and down")
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `gestureConfiguration: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration` containing the configuration for this gesture. |
| `onGestureLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | Semantic label used by accessibility services to describe the purpose of this gesture. This is highly recommended for ensuring that users with screen readers understand what action will be performed. |
| `enabledInAmbient: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the gesture should remain active in ambient mode. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` and an immediate `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Release` when this gesture is triggered. This allows UI components to visually react (such as triggering a touch ripple or pressed state animation) upon gesture activation. |
| `onGestureAvailable: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | A callback invoked by the system to signal that this gesture is currently available as a high-priority action. Developers should use this callback to call showIndicator on the indicator state to trigger the associated visual feedback. It is invoked after a delay of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureDefaults#ShowIndicatorDelayMillis()`, use the overload with `showIndicatorDelayMillis` parameter to customize this delay. |
| `onGesture: suspend () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The callback invoked when the gesture is triggered. See also the [UI Design Guides for One-Handed Gestures](https://developer.android.com/design/ui/wear/guides/patterns/gestures) |

### Modifier.oneHandedGesture

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/onehandedgesture/OneHandedGestureModifier.kt+function:oneHandedGesture)

```
fun Modifier.oneHandedGesture(
    gestureConfiguration: OneHandedGestureConfiguration,
    onGestureLabel: String?,
    showIndicatorDelayMillis: @IntRange(from = 0) Long,
    enabledInAmbient: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    onGestureAvailable: () -> Unit = {},
    onGesture: suspend () -> Unit
): Modifier
```

Registers a gesture handler.

Note: Gesture recognition can be explicitly disabled across a component hierarchy by providing false\` to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/package-summary#LocalOneHandedGestureEnabled()`.

**Visibility Management:** This gesture handler is active as long as the Modifier is part of the composition. On its own, it does not track whether the composable is visible or clipped (e.g., in a Lazy layout).

To prevent accidental triggers from off-screen items, developers should apply this modifier conditionally. For many cases, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` Modifier can be used to determine the visibility of a composable.

Example usage in a list:

```kotlin
var isVisible by remember { mutableStateOf(false) }
val gestureModifier = remember(isVisible) {
  if (isVisible) Modifier.oneHandedGesture() else Modifier
}

Box(
  modifier = Modifier
    .onVisibilityChanged { isVisible = it }
    .then(gestureModifier)
) {
  ...
}
```

**Haptics:** When a gesture is successfully triggered, the system automatically performs haptic feedback to acknowledge the interaction; developers do not need to trigger haptics manually within `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/package-summary#(androidx.compose.ui.Modifier).oneHandedGesture(androidx.wear.compose.material3.onehandedgesture.OneHandedGestureConfiguration,kotlin.String,kotlin.Long,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.coroutines.SuspendFunction0)`.

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = { label = "Clicked/Gestured" }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGestureClickIndicatorState() }
val coroutineScope = rememberCoroutineScope()

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.fillMaxWidth()
                .oneHandedGesture(
                    gestureConfiguration = gestureConfig,
                    interactionSource = interactionSource,
                    onGestureLabel = "activate the button",
                    onGestureAvailable = {
                        coroutineScope.launch { indicatorState.showIndicator() }
                    },
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureClickIndicator(gestureConfig, indicatorState) {
            Text(label, modifier = Modifier.fillMaxWidth())
        }
    }
}
```

Example of adding one-handed gesture handler that is enabled in ambient mode to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.AmbientMode
import androidx.wear.compose.foundation.LocalAmbientModeManager
import androidx.wear.compose.foundation.rememberAmbientModeManager
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Gesturable Button") }
val onClick = { label = "Clicked/Gestured" }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGestureClickIndicatorState() }
val coroutineScope = rememberCoroutineScope()
val activityAmbientModeManager = rememberAmbientModeManager()
var showGestureIndicator by remember { mutableStateOf(true) }

CompositionLocalProvider(LocalAmbientModeManager provides activityAmbientModeManager) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val isInAmbientMode =
            LocalAmbientModeManager.current?.currentAmbientMode is AmbientMode.Ambient
        Button(
            onClick = onClick,
            interactionSource = interactionSource,
            modifier =
                Modifier.fillMaxWidth()
                    .oneHandedGesture(
                        gestureConfiguration = gestureConfig,
                        interactionSource = interactionSource,
                        enabledInAmbient = true,
                        onGestureLabel = "activate the button",
                        onGestureAvailable = {
                            // Bypass repeating the gesture indicator on every recomposition.
                            if (showGestureIndicator) {
                                coroutineScope.launch { indicatorState.showIndicator() }
                                showGestureIndicator = false
                            }
                        },
                        onGesture = onClick,
                    ),
            colors =
                if (isInAmbientMode) ButtonDefaults.outlinedButtonColors()
                else ButtonDefaults.buttonColors(),
            border =
                if (isInAmbientMode) ButtonDefaults.outlinedButtonBorder(enabled = true)
                else null,
        ) {
            OneHandedGestureClickIndicator(gestureConfig, indicatorState) {
                Text(label, modifier = Modifier.fillMaxWidth())
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumn.composable#TransformingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.TransformingLazyColumnState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider,kotlin.Function1)`:

```kotlin
import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePriority
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val backDispatcherOwner = LocalOnBackPressedDispatcherOwner.current
val onClick =
    remember<() -> Unit> { { backDispatcherOwner?.onBackPressedDispatcher?.onBackPressed() } }
val scrollState = rememberTransformingLazyColumnState()
val coroutineScope = rememberCoroutineScope()

val buttonInteractionSource = remember { MutableInteractionSource() }
val buttonGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Clickable,
    )
val buttonIndicatorState = remember { OneHandedGestureClickIndicatorState() }

val scrollGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Scrollable,
    )
val scrollIndicatorState =
    remember(scrollGestureConfig) { OneHandedGestureScrollIndicatorState() }

ScreenScaffold(
    scrollState = scrollState,
    edgeButton = {
        EdgeButton(
            onClick = onClick,
            interactionSource = buttonInteractionSource,
            modifier =
                if (scrollState.canScrollForward) {
                    Modifier
                } else {
                    // Apply the one-handed gesture modifier only when the container cannot
                    // scroll further, ensuring the EdgeButton is fully visible and interactive
                    Modifier.oneHandedGesture(
                        gestureConfiguration = buttonGestureConfig,
                        interactionSource = buttonInteractionSource,
                        onGestureLabel = "close",
                        onGestureAvailable = {
                            coroutineScope.launch { buttonIndicatorState.showIndicator() }
                        },
                        onGesture = onClick,
                    )
                } then
                    Modifier.scrollable(
                        state = scrollState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
        ) {
            OneHandedGestureClickIndicator(buttonGestureConfig, buttonIndicatorState) {
                Text("Close")
            }
        }
    },
    scrollIndicator = {
        OneHandedGestureScrollIndicator(
            gestureConfiguration = scrollGestureConfig,
            indicatorState = scrollIndicatorState,
            scrollState = scrollState,
            modifier = Modifier.align(Alignment.CenterEnd),
        )
    },
) { contentPadding ->
    TransformingLazyColumn(
        state = scrollState,
        contentPadding = contentPadding,
        modifier =
            Modifier.fillMaxSize()
                .oneHandedGesture(
                    gestureConfiguration = scrollGestureConfig,
                    onGestureLabel = "scroll",
                    onGestureAvailable = {
                        coroutineScope.launch { scrollIndicatorState.showIndicator() }
                    },
                    onGesture = { OneHandedGestureDefaults.scrollDown(scrollState) },
                ),
    ) {
        items(10) { Text("Item $it") }
    }
}
```

Example of using `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/onVisibilityChanged.modifier#(androidx.compose.ui.Modifier).onVisibilityChanged(kotlin.Long,kotlin.Float,androidx.compose.ui.layout.LayoutBoundsHolder,kotlin.Function1)` to trigger adding a one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onVisibilityChanged
import androidx.compose.ui.text.style.TextAlign
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureClickIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePriority
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureScrollIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Double-pinch") }
val onClick = { label = "Gestured" }
val scrollState = rememberTransformingLazyColumnState()
val coroutineScope = rememberCoroutineScope()

val scrollGestureConfig =
    rememberOneHandedGestureConfiguration(
        action = OneHandedGestureAction.Primary,
        priority = OneHandedGesturePriority.Scrollable,
    )
val scrollIndicatorState =
    remember(scrollGestureConfig) { OneHandedGestureScrollIndicatorState() }

ScreenScaffold(
    scrollState = scrollState,
    scrollIndicator = {
        OneHandedGestureScrollIndicator(
            gestureConfiguration = scrollGestureConfig,
            indicatorState = scrollIndicatorState,
            scrollState = scrollState,
            modifier = Modifier.align(Alignment.CenterEnd),
        )
    },
) { contentPadding ->
    TransformingLazyColumn(
        state = scrollState,
        contentPadding = contentPadding,
        modifier =
            Modifier.fillMaxSize()
                .oneHandedGesture(
                    gestureConfiguration = scrollGestureConfig,
                    onGestureLabel = "scroll",
                    onGestureAvailable = {
                        coroutineScope.launch { scrollIndicatorState.showIndicator() }
                    },
                    onGesture = { OneHandedGestureDefaults.scrollDown(scrollState) },
                ),
    ) {
        items(10) { Text("Item $it") }
        item {
            var isButtonVisible by remember { mutableStateOf(false) }
            val buttonInteractionSource = remember { MutableInteractionSource() }
            val buttonGestureConfig =
                rememberOneHandedGestureConfiguration(
                    action = OneHandedGestureAction.Primary,
                    priority = OneHandedGesturePriority.Clickable,
                )
            val buttonIndicatorState = remember { OneHandedGestureClickIndicatorState() }

            Button(
                onClick = onClick,
                interactionSource = buttonInteractionSource,
                modifier =
                    Modifier.onVisibilityChanged(minFractionVisible = 0.9f) {
                            isButtonVisible = it
                        }
                        .then(
                            if (isButtonVisible) {
                                // Apply the one-handed gesture modifier only when the button
                                // is at least 90% visible.
                                Modifier.oneHandedGesture(
                                    gestureConfiguration = buttonGestureConfig,
                                    interactionSource = buttonInteractionSource,
                                    onGestureLabel = "activate the button",
                                    onGestureAvailable = {
                                        coroutineScope.launch {
                                            buttonIndicatorState.showIndicator()
                                        }
                                    },
                                    onGesture = onClick,
                                )
                            } else {
                                Modifier
                            }
                        ),
            ) {
                OneHandedGestureClickIndicator(buttonGestureConfig, buttonIndicatorState) {
                    Text(
                        label,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                    )
                }
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.GestureInclusion,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureHorizontalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePageIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val pagerState = rememberPagerState(pageCount = { 10 })
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGesturePageIndicatorState() }
val coroutineScope = rememberCoroutineScope()

HorizontalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureHorizontalPageIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            pagerState = pagerState,
        )
    },
) {
    HorizontalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                onGestureLabel = "scroll to the next page",
                onGestureAvailable = {
                    coroutineScope.launch { indicatorState.showIndicator() }
                },
            ) {
                OneHandedGestureDefaults.scrollToNextPage(pagerState)
            },
    ) { page ->
        AnimatedPage(pageIndex = page, pagerState = pagerState) {
            ScreenScaffold { contentPadding ->
                Column(
                    modifier = Modifier.fillMaxSize().padding(contentPadding),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe left and right")
                }
            }
        }
    }
}
```

Example of adding one-handed gesture handler to a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureDefaults
import androidx.wear.compose.material3.onehandedgesture.OneHandedGesturePageIndicatorState
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureVerticalPageIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

val pagerState = rememberPagerState(pageCount = { 10 })
val gestureConfig =
    rememberOneHandedGestureConfiguration(action = OneHandedGestureAction.Primary)
val indicatorState = remember { OneHandedGesturePageIndicatorState() }
val coroutineScope = rememberCoroutineScope()

VerticalPagerScaffold(
    pagerState = pagerState,
    pageIndicator = {
        OneHandedGestureVerticalPageIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            pagerState = pagerState,
        )
    },
) {
    VerticalPager(
        state = pagerState,
        modifier =
            Modifier.oneHandedGesture(
                gestureConfiguration = gestureConfig,
                onGestureLabel = "scroll to the next page",
                onGestureAvailable = {
                    coroutineScope.launch { indicatorState.showIndicator() }
                },
            ) {
                OneHandedGestureDefaults.scrollToNextPage(pagerState)
            },
    ) { page ->
        AnimatedPage(pageIndex = page, pagerState = pagerState) {
            ScreenScaffold { contentPadding ->
                Column(
                    modifier = Modifier.fillMaxSize().padding(contentPadding),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe up and down")
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `gestureConfiguration: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/OneHandedGestureConfiguration` containing the configuration for this gesture. |
| `onGestureLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | Semantic label used by accessibility services to describe the purpose of this gesture. This is highly recommended for ensuring that users with screen readers understand what action will be performed. |
| `showIndicatorDelayMillis: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-long/index.html` | The delay, in milliseconds, before the gesture indicator is shown - i.e. between the gesture becoming the highest-priority gesture for its action and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/onehandedgesture/package-summary#(androidx.compose.ui.Modifier).oneHandedGesture(androidx.wear.compose.material3.onehandedgesture.OneHandedGestureConfiguration,kotlin.String,kotlin.Long,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.coroutines.SuspendFunction0)` being invoked. Must be non-negative. |
| `enabledInAmbient: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the gesture should remain active in ambient mode. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` and an immediate `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Release` when this gesture is triggered. This allows UI components to visually react (such as triggering a touch ripple or pressed state animation) upon gesture activation. |
| `onGestureAvailable: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | A callback invoked by the system to signal that this gesture is currently available as a high-priority action. Developers should use this callback to call showIndicator on the indicator state to trigger the associated visual feedback. |
| `onGesture: suspend () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The callback invoked when the gesture is triggered. See also the [UI Design Guides for One-Handed Gestures](https://developer.android.com/design/ui/wear/guides/patterns/gestures) |

### Modifier.overscroll

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Overscroll.kt+function:overscroll)

```
fun Modifier.overscroll(overscrollEffect: OverscrollEffect?): Modifier
```

Renders overscroll from the provided `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)`.

This modifier attaches the provided `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)`'s `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` to the hierarchy, which renders the actual effect. Note that this modifier is only responsible for the visual part of overscroll - on its own it will not handle input events. In addition to using this modifier you also need to propagate events to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)`, most commonly by using a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`.

Alternatively, you can use a higher level API such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` and provide a custom `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` - these components will both render and provide events to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect`, so you do not need to manually render the effect with this modifier.

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.spring
import androidx.compose.foundation.OverscrollEffect
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberScrollableState
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.overscroll
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.MeasureResult
import androidx.compose.ui.layout.MeasureScope
import androidx.compose.ui.node.DelegatableNode
import androidx.compose.ui.node.LayoutModifierNode
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.Velocity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// our custom offset overscroll that offset the element it is applied to when we hit the bound
// on the scrollable container.
class OffsetOverscrollEffect(val scope: CoroutineScope) : OverscrollEffect {
    private val overscrollOffset = Animatable(0f)

    override fun applyToScroll(
        delta: Offset,
        source: NestedScrollSource,
        performScroll: (Offset) -> Offset,
    ): Offset {
        // in pre scroll we relax the overscroll if needed
        // relaxation: when we are in progress of the overscroll and user scrolls in the
        // different direction = substract the overscroll first
        val sameDirection = sign(delta.y) == sign(overscrollOffset.value)
        val consumedByPreScroll =
            if (abs(overscrollOffset.value) > 0.5 && !sameDirection) {
                val prevOverscrollValue = overscrollOffset.value
                val newOverscrollValue = overscrollOffset.value + delta.y
                if (sign(prevOverscrollValue) != sign(newOverscrollValue)) {
                    // sign changed, coerce to start scrolling and exit
                    scope.launch { overscrollOffset.snapTo(0f) }
                    Offset(x = 0f, y = delta.y + prevOverscrollValue)
                } else {
                    scope.launch { overscrollOffset.snapTo(overscrollOffset.value + delta.y) }
                    delta.copy(x = 0f)
                }
            } else {
                Offset.Zero
            }
        val leftForScroll = delta - consumedByPreScroll
        val consumedByScroll = performScroll(leftForScroll)
        val overscrollDelta = leftForScroll - consumedByScroll
        // if it is a drag, not a fling, add the delta left to our over scroll value
        if (abs(overscrollDelta.y) > 0.5 && source == NestedScrollSource.UserInput) {
            scope.launch {
                // multiply by 0.1 for the sake of parallax effect
                overscrollOffset.snapTo(overscrollOffset.value + overscrollDelta.y * 0.1f)
            }
        }
        return consumedByPreScroll + consumedByScroll
    }

    override suspend fun applyToFling(
        velocity: Velocity,
        performFling: suspend (Velocity) -> Velocity,
    ) {
        val consumed = performFling(velocity)
        // when the fling happens - we just gradually animate our overscroll to 0
        val remaining = velocity - consumed
        overscrollOffset.animateTo(
            targetValue = 0f,
            initialVelocity = remaining.y,
            animationSpec = spring(),
        )
    }

    override val isInProgress: Boolean
        get() = overscrollOffset.value != 0f

    // Create a LayoutModifierNode that offsets by overscrollOffset.value
    override val node: DelegatableNode =
        object : Modifier.Node(), LayoutModifierNode {
            override fun MeasureScope.measure(
                measurable: Measurable,
                constraints: Constraints,
            ): MeasureResult {
                val placeable = measurable.measure(constraints)
                return layout(placeable.width, placeable.height) {
                    val offsetValue = IntOffset(x = 0, y = overscrollOffset.value.roundToInt())
                    placeable.placeRelativeWithLayer(offsetValue.x, offsetValue.y)
                }
            }
        }
}

val offset = remember { mutableStateOf(0f) }
val scope = rememberCoroutineScope()
// Create the overscroll controller
val overscroll = remember(scope) { OffsetOverscrollEffect(scope) }
// let's build a scrollable that scroll until -512 to 512
val scrollStateRange = (-512f).rangeTo(512f)
Box(
    Modifier.size(150.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            state =
                rememberScrollableState { delta ->
                    // use the scroll data and indicate how much this element consumed.
                    val oldValue = offset.value
                    // coerce to our range
                    offset.value = (offset.value + delta).coerceIn(scrollStateRange)

                    offset.value - oldValue // indicate that we consumed what's needed
                },
            // pass the overscroll to the scrollable so the data is updated
            overscrollEffect = overscroll,
        )
        .background(Color.LightGray),
    contentAlignment = Alignment.Center,
) {
    Text(
        offset.value.roundToInt().toString(),
        style = TextStyle(fontSize = 32.sp),
        modifier =
            Modifier
                // show the overscroll only on the text, not the containers (just for fun)
                .overscroll(overscroll),
    )
}
```

| Parameters |
|---|---|
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` to render |

### Modifier.absolutePadding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Padding.kt+function:absolutePadding)

```
fun Modifier.absolutePadding(
    left: Dp = 0.dp,
    top: Dp = 0.dp,
    right: Dp = 0.dp,
    bottom: Dp = 0.dp
): Modifier
```

Apply additional space along each edge of the content in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).absolutePadding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. These paddings are applied without regard to the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/padding.modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to apply relative paddings. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted --- it will cause `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier.absolutePadding(left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp)
            .size(50.dp)
            .background(Color.Blue)
    )
}
```

### Modifier.padding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Padding.kt+function:padding)

```
fun Modifier.padding(all: Dp): Modifier
```

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp)` dp of additional space along each edge of the content, left, top, right and bottom. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted --- it will cause `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.background(color = Color.Gray)) {
    Box(Modifier.padding(all = 20.dp).size(50.dp).background(Color.Blue))
}
```

### Modifier.padding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Padding.kt+function:padding)

```
fun Modifier.padding(paddingValues: PaddingValues): Modifier
```

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues` to the component as additional space along each edge of the content's left, top, right and bottom. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted --- it will cause `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
Box(Modifier.background(color = Color.Gray)) {
    Box(Modifier.padding(innerPadding).size(50.dp).background(Color.Blue))
}
```

### Modifier.padding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Padding.kt+function:padding)

```
fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
```

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp space along the left and right edges of the content, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` dp space along the top and bottom edges. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted --- it will cause `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier.padding(horizontal = 20.dp, vertical = 30.dp)
            .size(50.dp)
            .background(Color.Blue)
    )
}
```

### Modifier.padding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Padding.kt+function:padding)

```
fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
```

Apply additional space along each edge of the content in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. The start and end edges will be determined by the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted --- it will cause `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/offset.modifier#(androidx.compose.ui.Modifier).offset(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.background(color = Color.Gray)) {
    Box(
        Modifier.padding(start = 20.dp, top = 30.dp, end = 20.dp, bottom = 30.dp)
            .size(50.dp)
            .background(Color.Blue)
    )
}
```

### Modifier.paint

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/PainterModifier.kt+function:paint)

```
fun Modifier.paint(
    painter: Painter,
    sizeToIntrinsics: Boolean = true,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Inside,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): Modifier
```

Paint the content using `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.paint
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp

class CustomPainter : Painter() {

    override val intrinsicSize: Size
        get() = Size(300.0f, 300.0f)

    override fun DrawScope.onDraw() {
        drawCircle(center = center, radius = size.minDimension / 2.0f, color = Color.Red)
    }
}

Box(
    modifier =
        Modifier.background(color = Color.Gray)
            .padding(30.dp)
            .background(color = Color.Yellow)
            .paint(CustomPainter())
) {
    /** intentionally empty */
}
```

| Parameters |
|---|---|
| `painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` to be drawn by this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` |
| `sizeToIntrinsics: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | `true` to size the element relative to `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter#intrinsicSize()` |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | specifies alignment of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)` relative to content |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Inside` | strategy for scaling `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)` if its size does not match the content size |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = DefaultAlpha` | opacity of `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)` |
| `colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? = null` | optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter` to apply to `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)` |

### Modifier.placeholder

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Placeholder.kt+function:placeholder)

```
@ExperimentalWearMaterialApi
@Composable
fun Modifier.placeholder(
    placeholderState: PlaceholderState,
    shape: Shape = MaterialTheme.shapes.small,
    color: Color = MaterialTheme.colors.onSurface
            .copy(alpha = 0.1f)
            .compositeOver(MaterialTheme.colors.surface)
): Modifier
```

Draws a placeholder shape over the top of a composable and animates a wipe off effect to remove the placeholder. Typically used whilst content is 'loading' and then 'revealed'.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a label that put placeholders over individual content slots:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }
val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && iconResource != null
}

Chip(
    onClick = { /* Do something */ },
    enabled = true,
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(chipPlaceholderState),
        )
    },
    icon = {
        Box(modifier = Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)) {
            if (iconResource != null) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ChipDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
    colors =
        PlaceholderDefaults.placeholderChipColors(
            originalChipColors = ChipDefaults.primaryChipColors(),
            placeholderState = chipPlaceholderState,
        ),
    modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    iconResource = R.drawable.ic_airplanemode_active_24px
    delay(1000)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a primary and secondary labels that draws another `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` over the top of it when waiting for placeholder data to load:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var secondaryLabelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }

val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && secondaryLabelText.isNotEmpty() && iconResource != null
}
Box {
    if (chipPlaceholderState.isShowContent || chipPlaceholderState.isWipeOff) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Text(
                    text = labelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            secondaryLabel = {
                Text(
                    text = secondaryLabelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            icon = {
                if (iconResource != null) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                        contentDescription = "airplane",
                        modifier =
                            Modifier.wrapContentSize(align = Alignment.Center)
                                .size(ChipDefaults.IconSize),
                    )
                }
            },
            colors = ChipDefaults.gradientBackgroundChipColors(),
            modifier = Modifier.fillMaxWidth(),
        )
    }
    if (!chipPlaceholderState.isShowContent) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            secondaryLabel = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            icon = {
                Box(
                    modifier =
                        Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)
                )
                // Simulate the icon becoming ready after a period of time
                LaunchedEffect(Unit) {
                    delay(2000)
                    iconResource = R.drawable.ic_airplanemode_active_24px
                }
            },
            colors =
                PlaceholderDefaults.placeholderChipColors(
                    placeholderState = chipPlaceholderState
                ),
            modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
        )
    }
}
// Simulate data being loaded after a delay
LaunchedEffect(Unit) {
    delay(2500)
    secondaryLabelText = "A secondary label"
    delay(500)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` determines when to 'show' and 'wipe off' the placeholder.

NOTE: The order of modifiers is important. If you are adding both `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholder.composable#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholderShimmer.composable#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` to the same composable then the shimmer must be first in the modifier chain. Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` composable with both placeholderShimmer and placeholder modifiers.

```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
val chipPlaceholderState = rememberPlaceholderState { labelText.isNotEmpty() }

Text(
    text = labelText,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Center,
    modifier =
        Modifier.width(90.dp)
            .placeholderShimmer(chipPlaceholderState)
            .placeholder(chipPlaceholderState),
)

// Simulate content loading
LaunchedEffect(Unit) {
    delay(3000)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | determines whether the placeholder is visible and controls animation effects for the placeholder. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = MaterialTheme.shapes.small` | the shape to apply to the placeholder |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.onSurface .copy(alpha = 0.1f) .compositeOver(MaterialTheme.colors.surface)` | the color of the placeholder. |

### Modifier.placeholder

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Placeholder.kt+function:placeholder)

```
@Composable
fun Modifier.placeholder(
    placeholderState: PlaceholderState,
    shape: Shape = PlaceholderDefaults.shape,
    color: Color = PlaceholderDefaults.color
): Modifier
```

Modifier.placeholder draws a skeleton shape over a component, for situations when no provisional content (such as cached data) is available. The placeholder skeleton can be displayed instead, while the content is loading. The reveal of the content will be animated when it becomes available (and hidden again if the content becomes unavailable), unless the ReducedMotion setting is enabled, in which case those are instantaneous. NOTE: For animations to work, an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppScaffold.composable#AppScaffold(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` should be used.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(buttonPlaceholderState),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}
```

If there is some cached data for this field, it may be better to show that while loading, see

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("Cached Data") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

// Put placeholderShimmer in the container and placeholder in the elements of the content that
// have no cached data.
FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth(),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}
```

Note that the component should still be sized close to the target, so the final reveal of the content is less disruptive.

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState` | the state used to coordinate several placeholder effects. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = PlaceholderDefaults.shape` | the shape of the placeholder. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PlaceholderDefaults.color` | the color to use in the placeholder. |

### Modifier.placeholderShimmer

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Placeholder.kt+function:placeholderShimmer)

```
@ExperimentalWearMaterialApi
@Composable
fun Modifier.placeholderShimmer(
    placeholderState: PlaceholderState,
    shape: Shape = MaterialTheme.shapes.small,
    color: Color = MaterialTheme.colors.onSurface
): Modifier
```

Modifier to draw a placeholder shimmer over a component. The placeholder shimmer is a 45 degree gradient from Top\|Left of the screen to Bottom\|Right. The shimmer is coordinated via the animation frame clock which orchestrates the shimmer so that every component will shimmer as the gradient progresses across the screen.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a label that put placeholders over individual content slots and then draws a placeholder shimmer over the result:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }
val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && iconResource != null
}

Chip(
    onClick = { /* Do something */ },
    enabled = true,
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(chipPlaceholderState),
        )
    },
    icon = {
        Box(modifier = Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)) {
            if (iconResource != null) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ChipDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
    colors =
        PlaceholderDefaults.placeholderChipColors(
            originalChipColors = ChipDefaults.primaryChipColors(),
            placeholderState = chipPlaceholderState,
        ),
    modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    iconResource = R.drawable.ic_airplanemode_active_24px
    delay(1000)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` with icon and a primary and secondary labels that draws another `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)` over the top of it when waiting for placeholder data to load and then draws a placeholder shimmer over the top:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.PlaceholderDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var secondaryLabelText by remember { mutableStateOf("") }
var iconResource: Int? by remember { mutableStateOf(null) }

val chipPlaceholderState = rememberPlaceholderState {
    labelText.isNotEmpty() && secondaryLabelText.isNotEmpty() && iconResource != null
}
Box {
    if (chipPlaceholderState.isShowContent || chipPlaceholderState.isWipeOff) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Text(
                    text = labelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            secondaryLabel = {
                Text(
                    text = secondaryLabelText,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier.fillMaxWidth(),
                )
            },
            icon = {
                if (iconResource != null) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                        contentDescription = "airplane",
                        modifier =
                            Modifier.wrapContentSize(align = Alignment.Center)
                                .size(ChipDefaults.IconSize),
                    )
                }
            },
            colors = ChipDefaults.gradientBackgroundChipColors(),
            modifier = Modifier.fillMaxWidth(),
        )
    }
    if (!chipPlaceholderState.isShowContent) {
        Chip(
            onClick = { /* Do something */ },
            enabled = true,
            label = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            secondaryLabel = {
                Box(
                    modifier =
                        Modifier.fillMaxWidth()
                            .height(16.dp)
                            .padding(top = 1.dp, bottom = 1.dp)
                            .placeholder(placeholderState = chipPlaceholderState)
                )
            },
            icon = {
                Box(
                    modifier =
                        Modifier.size(ChipDefaults.IconSize).placeholder(chipPlaceholderState)
                )
                // Simulate the icon becoming ready after a period of time
                LaunchedEffect(Unit) {
                    delay(2000)
                    iconResource = R.drawable.ic_airplanemode_active_24px
                }
            },
            colors =
                PlaceholderDefaults.placeholderChipColors(
                    placeholderState = chipPlaceholderState
                ),
            modifier = Modifier.fillMaxWidth().placeholderShimmer(chipPlaceholderState),
        )
    }
}
// Simulate data being loaded after a delay
LaunchedEffect(Unit) {
    delay(2500)
    secondaryLabelText = "A secondary label"
    delay(500)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

NOTE: The order of modifiers is important. If you are adding both `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholder.composable#(androidx.compose.ui.Modifier).placeholder(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/placeholderShimmer.composable#(androidx.compose.ui.Modifier).placeholderShimmer(androidx.wear.compose.material.PlaceholderState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color)` to the same composable then the shimmer must be before in the modifier chain. Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` composable with both placeholderShimmer and placeholder modifiers.

```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.placeholder
import androidx.wear.compose.material.placeholderShimmer
import androidx.wear.compose.material.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
val chipPlaceholderState = rememberPlaceholderState { labelText.isNotEmpty() }

Text(
    text = labelText,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Center,
    modifier =
        Modifier.width(90.dp)
            .placeholderShimmer(chipPlaceholderState)
            .placeholder(chipPlaceholderState),
)

// Simulate content loading
LaunchedEffect(Unit) {
    delay(3000)
    labelText = "A label"
}
if (!chipPlaceholderState.isShowContent) {
    LaunchedEffect(chipPlaceholderState) { chipPlaceholderState.startPlaceholderAnimation() }
}
```

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/PlaceholderState` | the current placeholder state that determine whether the placeholder shimmer should be shown. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = MaterialTheme.shapes.small` | the shape of the component. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.onSurface` | the color to use in the shimmer. |

### Modifier.placeholderShimmer

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Placeholder.kt+function:placeholderShimmer)

```
@Composable
fun Modifier.placeholderShimmer(
    placeholderState: PlaceholderState,
    shape: Shape = PlaceholderDefaults.shape,
    color: Color = PlaceholderDefaults.shimmerColor
): Modifier
```

Modifier.placeholderShimmer draws a periodic shimmer over content, indicating to the user that contents are loading or potentially out of date. The placeholder shimmer is a 45 degree gradient from Top\|Left of the screen to Bottom\|Right. The shimmer is coordinated via the animation frame clock which orchestrates the shimmer so that every component will shimmer as the gradient progresses across the screen. NOTE: For animations to work, an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppScaffold.composable#AppScaffold(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` should be used.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` with icon and a label that put placeholders over individual content slots and then draws a placeholder shimmer over the result:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(buttonPlaceholderState),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}
```

Example of a simple text placeholder:

```kotlin
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
val placeholderState = rememberPlaceholderState(isVisible = labelText.isEmpty())

Text(
    text = labelText,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Center,
    modifier =
        Modifier.width(90.dp)
            .placeholderShimmer(placeholderState)
            .placeholder(placeholderState),
)

// Simulate content loading
LaunchedEffect(Unit) {
    delay(3000)
    labelText = "A label"
}
```

| Parameters |
|---|---|
| `placeholderState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PlaceholderState` | the current placeholder state that determine whether the placeholder shimmer should be shown. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = PlaceholderDefaults.shape` | the shape of the component. |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PlaceholderDefaults.shimmerColor` | the color to use in the shimmer. |

### Modifier.placement

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Placement.kt+function:placement)

```
@ExperimentalFoundationStyleApi
fun Modifier.placement(block: PlacementModifierScope.() -> Unit): Modifier
```

Declares a callback, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).placement(kotlin.Function1)`, that allows controlling size and placement.The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override values provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).placement(kotlin.Function1)`, forcing the content to be either smaller or larger.

| Parameters |
|---|---|
| `block: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/PlacementModifierScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called during layout to determine the size of blocks. This l |

### Modifier.stylePlacement

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/Placement.kt+function:stylePlacement)

```
@ExperimentalFoundationStyleApi
fun Modifier.stylePlacement(styleResolver: StyleResolver): Modifier
```

Maps properties set in a style and resolved by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).stylePlacement(androidx.compose.foundation.style.StyleResolver)` to values passed to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/placement.modifier#(androidx.compose.ui.Modifier).placement(kotlin.Function1)` modifier.

NOTE: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/stylePlacement.modifier#(androidx.compose.ui.Modifier).stylePlacement(androidx.compose.foundation.style.StyleResolver)` is a transitionary modifier that will be removed before styles becomes stable. It helps transition away from the experimental version of styles in 1.11 and 1.12.

The properties used by this modifier are being replace by design-system specific properties defined in design system layers above foundation, such as Material.

### Modifier.pointerHoverIcon

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/PointerIcon.kt+function:pointerHoverIcon)

```
fun Modifier.pointerHoverIcon(
    icon: PointerIcon,
    overrideDescendants: Boolean = false
): Modifier
```

Modifier that lets a developer define a pointer icon to display when the cursor is hovered over the element. When `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerHoverIcon(androidx.compose.ui.input.pointer.PointerIcon,kotlin.Boolean)` is set to true, descendants cannot override the pointer icon using this modifier.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon

Column(Modifier.pointerHoverIcon(PointerIcon.Crosshair)) {
    SelectionContainer {
        Column {
            Text("Selectable text")
            Text(
                modifier = Modifier.pointerHoverIcon(PointerIcon.Hand, true),
                text = "Selectable text with hand",
            )
        }
    }
    Text("Just text with global pointerIcon")
}
```

| Parameters |
|---|---|
| `icon: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerIcon` | the icon to set |
| `overrideDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | when false (by default), descendants are able to set their own pointer icon. If true, no descendants under this parent are eligible to change the icon (it will be set to the this (the parent's) icon). |

### Modifier.stylusHoverIcon

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/PointerIcon.kt+function:stylusHoverIcon)

```
fun Modifier.stylusHoverIcon(
    icon: PointerIcon,
    overrideDescendants: Boolean = false,
    touchBoundsExpansion: DpTouchBoundsExpansion? = null
): Modifier
```

Modifier that lets a developer define a pointer icon to display when a stylus is hovered over the element. When `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).stylusHoverIcon(androidx.compose.ui.input.pointer.PointerIcon,kotlin.Boolean,androidx.compose.ui.node.DpTouchBoundsExpansion)` is set to true, descendants cannot override the pointer icon using this modifier.

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.stylusHoverIcon
import androidx.compose.ui.unit.dp

Box(
    Modifier.requiredSize(200.dp)
        .border(BorderStroke(2.dp, SolidColor(Color.Red)))
        .stylusHoverIcon(PointerIcon.Crosshair)
) {
    Text(text = "crosshair icon")
    Box(
        Modifier.padding(20.dp)
            .requiredSize(150.dp)
            .border(BorderStroke(2.dp, SolidColor(Color.Black)))
            .stylusHoverIcon(PointerIcon.Text)
    ) {
        Text(text = "text icon")
        Box(
            Modifier.padding(40.dp)
                .requiredSize(100.dp)
                .border(BorderStroke(2.dp, SolidColor(Color.Blue)))
                .stylusHoverIcon(PointerIcon.Hand)
        ) {
            Text(text = "hand icon")
        }
    }
}
```

| Parameters |
|---|---|
| `icon: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerIcon` | the icon to set |
| `overrideDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | when false (by default), descendants are able to set their own pointer icon. If true, no descendants under this parent are eligible to change the icon (it will be set to the this (the parent's) icon). |
| `touchBoundsExpansion: https://developer.android.com/reference/kotlin/androidx/compose/ui/node/DpTouchBoundsExpansion? = null` | amount by which the element's bounds is expanded |

### Modifier.motionEventSpy

android Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/PointerInteropFilter.android.kt+function:motionEventSpy)

```
fun Modifier.motionEventSpy(watcher: (motionEvent: MotionEvent) -> Unit): Modifier
```

Calls `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)` with each `https://developer.android.com/reference/android/view/MotionEvent.html` that the layout area or any child `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` receives. The `https://developer.android.com/reference/android/view/MotionEvent.html` may or may not have been transformed to the local coordinate system. The Compose View will be considered as handling the `https://developer.android.com/reference/android/view/MotionEvent.html` in the area that the `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/motionEventSpy.modifier#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)` is active.

This method can only be used to observe `https://developer.android.com/reference/android/view/MotionEvent.html`s and can not be used to capture an event stream.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)` is called during the `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerEventPass#Initial` pass.

Developers should use `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` to handle pointer input processing within Compose. `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/motionEventSpy.modifier#(androidx.compose.ui.Modifier).motionEventSpy(kotlin.Function1)` is only useful as part of Android View interoperability.

If you need to handle and consume `https://developer.android.com/reference/android/view/MotionEvent.html`s, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInteropFilter.modifier#(androidx.compose.ui.Modifier).pointerInteropFilter(androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent,kotlin.Function1)`.

### Modifier.pointerInteropFilter

android Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/PointerInteropFilter.android.kt+function:pointerInteropFilter)

```
fun Modifier.pointerInteropFilter(
    requestDisallowInterceptTouchEvent: RequestDisallowInterceptTouchEvent? = null,
    onTouchEvent: (MotionEvent) -> Boolean
): Modifier
```

A special PointerInputModifier that provides access to the underlying `https://developer.android.com/reference/android/view/MotionEvent.html`s originally dispatched to Compose. Prefer `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` and use this only for interoperation with existing code that consumes `https://developer.android.com/reference/android/view/MotionEvent.html`s.

While the main intent of this Modifier is to allow arbitrary code to access the original `https://developer.android.com/reference/android/view/MotionEvent.html` dispatched to Compose, for completeness, analogs are provided to allow arbitrary code to interact with the system as if it were an Android View.

This includes 2 APIs,

1. `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInteropFilter(androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent,kotlin.Function1)` has a Boolean return type which is akin to the return type of `https://developer.android.com/reference/android/view/View.html#onTouchEvent(android.view.MotionEvent)`. If the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInteropFilter(androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent,kotlin.Function1)` returns true, it will continue to receive the event stream (unless the event stream has been intercepted) and if it returns false, it will not.

2. `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInteropFilter(androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent,kotlin.Function1)` is a lambda that you can optionally provide so that you can later call it (yes, in this case, you call the lambda that you provided) which is akin to calling `https://developer.android.com/reference/android/view/ViewParent.html#requestDisallowInterceptTouchEvent(boolean)`. When this is called, any associated ancestors in the tree that abide by the contract will act accordingly and will not intercept the even stream.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#onTouchEvent(android.view.MotionEvent)` |   |
| `https://developer.android.com/reference/android/view/ViewParent.html#requestDisallowInterceptTouchEvent(boolean)` |   |

### Modifier.preferKeepClear

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/PreferKeepClear.android.kt+function:preferKeepClear)

```
fun Modifier.preferKeepClear(): Modifier
```

Mark the layout rectangle as preferring to stay clear of floating windows.

This Modifier only has an effect on SDK 33 and above.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setPreferKeepClearRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.preferKeepClear

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/PreferKeepClear.android.kt+function:preferKeepClear)

```
fun Modifier.preferKeepClear(rectProvider: (LayoutCoordinates) -> Rect): Modifier
```

Mark a rectangle within the local layout coordinates preferring to stay clear of floating windows. After layout, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).preferKeepClear(kotlin.Function1)` is called to determine the `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` to mark as keep clear.

The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`'s location in the layout is passed as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).preferKeepClear(kotlin.Function1)`'s parameter.

This Modifier only has an effect on SDK 33 and above.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setPreferKeepClearRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.progressSemantics

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ProgressSemantics.kt+function:progressSemantics)

```
fun Modifier.progressSemantics(): Modifier
```

Contains the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` required for an indeterminate progress indicator, that represents the fact of the in-progress operation.

If you need determinate progress 0.0 to 1.0, consider using overload with the progress parameter.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.progressSemantics
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

Box(Modifier.progressSemantics().background(color = Color.Cyan)) {
    Text("Operation is on progress")
}
```

### Modifier.progressSemantics

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ProgressSemantics.kt+function:progressSemantics)

```
fun Modifier.progressSemantics(
    value: Float,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: @IntRange(from = 0) Int = 0
): Modifier
```

Contains the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` required for a determinate progress indicator or the progress part of a slider, that represents progress within `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)`. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)` outside of this range will be coerced into this range.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.progressSemantics
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val progress = 0.5f // emulate progress from some state
Box(
    Modifier.progressSemantics(progress)
        .size((progress * 100).dp, 4.dp)
        .background(color = Color.Cyan)
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | current value of the ProgressIndicator/Slider. If outside of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)` provided, value will be coerced to this range. Must not be NaN. |
| `valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = 0f..1f` | range of values that value can take. Passed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).progressSemantics(kotlin.Float,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)` will be coerced to this range |
| `steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | if greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, any value from the range specified is allowed. Must not be negative. |

### Modifier.pullRefreshIndicatorTransform

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/pullrefresh/PullRefreshIndicatorTransform.kt+function:pullRefreshIndicatorTransform)

```
@ExperimentalMaterialApi
fun Modifier.pullRefreshIndicatorTransform(
    state: PullRefreshState,
    scale: Boolean = false
): Modifier
```

A modifier for translating the position and scaling the size of a pull-to-refresh indicator based on the given `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState`.

```kotlin
import androidx.compose.animation.core.animate
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.ListItem
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.pullRefreshIndicatorTransform
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }

fun refresh() = refreshScope.launch {
    refreshing = true
    delay(1500)
    itemCount += 5
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)
val rotation = animateFloatAsState(state.progress * 120)

Box(Modifier.fillMaxSize().pullRefresh(state)) {
    LazyColumn {
        if (!refreshing) {
            items(itemCount) { ListItem { Text(text = "Item ${itemCount - it}") } }
        }
    }

    Surface(
        modifier =
            Modifier.size(40.dp)
                .align(Alignment.TopCenter)
                .pullRefreshIndicatorTransform(state)
                .rotate(rotation.value),
        shape = RoundedCornerShape(10.dp),
        color = Color.DarkGray,
        elevation = if (state.progress > 0 || refreshing) 20.dp else 0.dp,
    ) {
        Box {
            if (refreshing) {
                CircularProgressIndicator(
                    modifier = Modifier.align(Alignment.Center).size(25.dp),
                    color = Color.White,
                    strokeWidth = 3.dp,
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState` | The `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState` which determines the position of the indicator. |
| `scale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | A boolean controlling whether the indicator's size scales with pull progress or not. |

### Modifier.pullRefresh

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/pullrefresh/PullRefresh.kt+function:pullRefresh)

```
@ExperimentalMaterialApi
fun Modifier.pullRefresh(state: PullRefreshState, enabled: Boolean = true): Modifier
```

A nested scroll modifier that provides scroll events to `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(androidx.compose.material.pullrefresh.PullRefreshState,kotlin.Boolean)`.

Note that this modifier must be added above a scrolling container, such as a lazy column, in order to receive scroll events. For example:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.ListItem
import androidx.compose.material.Text
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }

fun refresh() = refreshScope.launch {
    refreshing = true
    delay(1500)
    itemCount += 5
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)

Box(Modifier.pullRefresh(state)) {
    LazyColumn(Modifier.fillMaxSize()) {
        if (!refreshing) {
            items(itemCount) { ListItem { Text(text = "Item ${itemCount - it}") } }
        }
    }

    PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState` | The `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/PullRefreshState` associated with this pull-to-refresh component. The state will be updated by this modifier. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | If not enabled, all scroll delta and fling velocity will be ignored. |

### Modifier.pullRefresh

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/pullrefresh/PullRefresh.kt+function:pullRefresh)

```
@ExperimentalMaterialApi
fun Modifier.pullRefresh(
    onPull: (pullDelta: Float) -> Float,
    onRelease: suspend (flingVelocity: Float) -> Float,
    enabled: Boolean = true
): Modifier
```

A nested scroll modifier that provides `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` callbacks to aid building custom pull refresh components.

Note that this modifier must be added above a scrolling container, such as a lazy column, in order to receive scroll events. For example:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animate
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.LinearProgressIndicator
import androidx.compose.material.ListItem
import androidx.compose.material.Text
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp

val refreshScope = rememberCoroutineScope()
val threshold = with(LocalDensity.current) { 160.dp.toPx() }

var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }
var currentDistance by remember { mutableStateOf(0f) }

val progress = currentDistance / threshold

fun refresh() = refreshScope.launch {
    refreshing = true
    delay(1500)
    itemCount += 5
    refreshing = false
}

fun onPull(pullDelta: Float): Float =
    when {
        refreshing -> 0f
        else -> {
            val newOffset = (currentDistance + pullDelta).coerceAtLeast(0f)
            val dragConsumed = newOffset - currentDistance
            currentDistance = newOffset
            dragConsumed
        }
    }

fun onRelease(velocity: Float): Float {
    if (refreshing) return 0f // Already refreshing - don't call refresh again.
    if (currentDistance > threshold) refresh()

    refreshScope.launch {
        animate(initialValue = currentDistance, targetValue = 0f) { value, _ ->
            currentDistance = value
        }
    }

    // Only consume if the fling is downwards and the indicator is visible
    return if (velocity > 0f && currentDistance > 0f) {
        velocity
    } else {
        0f
    }
}

Box(Modifier.pullRefresh(::onPull, ::onRelease)) {
    LazyColumn {
        if (!refreshing) {
            items(itemCount) { ListItem { Text(text = "Item ${itemCount - it}") } }
        }
    }

    // Custom progress indicator
    AnimatedVisibility(visible = (refreshing || progress > 0)) {
        if (refreshing) {
            LinearProgressIndicator(Modifier.fillMaxWidth())
        } else {
            LinearProgressIndicator(progress, Modifier.fillMaxWidth())
        }
    }
}
```

| Parameters |
|---|---|
| `onPull: (pullDelta: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Callback for dispatching vertical scroll delta, takes float pullDelta as argument. Positive delta (pulling down) is dispatched only if the child does not consume it (i.e. pulling down despite being at the top of a scrollable component), whereas negative delta (swiping up) is dispatched first (in case it is needed to push the indicator back up), and then the unconsumed delta is passed on to the child. The callback returns how much delta was consumed. |
| `onRelease: suspend (flingVelocity: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Callback for when drag is released, takes float flingVelocity as argument. The callback returns how much velocity was consumed - in most cases this should only consume velocity if pull refresh has been dragged already and the velocity is positive (the fling is downwards), as an upwards fling should typically still scroll a scrollable component beneath the pullRefresh. This is invoked before any remaining velocity is passed to the child. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | If not enabled, all scroll delta and fling velocity will be ignored and neither `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` nor `https://developer.android.com/reference/kotlin/androidx/compose/material/pullrefresh/package-summary#(androidx.compose.ui.Modifier).pullRefresh(kotlin.Function1,kotlin.coroutines.SuspendFunction1,kotlin.Boolean)` will be invoked. |

### Modifier.pullToRefresh

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/pulltorefresh/PullToRefresh.kt+function:pullToRefresh)

```
fun Modifier.pullToRefresh(
    isRefreshing: Boolean,
    state: PullToRefreshState,
    enabled: Boolean = true,
    threshold: Dp = PullToRefreshDefaults.PositionalThreshold,
    onRefresh: () -> Unit
): Modifier
```

A Modifier that adds nested scroll to a container to support a pull-to-refresh gesture. When the user pulls a distance greater than `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#(androidx.compose.ui.Modifier).pullToRefresh(kotlin.Boolean,androidx.compose.material3.pulltorefresh.PullToRefreshState,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function0)` and releases the gesture, `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#(androidx.compose.ui.Modifier).pullToRefresh(kotlin.Boolean,androidx.compose.material3.pulltorefresh.PullToRefreshState,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function0)` is invoked. `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshBox.composable#PullToRefreshBox(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.pulltorefresh.PullToRefreshState,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function1)` applies this automatically.

| Parameters |
|---|---|
| `isRefreshing: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether a refresh is occurring or not, if there is no gesture in progress when isRefreshing is false the `state.distanceFraction` will animate to 0f, otherwise it will animate to 1f |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshState` | state that keeps track of the distance pulled |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether nested scroll events should be consumed by this modifier |
| `threshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = PullToRefreshDefaults.PositionalThreshold` | how much distance can be scrolled down before `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#(androidx.compose.ui.Modifier).pullToRefresh(kotlin.Boolean,androidx.compose.material3.pulltorefresh.PullToRefreshState,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function0)` is invoked |
| `onRefresh: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback that is invoked when the distance pulled is greater than `https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#(androidx.compose.ui.Modifier).pullToRefresh(kotlin.Boolean,androidx.compose.material3.pulltorefresh.PullToRefreshState,kotlin.Boolean,androidx.compose.ui.unit.Dp,kotlin.Function0)` |

### Modifier.rangeSemantics

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/RangeSemantics.kt+function:rangeSemantics)

```
fun Modifier.rangeSemantics(
    value: Float,
    enabled: Boolean,
    onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int
): Modifier
```

Modifier to add semantics signifying progress of the Stepper/Slider.

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Current value of the ProgressIndicator/Slider. If outside of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)` provided, value will be coerced to this range. Must not be NaN. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | If false then semantics will not be added. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda which updates `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)`. |
| `valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>` | Range of values that value can take. Passed `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)` will be coerced to this range. |
| `steps: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | If greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, any value from the range specified is allowed. Must not be negative. |

### Modifier.contentReceiver

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/content/ReceiveContent.kt+function:contentReceiver)

```
@ExperimentalFoundationApi
fun Modifier.contentReceiver(
    receiveContentListener: ReceiveContentListener
): Modifier
```

Configures the current node and any children nodes as a Content Receiver.

Content in this context refers to a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/TransferableContent` that could be received from another app through Drag-and-Drop, Copy/Paste, or from the Software Keyboard.

There is no pre-filtering for the received content by media type, e.g. software Keyboard would assume that the app can handle any content that's sent to it. Therefore, it's crucial to check the received content's type and other related information before reading and processing it. Please refer to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/package-summary#(androidx.compose.foundation.content.TransferableContent).hasMediaType(androidx.compose.foundation.content.MediaType)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/TransferableContent#clipMetadata()` to learn more about how to do proper checks on the received item.

Note that only `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/input/TextFieldState` override of the text field supports being a content receiver.

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.content.MediaType
import androidx.compose.foundation.content.ReceiveContentListener
import androidx.compose.foundation.content.TransferableContent
import androidx.compose.foundation.content.consume
import androidx.compose.foundation.content.contentReceiver
import androidx.compose.foundation.content.hasMediaType
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap

val state = rememberTextFieldState()
var images by remember { mutableStateOf<List<ImageBitmap>>(emptyList()) }
var dragging by remember { mutableStateOf(false) }
var hovering by remember { mutableStateOf(false) }
Column {
    Row { images.forEach { Image(bitmap = it, contentDescription = null) } }
    // Note that only TextFieldState override of the text field supports contentReceiver
    BasicTextField(
        state = state,
        modifier =
            Modifier.background(
                    when {
                        dragging -> Color.Red
                        hovering -> Color.Green
                        else -> MaterialTheme.colorScheme.background
                    }
                )
                .contentReceiver(
                    receiveContentListener =
                        object : ReceiveContentListener {
                            override fun onDragStart() {
                                dragging = true
                            }

                            override fun onDragEnd() {
                                hovering = false
                                dragging = false
                            }

                            override fun onDragEnter() {
                                hovering = true
                            }

                            override fun onDragExit() {
                                hovering = false
                            }

                            override fun onReceive(
                                transferableContent: TransferableContent
                            ): TransferableContent? {
                                if (!transferableContent.hasMediaType(MediaType.Image)) {
                                    return transferableContent
                                }
                                val newImages = mutableListOf<ImageBitmap>()
                                return transferableContent
                                    .consume { item ->
                                        // only consume this item if we can read an imageBitmap
                                        item.readImageBitmap()?.let {
                                            newImages += it
                                            true
                                        } ?: false
                                    }
                                    .also { images = newImages }
                            }
                        }
                ),
    )
}
```

| Parameters |
|---|---|
| `receiveContentListener: https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/ReceiveContentListener` | Listener to respond to the receive event. This interface also includes a set of callbacks for certain Drag-and-Drop state changes. Please checkout `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/ReceiveContentListener` docs for an explanation of each callback. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/TransferableContent` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/content/package-summary#(androidx.compose.foundation.content.TransferableContent).hasMediaType(androidx.compose.foundation.content.MediaType)` |   |

### Modifier.onPreRotaryScrollEvent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/rotary/RotaryInputModifier.kt+function:onPreRotaryScrollEvent)

```
fun Modifier.onPreRotaryScrollEvent(
    onPreRotaryScrollEvent: (RotaryScrollEvent) -> Boolean
): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`s if it (or one of its children) is focused.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color.Companion.White
import androidx.compose.ui.input.rotary.onPreRotaryScrollEvent
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp

MaterialTheme(colorScheme = darkColorScheme()) {
    val rowScrollState = rememberScrollState()
    val columnScrollState = rememberScrollState()
    val coroutineScope = rememberCoroutineScope()
    val focusRequester = remember { FocusRequester() }
    var interceptScroll by remember { mutableStateOf(false) }
    Column(
        Modifier.onPreRotaryScrollEvent {
                // You can intercept an event before it is sent to the child.
                if (interceptScroll) {
                    coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
                    // return true to consume this event.
                    true
                } else {
                    // return false to ignore this event and continue propagation to the child.
                    false
                }
            }
            .onRotaryScrollEvent {
                // If the child does not use the scroll, we get notified here.
                coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
                true
            }
    ) {
        Row(
            modifier = Modifier.align(CenterHorizontally),
            verticalAlignment = CenterVertically,
        ) {
            Text(
                modifier = Modifier.width(70.dp),
                text = if (interceptScroll) "Row" else "Column",
                style = TextStyle(color = White),
            )
            Switch(checked = interceptScroll, onCheckedChange = { interceptScroll = it })
        }
        Row(modifier = Modifier.fillMaxWidth().horizontalScroll(rowScrollState)) {
            repeat(100) {
                Text(
                    text = "row item $it ",
                    modifier = Modifier.align(CenterVertically),
                    color = White,
                )
            }
        }
        Column(
            modifier =
                Modifier.fillMaxWidth()
                    .verticalScroll(columnScrollState)
                    .onRotaryScrollEvent {
                        coroutineScope.launch {
                            columnScrollState.scrollBy(it.verticalScrollPixels)
                        }
                        true
                    }
                    .focusRequester(focusRequester)
                    .focusable()
        ) {
            repeat(100) {
                Text(
                    text = "column item $it",
                    modifier = Modifier.align(CenterHorizontally),
                    color = White,
                )
            }
        }
    }

    LaunchedEffect(Unit) { focusRequester.requestFocus() }
}
```

| Parameters |
|---|---|
| `onPreRotaryScrollEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the rotary button on a wear device. It gives ancestors of a focused component the chance to intercept a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`. When the user rotates the side button on a wear device, a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent` is sent to the focused item. Before reaching the focused item, this event starts at the root composable, and propagates down the hierarchy towards the focused item. It invokes any `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/onPreRotaryScrollEvent.modifier#(androidx.compose.ui.Modifier).onPreRotaryScrollEvent(kotlin.Function1)`s it encounters on ancestors of the focused item. After reaching the focused item, the event propagates up the hierarchy back towards the parent. It invokes any `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/onRotaryScrollEvent.modifier#(androidx.compose.ui.Modifier).onRotaryScrollEvent(kotlin.Function1)`s it encounters on its way back. Return true to indicate that you consumed the event and want to stop propagation of this event. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | true if the event is consumed, false otherwise. |

### Modifier.onRotaryScrollEvent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/rotary/RotaryInputModifier.kt+function:onRotaryScrollEvent)

```
fun Modifier.onRotaryScrollEvent(
    onRotaryScrollEvent: (RotaryScrollEvent) -> Boolean
): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`s if it (or one of its children) is focused.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color.Companion.White
import androidx.compose.ui.input.rotary.onRotaryScrollEvent

val scrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
Column(
    modifier =
        Modifier.fillMaxWidth()
            .verticalScroll(scrollState)
            .onRotaryScrollEvent {
                coroutineScope.launch {
                    scrollState.scrollTo(
                        (scrollState.value + it.verticalScrollPixels).roundToInt()
                    )
                }
                true
            }
            .focusRequester(focusRequester)
            .focusable()
) {
    repeat(100) {
        Text(text = "item $it", modifier = Modifier.align(CenterHorizontally), color = White)
    }
}

LaunchedEffect(Unit) { focusRequester.requestFocus() }
```

This sample demonstrates how a parent can add an `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/onRotaryScrollEvent.modifier#(androidx.compose.ui.Modifier).onRotaryScrollEvent(kotlin.Function1)` modifier to gain access to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent` when a child does not consume it:

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color.Companion.White
import androidx.compose.ui.input.rotary.onPreRotaryScrollEvent
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp

MaterialTheme(colorScheme = darkColorScheme()) {
    val rowScrollState = rememberScrollState()
    val columnScrollState = rememberScrollState()
    val coroutineScope = rememberCoroutineScope()
    val focusRequester = remember { FocusRequester() }
    var interceptScroll by remember { mutableStateOf(false) }
    Column(
        Modifier.onPreRotaryScrollEvent {
                // You can intercept an event before it is sent to the child.
                if (interceptScroll) {
                    coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
                    // return true to consume this event.
                    true
                } else {
                    // return false to ignore this event and continue propagation to the child.
                    false
                }
            }
            .onRotaryScrollEvent {
                // If the child does not use the scroll, we get notified here.
                coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
                true
            }
    ) {
        Row(
            modifier = Modifier.align(CenterHorizontally),
            verticalAlignment = CenterVertically,
        ) {
            Text(
                modifier = Modifier.width(70.dp),
                text = if (interceptScroll) "Row" else "Column",
                style = TextStyle(color = White),
            )
            Switch(checked = interceptScroll, onCheckedChange = { interceptScroll = it })
        }
        Row(modifier = Modifier.fillMaxWidth().horizontalScroll(rowScrollState)) {
            repeat(100) {
                Text(
                    text = "row item $it ",
                    modifier = Modifier.align(CenterVertically),
                    color = White,
                )
            }
        }
        Column(
            modifier =
                Modifier.fillMaxWidth()
                    .verticalScroll(columnScrollState)
                    .onRotaryScrollEvent {
                        coroutineScope.launch {
                            columnScrollState.scrollBy(it.verticalScrollPixels)
                        }
                        true
                    }
                    .focusRequester(focusRequester)
                    .focusable()
        ) {
            repeat(100) {
                Text(
                    text = "column item $it",
                    modifier = Modifier.align(CenterHorizontally),
                    color = White,
                )
            }
        }
    }

    LaunchedEffect(Unit) { focusRequester.requestFocus() }
}
```

| Parameters |
|---|---|
| `onRotaryScrollEvent: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the rotary side button or the bezel on a wear device. While implementing this callback, return true to stop propagation of this event. If you return false, the event will be sent to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/onRotaryScrollEvent.modifier#(androidx.compose.ui.Modifier).onRotaryScrollEvent(kotlin.Function1)`'s parent. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | true if the event is consumed, false otherwise. Here is an example of a scrollable container that scrolls in response to `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/rotary/RotaryScrollEvent`s. |

### Modifier.rotaryScrollable

android Artifact: [androidx.wear.compose:compose-foundation](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/foundation/rotary/RotaryScrollable.kt+function:rotaryScrollable)

```
fun Modifier.rotaryScrollable(
    behavior: RotaryScrollableBehavior,
    focusRequester: FocusRequester,
    reverseDirection: Boolean = false,
    overscrollEffect: OverscrollEffect? = null
): Modifier
```

A modifier which connects rotary events with scrollable containers such as Column, LazyList and others. `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)` has built-in rotary support, and accepts `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableBehavior` directly as a parameter.

This modifier handles rotary input devices, used for scrolling. These devices can be categorized as high-resolution or low-resolution based on their precision.

- High-res devices: Offer finer control and can detect smaller rotations. This allows for more precise adjustments during scrolling. One example of a high-res device is the crown (also known as rotating side button), located on the side of the watch.

- Low-res devices: Have less granular control, registering larger rotations at a time. Scrolling behavior is adapted to compensate for these larger jumps. Examples include physical or virtual bezels, positioned around the screen.

This modifier supports rotary scrolling and snapping. The behaviour is configured by the provided `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableBehavior`: either provide `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableDefaults#behavior(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` for scrolling with/without fling or pass `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableDefaults#snapBehavior(androidx.compose.foundation.gestures.ScrollableState,androidx.wear.compose.foundation.rotary.RotarySnapLayoutInfoProvider,androidx.compose.ui.unit.Dp,kotlin.Boolean,kotlin.Float)` when snap is required.

The default scroll direction of this modifier is aligned with the scroll direction of the `Modifier.verticalScroll` and `Modifier.horizontalScroll`, (please be aware that `Modifier.scrollable` has the opposite direction by default).

To keep the scroll direction aligned, `reverseDirection` flag should have the same value as the `reverseScrolling` parameter in `Modifier.verticalScroll` and `Modifier.horizontalScroll`, and the opposite value to the `reverseDirection` parameter used in `Modifier.scrollable`. When used for horizontal scrolling, RTL/LTR orientations should be taken into account, as these can affect the expected scroll behavior. It's recommended to use `ScrollableDefaults.reverseDirection` for handling LTR/RTL layouts for horizontal scrolling.

This overload provides the access to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that defines the behaviour of the rotary over scrolling logic. Use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberOverscrollEffect.composable#rememberOverscrollEffect()` to create an instance of the current provided overscroll implementation.

Example of scrolling with fling:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.rotaryScrollable
import androidx.wear.compose.material.Text

val scrollableState = rememberLazyListState()
val focusRequester = remember { FocusRequester() }
LazyColumn(
    modifier =
        Modifier.fillMaxSize()
            .requestFocusOnHierarchyActive()
            .rotaryScrollable(
                behavior = RotaryScrollableDefaults.behavior(scrollableState),
                focusRequester = focusRequester,
            ),
    horizontalAlignment = Alignment.CenterHorizontally,
    state = scrollableState,
) {
    items(300) {
        BasicText(
            text = "item $it",
            modifier = Modifier.background(Color.Gray),
            style = TextStyle.Default.copy(),
        )
    }
}
```

Example of scrolling with snap:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastSumBy
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.RotarySnapLayoutInfoProvider
import androidx.wear.compose.foundation.rotary.rotaryScrollable
import androidx.wear.compose.material.Text

val scrollableState = rememberLazyListState()
val focusRequester = remember { FocusRequester() }
LazyColumn(
    modifier =
        Modifier.fillMaxSize()
            .requestFocusOnHierarchyActive()
            .rotaryScrollable(
                behavior =
                    RotaryScrollableDefaults.snapBehavior(
                        scrollableState,
                        // This sample has a custom implementation of
                        // RotarySnapLayoutInfoProvider which is required for snapping behavior.
                        // ScalingLazyColumn has it built-in, so it's not required there.
                        remember(scrollableState) {
                            object : RotarySnapLayoutInfoProvider {

                                override val averageItemSize: Float
                                    get() {
                                        val items = scrollableState.layoutInfo.visibleItemsInfo
                                        return (items.fastSumBy { it.size } / items.size)
                                            .toFloat()
                                    }

                                override val currentItemIndex: Int
                                    get() = scrollableState.firstVisibleItemIndex

                                override val currentItemOffset: Float
                                    get() =
                                        scrollableState.firstVisibleItemScrollOffset.toFloat()

                                override val totalItemCount: Int
                                    get() = scrollableState.layoutInfo.totalItemsCount
                            }
                        },
                    ),
                focusRequester = focusRequester,
            ),
    horizontalAlignment = Alignment.CenterHorizontally,
    state = scrollableState,
) {
    items(300) {
        BasicText(text = "item $it", modifier = Modifier.background(Color.Gray).height(50.dp))
    }
}
```

Example of scrolling with overscroll:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.overscroll
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.rotaryScrollable
import androidx.wear.compose.material.Text

val scrollableState = rememberScrollState()
val focusRequester = remember { FocusRequester() }
val overscrollEffect = rememberOverscrollEffect()

val screenHeightDp = LocalConfiguration.current.screenHeightDp.dp

Column(
    Modifier.fillMaxSize()
        .requestFocusOnHierarchyActive()
        .rotaryScrollable(
            behavior = RotaryScrollableDefaults.behavior(scrollableState),
            focusRequester = focusRequester,
            overscrollEffect = overscrollEffect,
        )
        .verticalScroll(scrollableState, overscrollEffect)
        .overscroll(overscrollEffect),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text("Top")
    Spacer(modifier = Modifier.height(screenHeightDp / 2))
    Text("Scroll this list up and down with rotary input", textAlign = TextAlign.Center)
    Spacer(modifier = Modifier.height(screenHeightDp / 2))
    Text("Bottom")
}
```

| Parameters |
|---|---|
| `behavior: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableBehavior` | Specified `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/RotaryScrollableBehavior` for rotary handling with snap or fling. |
| `focusRequester: https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | Used to request the focus for rotary input. Each composable with this modifier should have a separate focusRequester, and only one of them at a time can be active. We recommend using `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` and passing this focusRequester to it to handle requesting focus, as this will guarantee the proper behavior. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Reverses the direction of the rotary scroll. This direction should be aligned with the general touch scroll direction - and should be reversed if, for example, it was reversed in `.verticalScroll` or `.horizontalScroll` modifiers. If used with a `.scrollable` modifier - the scroll direction should be the opposite to the one specified there. When used for horizontal scrolling, RTL/LTR orientations should be taken into account, as these can affect the expected scroll behavior. It's recommended to use `ScrollableDefaults.reverseDirection` for handling LTR/RTL layouts for horizontal scrolling. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | effect to which the deltas will be fed when the scrollable has some scrolling delta left. Pass `null` for no overscroll. If you pass an effect you should also apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` modifier. |

### Modifier.rotate

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Rotate.kt+function:rotate)

```
fun Modifier.rotate(degrees: Float): Modifier
```

Sets the degrees the view is rotated around the center of the composable. Increasing values result in clockwise rotation. Negative degrees are used to rotate in the counter clockwise direction

Usage of this API renders this composable into a separate graphics layer.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.unit.dp

Box(Modifier.rotate(45f).size(100.dp, 100.dp))
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` | Example usage: |

### Modifier.fitInside

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/RulerAlignment.kt+function:fitInside)

```
fun Modifier.fitInside(rulers: RectRulers): Modifier
```

Fits the contents within `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)`. This only works when `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` have `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedHeight()`. This can be accomplished, for example, by having `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`, or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxSize.modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, or other size modifier before `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitInside.modifier#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)`. If the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` sizes aren't fixed, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitInside.modifier#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)` will size the child to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` and try to center the content within `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fitInside
import androidx.compose.foundation.layout.fitOutside
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.NavigationBars
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.SafeContent
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.StatusBars

Box(Modifier.fillMaxSize()) {
    // Drawn behind the status bar
    Box(Modifier.fillMaxSize().fitOutside(StatusBars.current).background(Color.Blue))
    // Drawn behind the navigation bar
    Box(Modifier.fillMaxSize().fitOutside(NavigationBars.current).background(Color.Red))
    // Body of the app
    Box(Modifier.fillMaxSize().fitInside(SafeContent.current).background(Color.Yellow))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitOutside.modifier#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)` |   |

### Modifier.fitOutside

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/RulerAlignment.kt+function:fitOutside)

```
fun Modifier.fitOutside(rulers: RectRulers): Modifier
```

If one of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler`s in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)` has a value within the bounds of the Layout, this sizes the content to that `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler` and the edge. If multiple `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler`s have a value within the space, only one is chosen, in this order: `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers#left()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers#top()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers#right()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers#bottom()`. This only works when `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` have `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedHeight()`. This can be accomplished, for example, by having `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`, or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxSize.modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, or other size modifier before `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitOutside.modifier#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)`. If the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` sizes aren't fixed, or there are no `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler`s within the bounds of the layout, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitOutside.modifier#(androidx.compose.ui.Modifier).fitOutside(androidx.compose.ui.layout.RectRulers)` will size the content area to 0x0.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fitInside
import androidx.compose.foundation.layout.fitOutside
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.NavigationBars
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.SafeContent
import androidx.compose.ui.layout.WindowInsetsRulers.Companion.StatusBars

Box(Modifier.fillMaxSize()) {
    // Drawn behind the status bar
    Box(Modifier.fillMaxSize().fitOutside(StatusBars.current).background(Color.Blue))
    // Drawn behind the navigation bar
    Box(Modifier.fillMaxSize().fitOutside(NavigationBars.current).background(Color.Red))
    // Body of the app
    Box(Modifier.fillMaxSize().fitInside(SafeContent.current).background(Color.Yellow))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fitInside.modifier#(androidx.compose.ui.Modifier).fitInside(androidx.compose.ui.layout.RectRulers)` |   |

### Modifier.scale

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Scale.kt+function:scale)

```
fun Modifier.scale(scale: Float): Modifier
```

Scale the contents of both the horizontal and vertical axis uniformly by the same scale factor.

Usage of this API renders this composable into a separate graphics layer

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.unit.dp

Box(Modifier.scale(2f).size(100.dp, 100.dp))
```

| Parameters |
|---|---|
| `scale: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Multiplier to scale content along the horizontal and vertical axis |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` | Example usage: |

### Modifier.scale

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Scale.kt+function:scale)

```
fun Modifier.scale(scaleX: Float, scaleY: Float): Modifier
```

Scale the contents of the composable by the following scale factors along the horizontal and vertical axis respectively. Negative scale factors can be used to mirror content across the corresponding horizontal or vertical axis.

Example usage:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.unit.dp

Box(Modifier.scale(scaleX = 2f, scaleY = 3f).size(100.dp, 100.dp))
```

Usage of this API renders this composable into a separate graphics layer

| Parameters |
|---|---|
| `scaleX: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Multiplier to scale content along the horizontal axis |
| `scaleY: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Multiplier to scale content along the vertical axis |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` |   |

### Modifier.scrollAway

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/ScrollAway.kt+function:scrollAway)

```
fun Modifier.scrollAway(
    scrollInfoProvider: ScrollInfoProvider,
    screenStage: () -> ScreenStage
): Modifier
```

Scroll an item vertically in/out of view based on scroll state provided by a scrolling list. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` item out of view as the user starts to scroll a vertically scrollable list of items upwards and bring additional items into view.

Example of using ScrollAway directly (in practice, it is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppScaffold.composable#AppScaffold(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenScaffold.composable#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.OverscrollEffect,kotlin.Function2)` to provide the correct scroll away behavior by default):

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.ScrollInfoProvider
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListHeaderDefaults
import androidx.wear.compose.material3.ScreenStage
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.curvedText
import androidx.wear.compose.material3.scrollAway
import androidx.wear.compose.material3.timeTextSeparator

val state = rememberTransformingLazyColumnState()

Box(modifier = Modifier.fillMaxSize()) {
    TransformingLazyColumn(state = state, modifier = Modifier.fillMaxSize()) {
        item {
            ListHeader(
                modifier =
                    Modifier.minimumVerticalContentPadding(
                        ListHeaderDefaults.minimumTopListContentPadding,
                        ListHeaderDefaults.minimumBottomListContentPadding,
                    )
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "TLC",
                    textAlign = TextAlign.Center,
                )
            }
        }
        items(50) {
            FilledTonalButton(
                modifier =
                    Modifier.fillMaxWidth()
                        .padding(horizontal = 36.dp)
                        .minimumVerticalContentPadding(
                            ButtonDefaults.minimumVerticalListContentPadding
                        ),
                onClick = {},
                label = { Text("Item ${it + 1}") },
            )
        }
    }
    TimeText(
        // In practice, it is recommended to use the [AppScaffold] and [ScreenScaffold],
        // so that the Material3 scroll away behavior is provided by default, rather than using
        // [Modifier.scrollAway] directly.
        modifier =
            Modifier.scrollAway(
                scrollInfoProvider = ScrollInfoProvider(state),
                screenStage = {
                    if (state.isScrollInProgress) ScreenStage.Scrolling else ScreenStage.Idle
                },
            ),
        content = { time ->
            curvedText("List")
            timeTextSeparator()
            curvedText(time)
        },
    )
}
```

| Parameters |
|---|---|
| `scrollInfoProvider: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider` | Used as the basis for the scroll-away implementation, based on the state of the scrollable container. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/ScrollInfoProvider` methods for creating a ScrollInfoProvider from common lists such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumnState` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState`. |
| `screenStage: () -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenStage` | Function that returns the screen stage of the active screen. Scrolled away items are shown when the screen is new, then scrolled away or hidden when scrolling, and finally shown again when idle. |

### Modifier.scrollAway

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/ScrollAway.kt+function:scrollAway)

```
fun Modifier.scrollAway(scrollState: ScrollState, offset: Dp = 0.dp): Modifier
```

Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.material.TimeSource,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1)` item out of view as the user starts to scroll a vertically scrollable `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` of items upwards and bring additional items into view.

| Parameters |
|---|---|
| `scrollState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` to be used as the basis for the scroll-away. |
| `offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Adjustment to the starting point for scrolling away. Positive values result in the scroll away starting later. |

### Modifier.scrollAway

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/ScrollAway.kt+function:scrollAway)

```
fun Modifier.scrollAway(
    scrollState: LazyListState,
    itemIndex: Int = 0,
    offset: Dp = 0.dp
): Modifier
```

Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState`. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.material.TimeSource,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1)` item out of view as the user starts to scroll a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` of items upwards and bring additional items into view.

| Parameters |
|---|---|
| `scrollState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState` to be used as the basis for the scroll-away. |
| `itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | The item for which the scroll offset will trigger scrolling away. |
| `offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Adjustment to the starting point for scrolling away. Positive values result in the scroll away starting later. |

### Modifier.scrollAway

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/ScrollAway.kt+function:scrollAway)

```
fun Modifier.scrollAway(
    scrollState: ScalingLazyListState,
    itemIndex: Int = 1,
    offset: Dp = 0.dp
): Modifier
```

Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState`. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.material.TimeSource,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1)` item out of view as the user starts to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)` of items upwards and bring additional items into view.

| Parameters |
|---|---|
| `scrollState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState` to be used as the basis for the scroll-away. |
| `itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 1` | The item for which the scroll offset will trigger scrolling away. |
| `offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Adjustment to the starting point for scrolling away. Positive values result in the scroll away starting later, negative values start scrolling away earlier. |

### Modifier.scrollAway

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/ScrollAway.kt+function:scrollAway)

```
fun Modifier.[scrollAway](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollAway(androidx.wear.compose.material.ScalingLazyListState,kotlin.Int,androidx.compose.ui.unit.Dp))(
    scrollState: ScalingLazyListState,
    itemIndex: Int = 1,
    offset: Dp = 0.dp
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> This overload is provided for backwards compatibility with Compose for Wear OS 1.1.A newer overload is available which uses ScalingLazyListState from wear.compose.foundation.lazy package

Scroll an item vertically in/out of view based on a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState`. Typically used to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.material.TimeSource,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1,kotlin.Function0,kotlin.Function1)` item out of view as the user starts to scroll a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)` of items upwards and bring additional items into view.

| Parameters |
|---|---|
| `scrollState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ScalingLazyListState` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyListState` to be used as the basis for the scroll-away. |
| `itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 1` | The item for which the scroll offset will trigger scrolling away. |
| `offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Adjustment to the starting point for scrolling away. Positive values result in the scroll away starting later, negative values start scrolling away earlier. |

### Modifier.horizontalScroll

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Scroll.kt+function:horizontalScroll)

```
fun Modifier.horizontalScroll(
    state: ScrollState,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false
): Modifier
```

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient =
    Brush.horizontalGradient(
        listOf(Color.Red, Color.Blue, Color.Green),
        0.0f,
        10000.0f,
        TileMode.Repeated,
    )
Box(
    Modifier.horizontalScroll(scrollState)
        .size(width = 10000.dp, height = 200.dp)
        .background(brush = gradient)
)
```

In order to use this modifier, you need to create and own `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`

See the other overload in order to provide a custom `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect`

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` | state of the scroll |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not scrolling via touch input is enabled |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling, when `true`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean right, when `false`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean left |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberScrollState.composable#rememberScrollState(kotlin.Int)` |   |

### Modifier.horizontalScroll

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Scroll.kt+function:horizontalScroll)

```
fun Modifier.horizontalScroll(
    state: ScrollState,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false
): Modifier
```

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient =
    Brush.horizontalGradient(
        listOf(Color.Red, Color.Blue, Color.Green),
        0.0f,
        10000.0f,
        TileMode.Repeated,
    )
Box(
    Modifier.horizontalScroll(scrollState)
        .size(width = 10000.dp, height = 200.dp)
        .background(brush = gradient)
)
```

In order to use this modifier, you need to create and own `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` | state of the scroll |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be used to render overscroll for this modifier. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not scrolling via touch input is enabled |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling, when `true`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean right, when `false`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean left |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberScrollState.composable#rememberScrollState(kotlin.Int)` |   |

### Modifier.verticalScroll

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Scroll.kt+function:verticalScroll)

```
fun Modifier.verticalScroll(
    state: ScrollState,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false
): Modifier
```

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient =
    Brush.verticalGradient(
        listOf(Color.Red, Color.Blue, Color.Green),
        0.0f,
        10000.0f,
        TileMode.Repeated,
    )
Box(
    Modifier.verticalScroll(scrollState)
        .fillMaxWidth()
        .requiredHeight(10000.dp)
        .background(brush = gradient)
)
```

In order to use this modifier, you need to create and own `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`

See the other overload in order to provide a custom `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect`

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` | state of the scroll |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not scrolling via touch input is enabled |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling, when `true`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean bottom, when `false`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean top |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberScrollState.composable#rememberScrollState(kotlin.Int)` |   |

### Modifier.verticalScroll

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Scroll.kt+function:verticalScroll)

```
fun Modifier.verticalScroll(
    state: ScrollState,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false
): Modifier
```

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.unit.dp

val scrollState = rememberScrollState()
val gradient =
    Brush.verticalGradient(
        listOf(Color.Red, Color.Blue, Color.Green),
        0.0f,
        10000.0f,
        TileMode.Repeated,
    )
Box(
    Modifier.verticalScroll(scrollState)
        .fillMaxWidth()
        .requiredHeight(10000.dp)
        .background(brush = gradient)
)
```

In order to use this modifier, you need to create and own `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState`

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState` | state of the scroll |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be used to render overscroll for this modifier. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not scrolling via touch input is enabled |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling, when `true`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean bottom, when `false`, 0 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#value()` will mean top |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberScrollState.composable#rememberScrollState(kotlin.Int)` |   |

### Modifier.scrollable2D

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Scrollable2D.kt+function:scrollable2D)

```
fun Modifier.scrollable2D(
    state: Scrollable2DState,
    enabled: Boolean = true,
    overscrollEffect: OverscrollEffect? = null,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null
): Modifier
```

Configure touch scrolling and flinging for the UI element in both XY orientations.

Users should update their state themselves using default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Scrollable2DState` and its `consumeScrollDelta` callback or by implementing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Scrollable2DState` interface manually and reflect their own state in UI when using this component.

If you don't need to have fling or nested scroll support, but want to make component simply draggable, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable2D.modifier#(androidx.compose.ui.Modifier).draggable2D(androidx.compose.foundation.gestures.Draggable2DState,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Boolean)`. If you're only interested in a single direction scroll, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`.

This overload provides the access to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that defines the behavior of the over-scrolling logic. Use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberOverscrollEffect.composable#rememberOverscrollEffect()` to create an instance of the current provided overscroll implementation.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.rememberScrollable2DState
import androidx.compose.foundation.gestures.scrollable2D
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// actual composable state that we will show on UI and update in `Scrollable`
val offset = remember { mutableStateOf(Offset.Zero) }
Box(
    Modifier.size(150.dp)
        .scrollable2D(
            // state for Scrollable, describes how to consume scroll amount
            state =
                rememberScrollable2DState { delta ->
                    // use the scroll data and indicate how much this element consumed.
                    // unconsumed deltas will be propagated to nested scrollables (if present)
                    offset.value = offset.value + delta // update the state
                    delta // indicate that we consumed all the pixels available
                }
        )
        .background(Color.LightGray),
    contentAlignment = Alignment.Center,
) {
    // Modifier.scrollable is not opinionated about its children's layouts. It will however
    // promote nested scrolling capabilities if those children also use the modifier.
    // The modifier will not change any layouts so one must handle any desired changes through
    // the delta values in the scrollable state
    Text(
        "X=${offset.value.x.roundToInt()} Y=${offset.value.y.roundToInt()}",
        style = TextStyle(fontSize = 32.sp),
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Scrollable2DState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Scrollable2DState` state of the scrollable. Defines how scroll events will be interpreted by the user land logic and contains useful information about ongoing events. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether scrolling is enabled |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = null` | effect to which the deltas will be fed when the scrollable have some scrolling delta left. Pass `null` for no overscroll. If you pass an effect you should also apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` modifier. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit drag events when this scrollable is being dragged. |

### Modifier.scrollableArea

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ScrollableArea.kt+function:scrollableArea)

```
fun Modifier.scrollableArea(
    state: ScrollableState,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null,
    bringIntoViewSpec: BringIntoViewSpec? = null
): Modifier
```

Configure a component to act as a scrollable area. A scrollable area clips its content to its bounds, renders overscroll, and handles scroll gestures such that the content, not the viewport, moves with the user's gestures.

This modifier is a building block for creating custom scrollable containers, and serves as a higher-level abstraction over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`. For simpler use cases, prefer higher-level components that are built with `scrollableArea`, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` offsets the content in the viewport out of the box to have scrollable container behavior.

The primary distinction between `scrollable` and `scrollableArea` is in how scroll deltas are handled. `scrollableArea` inverts the deltas to provide a natural "content-moving" experience. For instance, dragging a finger up results in a positive scroll delta, which accommodates content moving upwards within the layout. In contrast, the lower-level `scrollable` provides raw, un-inverted deltas, which is useful for custom gesture handling that isn't directly tied to content scrolling.

The direction of scrolling is automatically adjusted based on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`, the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`, and the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` flag. Setting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` to `true` is useful for layouts that grow from the end of the container to the beginning, like a chat feed. In such cases, the content within the container should also be laid out in reverse. The following table summarizes the resulting scroll delta for a user's drag gesture:

|---|---|---|---|---|
| `orientation` | `LayoutDirection` | `reverseScrolling` | User Gesture | Scroll Delta |
| `Vertical` | `Ltr` and `Rtl` | `false` | Drag Up | Positive |
| `Vertical` | `Ltr` and `Rtl` | `true` | Drag Up | Negative |
| `Horizontal` | `Ltr` | `false` | Drag Left | Positive |
| `Horizontal` | `Ltr` | `true` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `false` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `true` | Drag Left | Positive |

This `scrollableArea` overload uses overscroll provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalOverscrollFactory()` by default. See the other overload to manually provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` instance, or disable overscroll.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.ScrollableState
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.scrollableArea
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.util.fastCoerceIn

// This sample demonstrates how to create custom scrollable containers using the scrollableArea
// modifier.

// This ScrollableAreaSampleScrollState holds the scroll position and other relevant
// information. It implements the ScrollableState interface, making it compatible with the
// scrollableArea modifier, and is similar in function to the ScrollState used with
// Modifier.verticalScroll.
val scrollState = rememberScrollableAreaSampleScrollState()

// For lists with many items, consider using a LazyLayout instead
Layout(
    modifier =
        Modifier.size(150.dp)
            .scrollableArea(scrollState, Orientation.Vertical)
            .background(Color.LightGray),
    content = {
        repeat(40) {
            Text(
                modifier = Modifier.padding(vertical = 2.dp),
                text = "Item $it",
                fontSize = 24.sp,
                textAlign = TextAlign.Center,
            )
        }
    },
) { measurables, constraints ->
    var totalHeight = 0

    val childConstraints = constraints.copy(minWidth = 0, minHeight = 0)
    val placeables = measurables.map { measurable ->
        val placeable = measurable.measure(childConstraints)
        totalHeight += placeable.height
        placeable
    }

    val viewportHeight = constraints.maxHeight
    // Update the maximum scroll value to not scroll beyond limits and stop when scroll
    // reaches the end.
    scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

    // Position the children within the layout.
    layout(constraints.maxWidth, viewportHeight) {
        // The current vertical scroll position, in pixels.
        val scrollY = scrollState.value
        val viewportCenterY = scrollY + viewportHeight / 2

        var placeableLayoutPositionY = 0
        placeables.forEach { placeable ->
            // This sample applies a scaling effect to items based on their distance
            // from the center, creating a wheel-like effect.
            val itemCenterY = placeableLayoutPositionY + placeable.height / 2
            val distanceFromCenter = abs(itemCenterY - viewportCenterY)
            val normalizedDistance =
                (distanceFromCenter / (viewportHeight / 2f)).fastCoerceIn(0f, 1f)

            // Items scale between 0.4 at the edges of the viewport and 1 at the center.
            val scaleFactor = 1f - (normalizedDistance * 0.6f)

            // Place the item horizontally centered with a layer transformation for
            // scaling to achieve wheel-like effect.
            placeable.placeRelativeWithLayer(
                x = constraints.maxWidth / 2 - placeable.width / 2,
                // Offset y by the scroll position to make placeable visible in the viewport.
                y = placeableLayoutPositionY - scrollY,
            ) {
                scaleX = scaleFactor
                scaleY = scaleFactor
            }
            // Move to the next item's vertical position.
            placeableLayoutPositionY += placeable.height
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` of the component. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` of scrolling. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether scrolling is enabled. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverses the direction of scrolling. This is useful for experiences where new items appear at the end and the list grows backwards. When `reverseScrolling` is true, the layout of the content inside the container should also be reversed by the user. For example, in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, setting `reverseScrolling` true will cause items to be laid out from bottom to top. When using `scrollableArea` directly in custom list implementations, ensure your layout logic also arranges content in reverse order (e.g. from end to start) to match the scroll behavior. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this scrollable area. Note that if `null` is provided, interactions will still happen internally. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? = null` | The configuration that this scrollable area should use to perform scrolling when scroll requests are received from the focus system. If `null` is provided, the system will use the behavior provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#LocalBringIntoViewSpec()` which by default has a platform dependent implementation. |

### Modifier.scrollableArea

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/ScrollableArea.kt+function:scrollableArea)

```
fun Modifier.scrollableArea(
    state: ScrollableState,
    orientation: Orientation,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    reverseScrolling: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null,
    bringIntoViewSpec: BringIntoViewSpec? = null
): Modifier
```

Configure a component to act as a scrollable area. A scrollable area clips its content to its bounds, renders overscroll, and handles scroll gestures such that the content, not the viewport, moves with the user's gestures.

This modifier is a building block for creating custom scrollable containers, and serves as a higher-level abstraction over `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/scrollable.modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)`. For simpler use cases, prefer higher-level components that are built with `scrollableArea`, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` offsets the content in the viewport out of the box to have scrollable container behavior.

The primary distinction between `scrollable` and `scrollableArea` is in how scroll deltas are handled. `scrollableArea` inverts the deltas to provide a natural "content-moving" experience. For instance, dragging a finger up results in a positive scroll delta, which accommodates content moving upwards within the layout. In contrast, the lower-level `scrollable` provides raw, un-inverted deltas, which is useful for custom gesture handling that isn't directly tied to content scrolling.

The direction of scrolling is automatically adjusted based on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`, the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalLayoutDirection()`, and the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` flag. Setting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` to `true` is useful for layouts that grow from the end of the container to the beginning, like a chat feed. In such cases, the content within the container should also be laid out in reverse. The following table summarizes the resulting scroll delta for a user's drag gesture:

|---|---|---|---|---|
| `orientation` | `LayoutDirection` | `reverseScrolling` | User Gesture | Scroll Delta |
| `Vertical` | `Ltr` and `Rtl` | `false` | Drag Up | Positive |
| `Vertical` | `Ltr` and `Rtl` | `true` | Drag Up | Negative |
| `Horizontal` | `Ltr` | `false` | Drag Left | Positive |
| `Horizontal` | `Ltr` | `true` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `false` | Drag Left | Negative |
| `Horizontal` | `Rtl` | `true` | Drag Left | Positive |

This overload allows providing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be rendered within the scrollable area. See the other overload of `scrollableArea` in order to use a default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalOverscrollFactory()`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.ScrollableState
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.scrollableArea
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.util.fastCoerceIn

// This sample demonstrates how to create custom scrollable containers using the scrollableArea
// modifier.

// This ScrollableAreaSampleScrollState holds the scroll position and other relevant
// information. It implements the ScrollableState interface, making it compatible with the
// scrollableArea modifier, and is similar in function to the ScrollState used with
// Modifier.verticalScroll.
val scrollState = rememberScrollableAreaSampleScrollState()

// For lists with many items, consider using a LazyLayout instead
Layout(
    modifier =
        Modifier.size(150.dp)
            .scrollableArea(scrollState, Orientation.Vertical)
            .background(Color.LightGray),
    content = {
        repeat(40) {
            Text(
                modifier = Modifier.padding(vertical = 2.dp),
                text = "Item $it",
                fontSize = 24.sp,
                textAlign = TextAlign.Center,
            )
        }
    },
) { measurables, constraints ->
    var totalHeight = 0

    val childConstraints = constraints.copy(minWidth = 0, minHeight = 0)
    val placeables = measurables.map { measurable ->
        val placeable = measurable.measure(childConstraints)
        totalHeight += placeable.height
        placeable
    }

    val viewportHeight = constraints.maxHeight
    // Update the maximum scroll value to not scroll beyond limits and stop when scroll
    // reaches the end.
    scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

    // Position the children within the layout.
    layout(constraints.maxWidth, viewportHeight) {
        // The current vertical scroll position, in pixels.
        val scrollY = scrollState.value
        val viewportCenterY = scrollY + viewportHeight / 2

        var placeableLayoutPositionY = 0
        placeables.forEach { placeable ->
            // This sample applies a scaling effect to items based on their distance
            // from the center, creating a wheel-like effect.
            val itemCenterY = placeableLayoutPositionY + placeable.height / 2
            val distanceFromCenter = abs(itemCenterY - viewportCenterY)
            val normalizedDistance =
                (distanceFromCenter / (viewportHeight / 2f)).fastCoerceIn(0f, 1f)

            // Items scale between 0.4 at the edges of the viewport and 1 at the center.
            val scaleFactor = 1f - (normalizedDistance * 0.6f)

            // Place the item horizontally centered with a layer transformation for
            // scaling to achieve wheel-like effect.
            placeable.placeRelativeWithLayer(
                x = constraints.maxWidth / 2 - placeable.width / 2,
                // Offset y by the scroll position to make placeable visible in the viewport.
                y = placeableLayoutPositionY - scrollY,
            ) {
                scaleX = scaleFactor
                scaleY = scaleFactor
            }
            // Move to the next item's vertical position.
            placeableLayoutPositionY += placeable.height
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` of the component. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` of scrolling. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be used to render overscroll for this scrollable area. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether scrolling is enabled. |
| `reverseScrolling: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverses the direction of scrolling. This is useful for experiences where new items appear at the end and the list grows backwards. When `reverseScrolling` is true, the layout of the content inside the container should also be reversed by the user. For example, in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, setting `reverseScrolling` true will cause items to be laid out from bottom to top. When using `scrollableArea` directly in custom list implementations, ensure your layout logic also arranges content in reverse order (e.g. from end to start) to match the scroll behavior. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this scrollable area. Note that if `null` is provided, interactions will still happen internally. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? = null` | The configuration that this scrollable area should use to perform scrolling when scroll requests are received from the focus system. If `null` is provided, the system will use the behavior provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#LocalBringIntoViewSpec()` which by default has a platform dependent implementation. |

### Modifier.scrollable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Scrollable.kt+function:scrollable)

```
fun Modifier.scrollable(
    state: ScrollableState,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null
): Modifier
```

Configure touch scrolling and flinging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`.

Users should update their state themselves using default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` and its `consumeScrollDelta` callback or by implementing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` interface manually and reflect their own state in UI when using this component.

`scrollable` is a low-level modifier that handles low-level scrolling input gestures, without other behaviors commonly used for scrollable containers. For building scrollable containers, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/scrollableArea.modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`. `scrollableArea` clips its content to its bounds, renders overscroll, and adjusts the direction of scroll gestures to ensure that the content moves with the user's gestures. See also `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/horizontalScroll.modifier#(androidx.compose.ui.Modifier).horizontalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` for high-level scrollable containers that handle layout and move the content as the user scrolls.

If you don't need to have fling or nested scroll support, but want to make component simply draggable, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberScrollableState
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// actual composable state that we will show on UI and update in `Scrollable`
var offset by remember { mutableStateOf(0f) }
Box(
    Modifier.size(150.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            // state for Scrollable, describes how consume scroll amount
            state =
                rememberScrollableState { delta ->
                    // use the scroll data and indicate how much this element consumed.
                    // unconsumed deltas will be propagated to nested scrollables (if present)
                    offset = offset + delta // update the state
                    delta // indicate that we consumed all the pixels available
                },
        )
        .background(Color.LightGray),
    contentAlignment = Alignment.Center,
) {
    // Modifier.scrollable is not opinionated about its children's layouts. It will however
    // promote nested scrolling capabilities if those children also use the modifier.
    // The modifier will not change any layouts so one must handle any desired changes
    // through the delta values in the scrollable state
    Text(offset.roundToInt().toString(), style = TextStyle(fontSize = 32.sp))
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` state of the scrollable. Defines how scroll events will be interpreted by the user land logic and contains useful information about ongoing events. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | orientation of the scrolling |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether scrolling is enabled |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of the scroll, so top-to-bottom scroll will behave like bottom to top and left to right will behave like right to left. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit drag events when this scrollable is being dragged. |

### Modifier.scrollable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Scrollable.kt+function:scrollable)

```
fun Modifier.scrollable(
    state: ScrollableState,
    orientation: Orientation,
    overscrollEffect: OverscrollEffect?,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null,
    bringIntoViewSpec: BringIntoViewSpec? = null
): Modifier
```

Configure touch scrolling and flinging for the UI element in a single `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation`.

Users should update their state themselves using default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` and its `consumeScrollDelta` callback or by implementing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` interface manually and reflect their own state in UI when using this component.

`scrollable` is a low-level modifier that handles low-level scrolling input gestures, without other behaviors commonly used for scrollable containers. For building scrollable containers, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/scrollableArea.modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)`. `scrollableArea` clips its content to its bounds, renders overscroll, and adjusts the direction of scroll gestures to ensure that the content moves with the user's gestures. See also `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/horizontalScroll.modifier#(androidx.compose.ui.Modifier).horizontalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)` for high-level scrollable containers that handle layout and move the content as the user scrolls.

If you don't need to have fling or nested scroll support, but want to make component simply draggable, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`.

This overload provides the access to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that defines the behavior of the over-scrolling logic. Use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/rememberOverscrollEffect.composable#rememberOverscrollEffect()` to create an instance of the current provided overscroll implementation. Note: compared to other APIs that accept `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.OverscrollEffect,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/scrollableArea.modifier#(androidx.compose.ui.Modifier).scrollableArea(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.gestures.BringIntoViewSpec)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, `scrollable` does not render the overscroll, it only provides events. Manually add `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` to render the overscroll or use other APIs.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberScrollableState
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// actual composable state that we will show on UI and update in `Scrollable`
var offset by remember { mutableStateOf(0f) }
Box(
    Modifier.size(150.dp)
        .scrollable(
            orientation = Orientation.Vertical,
            // state for Scrollable, describes how consume scroll amount
            state =
                rememberScrollableState { delta ->
                    // use the scroll data and indicate how much this element consumed.
                    // unconsumed deltas will be propagated to nested scrollables (if present)
                    offset = offset + delta // update the state
                    delta // indicate that we consumed all the pixels available
                },
        )
        .background(Color.LightGray),
    contentAlignment = Alignment.Center,
) {
    // Modifier.scrollable is not opinionated about its children's layouts. It will however
    // promote nested scrolling capabilities if those children also use the modifier.
    // The modifier will not change any layouts so one must handle any desired changes
    // through the delta values in the scrollable state
    Text(offset.roundToInt().toString(), style = TextStyle(fontSize = 32.sp))
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableState` state of the scrollable. Defines how scroll events will be interpreted by the user land logic and contains useful information about ongoing events. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | orientation of the scrolling |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?` | effect to which the deltas will be fed when the scrollable have some scrolling delta left. Pass `null` for no overscroll. If you pass an effect you should also apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/overscroll.modifier#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)` modifier. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether scrolling is enabled |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of the scroll, so top-to-bottom scroll will behave like bottom to top and left to right will behave like right to left. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior? = null` | logic describing fling behavior when drag has finished with velocity. If `null`, default from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/ScrollableDefaults#flingBehavior()` will be used. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to emit drag events when this scrollable is being dragged. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec? = null` | The configuration that this scrollable should use to perform scrolling when scroll requests are received from the focus system. If null is provided the system will use the behavior provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#LocalBringIntoViewSpec()` which by default has a platform-dependent implementation. |

### Modifier.nonInteractiveScrollbar

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Scrollbar.kt+function:nonInteractiveScrollbar)

```
@Composable
fun Modifier.nonInteractiveScrollbar(
    state: ScrollIndicatorState,
    orientation: Orientation,
    thumbColor: Color = NonInteractiveScrollbarDefaults.thumbColor,
    trackColor: Color = Color.Transparent,
    thickness: Dp = NonInteractiveScrollbarDefaults.Thickness,
    thumbMinLength: Dp = NonInteractiveScrollbarDefaults.ThumbMinLength,
    thumbMaxLengthFraction: @FloatRange(from = 0.0, to = 1.0) Float = NonInteractiveScrollbarDefaults.ThumbMaxLengthFraction,
    isFadeEnabled: Boolean = true,
    fadeDurationMillis: Int = NonInteractiveScrollbarDefaults.ThumbFadeDurationMillis,
    fadeDelayMillis: Int = NonInteractiveScrollbarDefaults.ThumbFadeDelayMillis,
    mainAxisTrackInset: Dp = NonInteractiveScrollbarDefaults.MainAxisTrackInset,
    crossAxisTrackInset: Dp = NonInteractiveScrollbarDefaults.CrossAxisTrackInset
): Modifier
```

A visual-only scrollbar that represents the current scroll position of a scrolling component.

This scrollbar cannot be interacted with to scroll the component, it is a visual only representation of the scroll position. It is drawn at the end edge (respecting layout direction) for a vertically scrollable component, and at the bottom edge for a horizontally scrollable component.

The scrollbar is only visible if the content size is strictly greater than the viewport size. By default, the scrollbar is shown when scrolling is active and fades out after a delay when scrolling stops. This fading behavior can be disabled by setting `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#(androidx.compose.ui.Modifier).nonInteractiveScrollbar(androidx.compose.foundation.ScrollIndicatorState,androidx.compose.foundation.gestures.Orientation,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Float,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to false, in which case the scrollbar remains always visible.

To use a scrollbar with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, see:

```kotlin
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Text
import androidx.compose.material3.nonInteractiveScrollbar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val state = rememberLazyListState()
val scrollIndicatorState = state.scrollIndicatorState
val scrollbarModifier =
    if (scrollIndicatorState != null) {
        Modifier.nonInteractiveScrollbar(
            scrollIndicatorState,
            orientation = Orientation.Vertical,
        )
    } else {
        Modifier
    }

LazyColumn(state = state, modifier = Modifier.fillMaxSize().then(scrollbarModifier)) {
    items(100) { index ->
        Text(
            text = "Item $index",
            modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
        )
    }
}
```

To use a scrollbar with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` that uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/verticalScroll.modifier#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)`, see:

```kotlin
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.material3.nonInteractiveScrollbar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val state = rememberScrollState()
val scrollIndicatorState = state.scrollIndicatorState
val scrollbarModifier =
    if (scrollIndicatorState != null) {
        Modifier.nonInteractiveScrollbar(
            scrollIndicatorState,
            orientation = Orientation.Vertical,
        )
    } else {
        Modifier
    }

Column(
    modifier =
        Modifier.fillMaxSize()
            // Chain before verticalScroll so the scrollbar doesn't scroll with content.
            .then(scrollbarModifier)
            .verticalScroll(state)
) {
    repeat(100) { index ->
        Text(
            text = "Item $index",
            modifier = Modifier.fillMaxWidth().height(50.dp).wrapContentSize(Alignment.Center),
        )
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollIndicatorState` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollIndicatorState` that represents the scroll state. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | the orientation of the scrollbar. |
| `thumbColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = NonInteractiveScrollbarDefaults.thumbColor` | the color of the scrollbar thumb. |
| `trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = Color.Transparent` | the color of the scrollbar track. |
| `thickness: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = NonInteractiveScrollbarDefaults.Thickness` | the thickness of the scrollbar. |
| `thumbMinLength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = NonInteractiveScrollbarDefaults.ThumbMinLength` | the minimum length of the scrollbar thumb. Note that the scrollbar will not be shown if the available track length is less than this minimum length. |
| `thumbMaxLengthFraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = NonInteractiveScrollbarDefaults.ThumbMaxLengthFraction` | the maximum length of the scrollbar thumb as a fraction of the viewport length. This should be between 0f and 1f. |
| `isFadeEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the fade behavior is enabled. If enabled, the scrollbar will be shown when scrolling is active, and fades out after a delay when scrolling is idle. If disabled, the scrollbar remains always visible. |
| `fadeDurationMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = NonInteractiveScrollbarDefaults.ThumbFadeDurationMillis` | the duration of the fade animation in milliseconds. |
| `fadeDelayMillis: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = NonInteractiveScrollbarDefaults.ThumbFadeDelayMillis` | the delay before the scrollbar fades out in milliseconds. |
| `mainAxisTrackInset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = NonInteractiveScrollbarDefaults.MainAxisTrackInset` | the inset to apply to the scrollbar track along the main axis. |
| `crossAxisTrackInset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = NonInteractiveScrollbarDefaults.CrossAxisTrackInset` | the inset to apply to the scrollbar track along the cross axis. |

### Modifier.selectableGroup

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/SelectableGroup.kt+function:selectableGroup)

```
fun Modifier.selectableGroup(): Modifier
```

Use this modifier to group a list of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` items like Tabs or RadioButtons together for accessibility purpose.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectableGroup.modifier#(androidx.compose.ui.Modifier).selectableGroup()` |   |

### Modifier.selectable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Selectable.kt+function:selectable)

```
fun Modifier.selectable(
    selected: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. A typical example of mutually exclusive set is a RadioGroup or a row of Tabs. To ensure correct accessibility behavior, make sure to pass `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectableGroup.modifier#(androidx.compose.ui.Modifier).selectableGroup()` modifier into the RadioGroup or the row.

If you want to make an item support on/off capabilities without being part of a set, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of selectable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of selectable, it is recommended to instead provide `null` to enable lazy creation. If you need the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val option1 = Color.Red
val option2 = Color.Blue
var selectedOption by remember { mutableStateOf(option1) }
Column {
    Text("Selected: $selectedOption")
    Row {
        listOf(option1, option2).forEach { color ->
            val selected = selectedOption == color
            Box(
                Modifier.size(100.dp)
                    .background(color = color)
                    .selectable(selected = selected, onClick = { selectedOption = color })
            )
        }
    }
}
```

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this item is selected in a mutually exclusion set |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` will handle input events and appear enabled from a semantics perspective |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch PressInteraction.Press when this selectable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to invoke when this item is clicked |

### Modifier.selectable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Selectable.kt+function:selectable)

```
fun Modifier.selectable(
    selected: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. A typical example of mutually exclusive set is a RadioGroup or a row of Tabs. To ensure correct accessibility behavior, make sure to pass `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectableGroup.modifier#(androidx.compose.ui.Modifier).selectableGroup()` modifier into the RadioGroup or the row.

If you want to make an item support on/off capabilities without being part of a set, consider using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` only when needed. This reduces the performance cost of selectable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of selectable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` instead of `null`, as this cannot be lazily created inside selectable.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val option1 = Color.Red
val option2 = Color.Blue
var selectedOption by remember { mutableStateOf(option1) }
Column {
    Text("Selected: $selectedOption")
    Row {
        listOf(option1, option2).forEach { color ->
            val selected = selectedOption == color
            Box(
                Modifier.size(100.dp)
                    .background(color = color)
                    .selectable(selected = selected, onClick = { selectedOption = color })
            )
        }
    }
}
```

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this item is selected in a mutually exclusion set |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch PressInteraction.Press when this selectable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when the modified element is pressed. By default, the indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Set to `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` will handle input events and appear enabled from a semantics perspective |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to invoke when this item is clicked |

### Modifier.clearAndSetSemantics

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/semantics/SemanticsModifier.kt+function:clearAndSetSemantics)

```
fun Modifier.clearAndSetSemantics(properties: SemanticsPropertyReceiver.() -> Unit): Modifier
```

Clears the semantics of all the descendant nodes and sets new semantics.

In the merged semantics tree, this clears the semantic information provided by the node's descendants (but not those of the layout node itself, if any) and sets the provided semantics. (In the unmerged tree, the semantics node is marked with "`https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsConfiguration#isClearingSemantics()`", but nothing is actually cleared.)

Compose's default semantics provide baseline usability for screen-readers, but this can be used to provide a more polished screen-reader experience: for example, clearing the semantics of a group of tiny buttons, and setting equivalent actions on the card containing them.

| Parameters |
|---|---|
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | properties to add to the semantics. `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver` will be provided in the scope to allow access for common properties and its values. Note: The `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).clearAndSetSemantics(kotlin.Function1)` lambda should be used to set semantic properties or semantic actions. Don't call `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/SemanticsModifierNode#(androidx.compose.ui.semantics.SemanticsPropertyReceiver).applySemantics()` from within the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).clearAndSetSemantics(kotlin.Function1)` block. It will result in an infinite loop. |

### Modifier.semantics

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/semantics/SemanticsModifier.kt+function:semantics)

```
fun Modifier.semantics(
    mergeDescendants: Boolean = false,
    properties: SemanticsPropertyReceiver.() -> Unit
): Modifier
```

Add semantics key/value pairs to the layout node, for use in testing, accessibility, etc.

The provided lambda receiver scope provides "key = value"-style setters for any `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyKey`. Additionally, chaining multiple semantics modifiers is also a supported style.

The resulting semantics produce two `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsNode` trees:

The "unmerged tree" rooted at `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsOwner#unmergedRootSemanticsNode()` has one `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsNode` per layout node which has any `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsModifier` on it. This `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsNode` contains all the properties set in all the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsModifier`s on that node.

The "merged tree" rooted at `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsOwner#rootSemanticsNode()` has equal-or-fewer nodes: it simplifies the structure based on `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/clearAndSetSemantics.modifier#(androidx.compose.ui.Modifier).clearAndSetSemantics(kotlin.Function1)`. For most purposes (especially accessibility, or the testing of accessibility), the merged semantics tree should be used.

| Parameters |
|---|---|
| `mergeDescendants: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the semantic information provided by the owning component and its descendants should be treated as one logical entity. Most commonly set on screen-reader-focusable items such as buttons or form fields. In the merged semantics tree, all descendant nodes (except those themselves marked `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)`) will disappear from the tree, and their properties will get merged into the parent's configuration (using a merging algorithm that varies based on the type of property -- for example, text properties will get concatenated, separated by commas). In the unmerged semantics tree, the node is simply marked with `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsConfiguration#isMergingSemanticsOfDescendants()`. |
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | properties to add to the semantics. `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver` will be provided in the scope to allow access for common properties and its values. Note: The `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` block should be used to set semantic properties or semantic actions. Don't call `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/SemanticsModifierNode#(androidx.compose.ui.semantics.SemanticsPropertyReceiver).applySemantics()` from within the `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` block. It will result in an infinite loop. |

### Modifier.sensitiveContent

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/SensitiveContent.kt+function:sensitiveContent)

```
fun Modifier.sensitiveContent(isContentSensitive: Boolean = true): Modifier
```

This modifier hints that the composable renders sensitive content (i.e. username, password, credit card etc) on the screen, and the content should be protected during screen share in supported environments.

| Parameters |
|---|---|
| `isContentSensitive: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the content is sensitive or not. Defaults to true. |

### Modifier.dropShadow

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Shadow.kt+function:dropShadow)

```
fun Modifier.dropShadow(shape: Shape, block: DropShadowScope.() -> Unit): Modifier
```

Draws a drop shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope`. This is different than `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/shadow.modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` as this does not introduce a graphicsLayer to render elevation based shadows. This shadow is rendered without a single light source and will render consistently regardless of the on screen position of the content. This is similar to `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/dropShadow.modifier#(androidx.compose.ui.Modifier).dropShadow(androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.shadow.Shadow)` except that specification of drop shadow parameters is done with the lambda with `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope` allows for more efficient transformations for animated use cases without recomposition.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp, 100.dp).dropShadow(RectangleShape, Shadow(12.dp)))
```

| Parameters |
|---|---|
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | Geometry of the shadow |
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/DropShadowScope` block where shadow properties are defined |

### Modifier.dropShadow

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Shadow.kt+function:dropShadow)

```
fun Modifier.dropShadow(shape: Shape, shadow: Shadow): Modifier
```

Draws a drop shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow`. This is different than `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/shadow.modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` as this does not introduce a graphicsLayer to render elevation based shadows. This shadow is rendered without a single light source and will render consistently regardless of the on screen position of the content.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp, 100.dp).dropShadow(RectangleShape, Shadow(12.dp)))
```

| Parameters |
|---|---|
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | Geometry of the shadow |
| `shadow: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow` | Properties of the shadow like radius, spread, offset, and fill properties like the color or brush |

### Modifier.innerShadow

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Shadow.kt+function:innerShadow)

```
fun Modifier.innerShadow(shape: Shape, block: InnerShadowScope.() -> Unit): Modifier
```

Draws an inner shadow behind the rest of the content with the geometry specified by the given shape and the shadow properties defined the `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope`. This is different than `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/shadow.modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` as this does not introduce a graphicsLayer to render elevation based shadows. This shadow is rendered without a single light source and will render consistently regardless of the on screen position of the content. This is similar to `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/innerShadow.modifier#(androidx.compose.ui.Modifier).innerShadow(androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.shadow.Shadow)` except that specification of inner shadow parameters is done with the lambda with `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope` allows for more efficient transformations for animated use cases without recomposition.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.innerShadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp, 100.dp).innerShadow(RectangleShape, Shadow(12.dp)))
```

| Parameters |
|---|---|
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | Geometry of the shadow |
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/InnerShadowScope` block where shadow properties are defined |

### Modifier.innerShadow

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Shadow.kt+function:innerShadow)

```
fun Modifier.innerShadow(shape: Shape, shadow: Shadow): Modifier
```

Draws an inner shadow on top of the rest of the content with the geometry specified by the given shape and the shadow properties defined by the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow`. This is different than `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/shadow.modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` as this does not introduce a graphicsLayer to render elevation based shadows. Additionally this shadow will render only within the geometry and can be used to provide a recessed like visual effect. This shadow is rendered without a single light source and will render consistently regardless of the on screen position of the content.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.innerShadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.unit.dp

Box(Modifier.size(100.dp, 100.dp).innerShadow(RectangleShape, Shadow(12.dp)))
```

| Parameters |
|---|---|
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | Geometry of the shadow |
| `shadow: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/shadow/Shadow` | Properties of the shadow like radius, spread, offset, and fill properties like the color or brush |

### Modifier.shadow

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/draw/Shadow.kt+function:shadow)

```
fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor
): Modifier
```

Creates a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` that draws a shadow. The `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` defines the visual depth of the physical object. The physical object has a shape specified by `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`.

If the passed `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` is concave the shadow will not be drawn on Android versions less than 10.

Note that `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` is only affecting the shadow size and doesn't change the drawing order. Use a `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)` modifier if you want to draw the elements with larger `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` after all the elements with a smaller one.

Note that this parameter is only supported on Android 9 (Pie) and above. On older versions, this property always returns `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Black()` and setting new values is ignored.

Usage of this API renders this composable into a separate graphics layer

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.unit.dp

Box(Modifier.shadow(12.dp, RectangleShape).size(100.dp, 100.dp))
```

| Parameters |
|---|---|
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The elevation for the shadow in pixels |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | Defines a shape of the physical object |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = elevation > 0.dp` | When active, the content drawing clips to the shape. |
| `ambientColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DefaultShadowColor` | Color of the ambient shadow drawn when `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`\> 0f |
| `spotColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DefaultShadowColor` | Color of the spot shadow that is drawn when `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`\> 0f |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.RenderEffect,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.CompositingStrategy,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.LayerOutsets)` | Example usage: |

### Modifier.defaultMinSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:defaultMinSize)

```
fun Modifier.defaultMinSize(
    minWidth: Dp = Dp.Unspecified,
    minHeight: Dp = Dp.Unspecified
): Modifier
```

Constrain the size of the wrapped layout only when it would be otherwise unconstrained: the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).defaultMinSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).defaultMinSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` constraints are only applied when the incoming corresponding constraint is `0`. The modifier can be used, for example, to define a default min size of a component, while still allowing it to be overidden with smaller min sizes across usages.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.requiredSizeIn
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun DefaultMinBox(modifier: Modifier = Modifier) {
    Box(modifier.defaultMinSize(minWidth = 100.dp, minHeight = 100.dp).background(Color.Blue))
}
// This will be a 100.dp x 100.dp blue box. Because we are not providing any min constraints
// to the DefaultMinBox, defaultMinSize will apply its min constraints.
DefaultMinBox()
// This will be a 50.dp x 50.dp blue box. Because we are providing min constraints
// to the DefaultMinBox, defaultMinSize will not apply its min constraints.
DefaultMinBox(Modifier.requiredSizeIn(minWidth = 50.dp, minHeight = 50.dp))
// Note that if DefaultMinBox used requiredSizeIn or sizeIn rather than
// defaultMinSize, the min constraints would have been applied with either
// of the above usages.
```

### Modifier.fillMaxHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:fillMaxHeight)

```
fun Modifier.fillMaxHeight(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
): Modifier
```

Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxHeight(kotlin.Float)`. Note that, by default, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxHeight(kotlin.Float)` is 1, so the modifier will make the content fill the whole available height. If the incoming maximum height is `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#Infinity()` this modifier will have no effect.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.fillMaxHeight().background(Color.Red), contentAlignment = Alignment.Center) {
    Box(Modifier.size(100.dp).background(color = Color.Magenta))
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.requiredSize(100.dp).background(Color.Red), contentAlignment = Alignment.Center) {
    // The inner Box will be (30.dp x 50.dp).
    Box(Modifier.requiredWidth(30.dp).fillMaxHeight(0.5f).background(color = Color.Magenta))
}
```

| Parameters |
|---|---|
| `fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | The fraction of the maximum height to use, between `0` and `1`, inclusive. Example usage: |

### Modifier.fillMaxSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:fillMaxSize)

```
fun Modifier.fillMaxSize(fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f): Modifier
```

Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, as well as the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`. Note that, by default, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)` is 1, so the modifier will make the content fill the whole available space. If the incoming maximum width or height is `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#Infinity()` this modifier will have no effect in that dimension.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.fillMaxSize().background(Color.Red), contentAlignment = Alignment.Center) {
    Box(Modifier.size(100.dp).background(color = Color.Magenta))
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.requiredSize(100.dp).background(Color.Red), contentAlignment = Alignment.Center) {
    // The inner Box will be (50.dp x 50.dp).
    Box(Modifier.requiredWidth(30.dp).fillMaxSize(0.5f).background(color = Color.Magenta))
}
```

| Parameters |
|---|---|
| `fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | The fraction of the maximum size to use, between `0` and `1`, inclusive. Example usage: |

### Modifier.fillMaxWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:fillMaxWidth)

```
fun Modifier.fillMaxWidth(fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f): Modifier
```

Have the content fill (possibly only partially) the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` of the incoming measurement constraints, by setting the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` and the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` to be equal to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` multiplied by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxWidth(kotlin.Float)`. Note that, by default, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxWidth(kotlin.Float)` is 1, so the modifier will make the content fill the whole available width. If the incoming maximum width is `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#Infinity()` this modifier will have no effect.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.fillMaxWidth().background(Color.Red), contentAlignment = Alignment.Center) {
    Box(Modifier.size(100.dp).background(color = Color.Magenta))
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(Modifier.requiredSize(100.dp).background(Color.Red), contentAlignment = Alignment.Center) {
    // The inner Box will be (50.dp x 30.dp).
    Box(
        Modifier.fillMaxWidth(fraction = 0.5f)
            .requiredHeight(30.dp)
            .background(color = Color.Magenta)
    )
}
```

| Parameters |
|---|---|
| `fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | The fraction of the maximum width to use, between `0` and `1`, inclusive. Example usage: |

### Modifier.height

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:height)

```
fun Modifier.height(height: Dp): Modifier
```

Declare the preferred height of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the height of the content regardless of the incoming constraints see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredHeight.modifier#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.foundation.layout.IntrinsicSize)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` to set other preferred dimensions. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box { Box(Modifier.height(100.dp).aspectRatio(1f).background(Color.Blue)) }
```

### Modifier.heightIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:heightIn)

```
fun Modifier.heightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified): Modifier
```

Constrain the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

### Modifier.requiredHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredHeight)

```
fun Modifier.requiredHeight(height: Dp): Modifier
```

Declare the height of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredHeightIn.modifier#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSizeIn.modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a size range. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeight(androidx.compose.ui.unit.Dp)` to set a preferred height, which is only respected when the incoming constraints allow it.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// The result is a 50.dp x 50.dp blue box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp height, this
// will not be respected. They would be respected if height was used instead of requiredHeight.
Box(
    Modifier.requiredHeight(100.dp).requiredHeight(50.dp).aspectRatio(1f).background(Color.Blue)
)
```

### Modifier.requiredHeightIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredHeightIn)

```
fun Modifier.requiredHeightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified): Modifier
```

Constrain the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredHeightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

### Modifier.requiredSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredSize)

```
fun Modifier.requiredSize(size: Dp): Modifier
```

Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)`dp width and height. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSizeIn.modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a size range. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)` to set a preferred size, which is only respected when the incoming constraints allow it.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// The result is a 50.dp x 50.dp red box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp x 100.dp, this
// will not be respected. They would be respected if size was used instead of requiredSize.
Box(Modifier.requiredSize(100.dp, 100.dp).requiredSize(50.dp, 50.dp).background(Color.Red))
```

### Modifier.requiredSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredSize)

```
fun Modifier.requiredSize(size: DpSize): Modifier
```

Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.DpSize)`. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSizeIn.modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a size range. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.DpSize)` to set a preferred size, which is only respected when the incoming constraints allow it.

### Modifier.requiredSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredSize)

```
fun Modifier.requiredSize(width: Dp, height: Dp): Modifier
```

Declare the size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSizeIn.modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a size range. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` to set a preferred size, which is only respected when the incoming constraints allow it.

### Modifier.requiredSizeIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredSizeIn)

```
fun Modifier.requiredSizeIn(
    minWidth: Dp = Dp.Unspecified,
    minHeight: Dp = Dp.Unspecified,
    maxWidth: Dp = Dp.Unspecified,
    maxHeight: Dp = Dp.Unspecified
): Modifier
```

Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp, and the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

### Modifier.requiredWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredWidth)

```
fun Modifier.requiredWidth(width: Dp): Modifier
```

Declare the width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` will not override this value. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredWidthIn.modifier#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSizeIn.modifier#(androidx.compose.ui.Modifier).requiredSizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a size range. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.ui.unit.Dp)` to set a preferred width, which is only respected when the incoming constraints allow it.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// The result is a 50.dp x 50.dp magenta box centered in a 100.dp x 100.dp space.
// Note that although a previous modifier asked it to be 100.dp width, this
// will not be respected. They would be respected if width was used instead of requiredWidth.
Box(
    Modifier.requiredWidth(100.dp)
        .requiredWidth(50.dp)
        .aspectRatio(1f)
        .background(Color.Magenta)
)
```

### Modifier.requiredWidthIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:requiredWidthIn)

```
fun Modifier.requiredWidthIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified): Modifier
```

Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).requiredWidthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. If the content chooses a size that does not satisfy the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, the parent layout will be reported a size coerced in the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, and the position of the content will be automatically offset to be centered on the space assigned to the child by the parent layout under the assumption that `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` were respected.

### Modifier.size

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:size)

```
fun Modifier.size(size: Dp): Modifier
```

Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`dp square. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the size of the content regardless of the incoming constraints, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSize.modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` to set width or height alone. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box { Box(Modifier.size(100.dp, 100.dp).background(Color.Red)) }
```

### Modifier.size

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:size)

```
fun Modifier.size(size: DpSize): Modifier
```

Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.DpSize)`. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the size of the content regardless of the incoming constraints, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSize.modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` to set width or height alone. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp

Box { Box(Modifier.size(DpSize(100.dp, 100.dp)).background(Color.Red)) }
```

### Modifier.size

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:size)

```
fun Modifier.size(width: Dp, height: Dp): Modifier
```

Declare the preferred size of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the size of the content regardless of the incoming constraints, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredSize.modifier#(androidx.compose.ui.Modifier).requiredSize(androidx.compose.ui.unit.Dp)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set width or height alone. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box { Box(Modifier.size(100.dp, 100.dp).background(Color.Red)) }
```

### Modifier.sizeIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:sizeIn)

```
fun Modifier.sizeIn(
    minWidth: Dp = Dp.Unspecified,
    minHeight: Dp = Dp.Unspecified,
    maxWidth: Dp = Dp.Unspecified,
    maxHeight: Dp = Dp.Unspecified
): Modifier
```

Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and the height of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

### Modifier.width

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:width)

```
fun Modifier.width(width: Dp): Modifier
```

Declare the preferred width of the content to be exactly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.ui.unit.Dp)`dp. The incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` may override this value, forcing the content to be either smaller or larger.

For a modifier that sets the width of the content regardless of the incoming constraints see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/requiredWidth.modifier#(androidx.compose.ui.Modifier).requiredWidth(androidx.compose.foundation.layout.IntrinsicSize)`. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/height.modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` to set other preferred dimensions. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/widthIn.modifier#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/heightIn.modifier#(androidx.compose.ui.Modifier).heightIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/sizeIn.modifier#(androidx.compose.ui.Modifier).sizeIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to set a preferred size range.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box { Box(Modifier.width(100.dp).aspectRatio(1f).background(Color.Magenta)) }
```

### Modifier.widthIn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:widthIn)

```
fun Modifier.widthIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified): Modifier
```

Constrain the width of the content to be between `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).widthIn(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`dp as permitted by the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

### Modifier.wrapContentHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:wrapContentHeight)

```
fun Modifier.wrapContentHeight(
    align: Alignment.Vertical = Alignment.CenterVertically,
    unbounded: Boolean = false
): Modifier
```

Allow the content to measure at its desired height without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()`, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)` is true, also without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()`. If the content's measured size is smaller than the minimum height constraint, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)` it within that minimum height space. If the content's measured size is larger than the maximum height constraint (only possible when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)` is true), `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentHeight(androidx.compose.ui.Alignment.Vertical,kotlin.Boolean)` over the maximum height space.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Here the result will be a 50.dp x 20.dp blue box centered vertically in a 50.dp x 50.dp
// space. Because of the size modifier, if wrapContentHeight did not exist,
// the blue rectangle would actually be 50.dp x 50.dp to satisfy the size set by the modifier.
// However, because we provide wrapContentHeight, the blue rectangle is specified to be wrap
// content in height - if the desired height is smaller than 50.dp, it will be centered
// vertically in this space. Therefore the 50.dp x 20.dp is centered vertically in the space.
Box(
    Modifier.size(50.dp)
        .wrapContentHeight(Alignment.CenterVertically)
        .height(20.dp)
        .background(Color.Blue)
)
```

### Modifier.wrapContentSize

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:wrapContentSize)

```
fun Modifier.wrapContentSize(
    align: Alignment = Alignment.Center,
    unbounded: Boolean = false
): Modifier
```

Allow the content to measure at its desired size without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` constraints, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)` is true, also without regard for the incoming maximum constraints. If the content's measured size is smaller than the minimum size constraint, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)` it within that minimum sized space. If the content's measured size is larger than the maximum size constraint (only possible when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)` is true), `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentSize(androidx.compose.ui.Alignment,kotlin.Boolean)` within the maximum space.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Here the result will be a 20.dp x 20.dp blue box top-centered in a 40.dp x 40.dp space.
// Because of the sizeIn modifier, if wrapContentSize did not exist, the blue rectangle
// would actually be 40.dp x 40.dp to satisfy the min size set by the modifier. However,
// because we provide wrapContentSize, the blue rectangle is specified to be wrap
// content - if the desired size is smaller than 40.dp x 40.dp, it will be top-centered in
// this space. Therefore the 20.dp x 20.dp is top-centered in the space.
Box(
    Modifier.sizeIn(minWidth = 40.dp, minHeight = 40.dp)
        .wrapContentSize(Alignment.TopCenter)
        .size(20.dp)
        .background(Color.Blue)
)
```

### Modifier.wrapContentWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Size.kt+function:wrapContentWidth)

```
fun Modifier.wrapContentWidth(
    align: Alignment.Horizontal = Alignment.CenterHorizontally,
    unbounded: Boolean = false
): Modifier
```

Allow the content to measure at its desired width without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()`, and, if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)` is true, also without regard for the incoming measurement `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()`. If the content's measured size is smaller than the minimum width constraint, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)` it within that minimum width space. If the content's measured size is larger than the maximum width constraint (only possible when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)` is true), `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).wrapContentWidth(androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean)` over the maximum width space.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Here the result will be a 20.dp x 50.dp blue box centered vertically in a 50.dp x 50.dp
// space. Because of the size modifier, if wrapContentWidth did not exist,
// the blue rectangle would actually be 50.dp x 50.dp to satisfy the size set by the modifier.
// However, because we provide wrapContentWidth, the blue rectangle is specified to be wrap
// content in width - if the desired width is smaller than 50.dp, it will be centered
// horizontally in this space. Therefore the 50.dp x 20.dp is centered horizontally
// in the space.
Box(
    Modifier.size(50.dp)
        .wrapContentWidth(Alignment.CenterHorizontally)
        .width(20.dp)
        .background(Color.Blue)
)
```

### Modifier.onInterceptKeyBeforeSoftKeyboard

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/key/SoftwareKeyboardInterceptionModifier.kt+function:onInterceptKeyBeforeSoftKeyboard)

```
fun Modifier.onInterceptKeyBeforeSoftKeyboard(
    onInterceptKeyBeforeSoftKeyboard: (KeyEvent) -> Boolean
): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events before they are sent to the software keyboard. This can be used to intercept key input from a DPad, or physical keyboard connected to the device and is not applicable to input that is sent to the soft keyboard via spell check or autocomplete.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.onPreviewKeyEvent

// When the inner Box is focused, and the user presses a key, the key goes down the hierarchy
// and then back up to the parent. At any stage you can stop the propagation by returning
// true to indicate that you consumed the event.
Box(Modifier.onPreviewKeyEvent { keyEvent1 -> false }.onKeyEvent { keyEvent4 -> false }) {
    Box(
        Modifier.onPreviewKeyEvent { keyEvent2 -> false }
            .onKeyEvent { keyEvent3 -> false }
            .focusable()
    )
}
```

| Parameters |
|---|---|
| `onInterceptKeyBeforeSoftKeyboard: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/SoftKeyboardInterceptionModifierNode`'s parent, and ultimately to the software keyboard. |

### Modifier.onPreInterceptKeyBeforeSoftKeyboard

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/key/SoftwareKeyboardInterceptionModifier.kt+function:onPreInterceptKeyBeforeSoftKeyboard)

```
fun Modifier.onPreInterceptKeyBeforeSoftKeyboard(
    onPreInterceptKeyBeforeSoftKeyboard: (KeyEvent) -> Boolean
): Modifier
```

Adding this `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter of a component will allow it to intercept hardware key events before they are sent to the software keyboard. This can be used to intercept key input from a DPad, or physical keyboard connected to the device and is not applicable to input that is sent to the soft keyboard via spell check or autocomplete. This modifier is similar to `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/onInterceptKeyBeforeSoftKeyboard.modifier#(androidx.compose.ui.Modifier).onInterceptKeyBeforeSoftKeyboard(kotlin.Function1)`, but allows a parent composable to intercept the hardware key event before any child.

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.onPreviewKeyEvent

// When the inner Box is focused, and the user presses a key, the key goes down the hierarchy
// and then back up to the parent. At any stage you can stop the propagation by returning
// true to indicate that you consumed the event.
Box(Modifier.onPreviewKeyEvent { keyEvent1 -> false }.onKeyEvent { keyEvent4 -> false }) {
    Box(
        Modifier.onPreviewKeyEvent { keyEvent2 -> false }
            .onKeyEvent { keyEvent3 -> false }
            .focusable()
    )
}
```

| Parameters |
|---|---|
| `onPreInterceptKeyBeforeSoftKeyboard: (https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyEvent`. Return true to stop propagation of this event. If you return false, the key event will be sent to this `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/SoftKeyboardInterceptionModifierNode`'s child. If none of the children consume the event, it will be sent back up to the root `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/KeyInputModifierNode` using the onKeyEvent callback, and ultimately to the software keyboard. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | true if the event is consumed, false otherwise. |

### Modifier.suppressStatusBar

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/StatusBar.kt+function:suppressStatusBar)

```
fun Modifier.suppressStatusBar(): Modifier
```

Suppresses the status bar and collapses top status bar inset padding to 0.dp.

In cases where the system status bar overlay is not yet supported by the platform, the fallback `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` will also be suppressed for consistency. Outside of a scaffold (such as in a standalone dialog or overlay window), hides the status bar directly on the current window and restores the initial visibility state when leaving composition or becoming inactive.

For design guidance and best practices on status bar suppression and immersive experiences on Wear OS, see the [Status Bar](https://developer.android.com/training/wearables/status-bar) guide.

**Layout-Phase Usage:** When using `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenScaffold.composable#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.OverscrollEffect,kotlin.Function2)`, pass `contentPadding` directly to containers like TransformingLazyColumn as content padding or to layout modifiers (such as `Modifier.padding(contentPadding)`) rather than inspecting `contentPadding.calculateTopPadding()` directly during the composition phase. Inspecting padding values during composition before the first layout pass can observe initial unsuppressed insets before suppression nodes are fully attached, whereas layout modifiers evaluate insets during measure/layout where suppression state is fully resolved:

```kotlin
// Recommended (evaluated in layout phase after child nodes attach):
ScreenScaffold { contentPadding ->
    Box(modifier = Modifier.fillMaxSize().padding(contentPadding)) {
        DatePicker() // Suppresses status bar internally
    }
}

// Avoid (eager composition read before child nodes attach):
ScreenScaffold { contentPadding ->
    val topPadding = contentPadding.calculateTopPadding()
    DatePicker() // Suppresses status bar internally
}
```

Example of status bar suppression for an individual component or overlay within a screen (such as a picker or media player):

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.suppressStatusBar

// Suppress the status bar to avoid overlapping with the full-screen circular progress
// indicator.
Box(
    modifier =
        Modifier.suppressStatusBar()
            .background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    CircularProgressIndicator(progress = { 0.75f }, startAngle = 120f, endAngle = 60f)
}
```

Example of status bar suppression if only a specific screen in your app should be full-screen / immersive:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.suppressStatusBar

// Suppress the status bar for a screen and collapse its insets to 0.dp.
ScreenScaffold(modifier = Modifier.suppressStatusBar()) { contentPadding ->
    Box(
        modifier =
            Modifier.background(MaterialTheme.colorScheme.background)
                .fillMaxSize()
                .padding(contentPadding)
                .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
    ) {
        CircularProgressIndicator(progress = { 0.75f }, startAngle = 120f, endAngle = 60f)
    }
}
```

Example of status bar suppression if the entire application (or Activity) is an immersive full-screen experience across all screens - this is not recommended for most apps because users will lose access to the time and important status indicators on every screen:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.suppressStatusBar

// Suppress the status bar for the entire application and collapse insets on all child screens.
// Note: App-level suppression is not recommended for most apps because users will lose access
// to the time and important status indicators on every screen.
AppScaffold(modifier = Modifier.suppressStatusBar()) {
    ScreenScaffold { contentPadding ->
        Box(
            modifier =
                Modifier.background(MaterialTheme.colorScheme.background)
                    .fillMaxSize()
                    .padding(contentPadding),
            contentAlignment = Alignment.Center,
        ) {
            Text("App-level suppression")
        }
    }
}
```

### Modifier.graphicsLayer

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleGraphicsLayerModifier.kt+function:graphicsLayer)

```
@ExperimentalFoundationStyleApi
fun Modifier.graphicsLayer(
    layerRequired: (() -> Boolean)? = null,
    block: GraphicsLayerScope.() -> Unit
): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` that makes content draw into a draw layer. The draw layer can be invalidated separately from parents. A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` should be used when the content updates independently from anything above it to minimize the invalidated content.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/graphicsLayer.modifier#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` can be used to apply effects to content, such as scaling, rotation, opacity, shadow, and clipping. Prefer this version when you have layer properties backed by a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` or an animated value as reading a state inside `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` will only cause the layer properties update without triggering recomposition and relayout.

NOTE: `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` can be invoked multiple times, which is why it's important for performance to minimize work done inside of it. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` may also be invoked before effects.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` can be used to avoid creating a layer that will do nothing. The avoids the overhead of the layer if no properties will be modified from their default value.

| Parameters |
|---|---|
| `layerRequired: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)? = null` | return whether the layer is required. If the parameter is `null` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` returns `true`, a layer is created. If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` returns `false` then the layer is not created and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)` is not invoked. This can be used to determine if a layer is necessary based on the properties that will be set by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function0,kotlin.Function1)`. |
| `block: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | block on `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/GraphicsLayerScope` where you define the layer properties. |

### Modifier.styleGraphicsLayer

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleGraphicsLayerModifier.kt+function:styleGraphicsLayer)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleGraphicsLayer(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the graphics layer behavior of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/LayerStyleScope` in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable)

```
fun Modifier.styleable(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the behavior of the properties from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

This modifier is an intermediate step from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)` that takes just a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` to one that takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver`.

This will be moved to be an example of how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/appearance.modifier#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` to implement the style properties similar to those provided in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable)

```
@ExperimentalFoundationStyleApi
fun Modifier.[styleable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState))(styleState: StyleState?): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> The styleable() modifier must provide one or more 'style' parameter values. Calling it with no style parameter values has no effect.

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. Styles that are further "to the right", will have the properties they set override set properties of Styles to the left of them.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` to creates a "styleable" component whose looks can be customized using the provided `style` together with one or more default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` objects. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` again,

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState? = null, style: Style): Modifier
```

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` to creates a "styleable" component whose looks can be customized using the provided style. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` again.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState? = null` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| `style: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | the style to apply to the styleable region. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState?, vararg styles: Style): Modifier
```

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. Styles that are further "to the right", will have the properties they set override set properties of Styles to the left of them.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` to creates a "styleable" component whose looks can be customized using the provided `style` together with one or more default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` objects. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` again,

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| `vararg styles: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | the styles to apply, in order, to the stylable region. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

### Modifier.styleBorderPadding

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StylePadding.kt+function:styleBorderPadding)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleBorderPadding(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the padding behavior `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/BorderScope#borderWidth(androidx.compose.ui.unit.Dp)` of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleContentPadding

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StylePadding.kt+function:styleContentPadding)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleContentPadding(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the behavior of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.ContentPaddingScope).contentPadding(androidx.compose.ui.unit.Dp)` properties of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleExternalPadding

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StylePadding.kt+function:styleExternalPadding)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleExternalPadding(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the behavior of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.ExternalPaddingScope).externalPadding(androidx.compose.ui.unit.Dp)` properties of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleResolver

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleResolverNode.kt+function:styleResolver)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleResolver(styleResolver: StyleResolver): Modifier
```

A modifier that binds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver` to the location in the composition it should resolve properties. A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver` is required to be passed to one and only one `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).styleResolver(androidx.compose.foundation.style.StyleResolver)` modifier. An exception will be thrown if a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver` instance is supplied to more than one `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.ui.Modifier).styleResolver(androidx.compose.foundation.style.StyleResolver)` modifiers.

| Parameters |
|---|---|
| `styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver` | the resolver to be bound to this modifier. |

### Modifier.surface

android Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/Surface.kt+function:surface)

```
@Composable
fun Modifier.surface(
    enabled: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    focusedColor: Color = SurfaceDefaults.focusedColor(color),
    contentColor: Color = calculateContentColor(color),
    focusedContentColor: Color = calculateContentColor(focusedColor),
    depthEffect: SurfaceDepthEffect? = null,
    interactionSource: InteractionSource? = null
): Modifier
```

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/surface.composable#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` implements shared visual decoration for Jetpack Compose Glimmer components:

1. Clipping: a surface clips its children to the shape specified by `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)`

2. Border: a surface draws an inner border to emphasize the boundary of the component. When focused, a surface draws a wider border with a focused highlight on top to indicate the focus state.

3. Background: a surface has a background color of `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` (and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` when focused).

4. Depth effect: a surface can have different `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/DepthEffect` shadows for different states, as specified by `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)`.

5. Content color: a surface provides a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` (and `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)` when focused) for text and icons inside the surface. By default this is calculated from the provided background color.

6. Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)`.

Use surface on its own for decorative elements that cannot be interacted with by a user:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
    Text("This is a surface")
}
```

In most cases surfaces should be interactive, to allow users to consistently move focus and navigate between components. You can use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` for focus-only surfaces, or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` and other modifiers for surfaces with actions. To ensure the surface correctly reflects the interaction states, provide the same `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` to all modifiers.

For example, to create a clickable surface:

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

val interactionSource = remember { MutableInteractionSource() }
Box(
    Modifier.surface(
            // Provide the same interaction source here and to clickable to make sure that
            // surface appears focused and pressed when interacted with
            interactionSource = interactionSource
        )
        .clickable(interactionSource = interactionSource, onClick = {})
        .padding(horizontal = 24.dp, vertical = 20.dp)
) {
    Text("This is a clickable surface")
}
```

Similarly, to create a focusable surface:

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

val interactionSource = remember { MutableInteractionSource() }
Box(
    Modifier.surface(
            // Provide the same interaction source here and to focusable to make sure that
            // surface appears focused when interacted with.
            interactionSource = interactionSource
        )
        .focusable(interactionSource = interactionSource)
        .padding(horizontal = 24.dp, vertical = 20.dp)
) {
    Text("This is a focusable surface")
}
```

To create a surface with custom colors:

```kotlin
import androidx.compose.foundation.focusable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.SurfaceDefaults
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.surface

val interactionSource = remember { MutableInteractionSource() }
Box(
    Modifier.surface(
            focusedColor = SurfaceDefaults.focusedColor(Color(0xFF34E0A1)),
            interactionSource = interactionSource,
        )
        .focusable(interactionSource = interactionSource)
        .padding(horizontal = 24.dp, vertical = 20.dp)
) {
    Text("Surface with custom colors")
}
```

| Parameters |
|---|---|
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this surface. When `false`, a disabled overlay visual will be drawn on top of the surface. Note that this only affects the visual decoration; it does not intercept input or block interaction states (such as focus or press) from the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#(androidx.compose.ui.Modifier).surface(kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.xr.glimmer.SurfaceDepthEffect,androidx.compose.foundation.interaction.InteractionSource)`. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = GlimmerTheme.shapes.medium` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` used to clip this surface, and also used to draw the background and border |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = GlimmerTheme.colors.surface` | the background `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` for this surface. When providing a custom color, ensure it is suitable for a surface background. |
| `focusedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = SurfaceDefaults.focusedColor(color)` | the background `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` for this surface when focused. When providing a custom color, ensure it is suitable for a focused surface background or use `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/SurfaceDefaults#focusedColor(androidx.compose.ui.graphics.Color)` to adapt it. |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = calculateContentColor(color)` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` for content inside this surface |
| `focusedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = calculateContentColor(focusedColor)` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` for content inside this surface when focused |
| `depthEffect: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/SurfaceDepthEffect? = null` | the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/SurfaceDepthEffect` for this surface, representing the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/DepthEffect` shadows rendered in different states. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource? = null` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` that emits `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this surface. For interactive surfaces, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` instance provided to this surface must be shared with the modifier responsible for emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`. |

### Modifier.pointerInput

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/SuspendingPointerInputFilter.kt+function:pointerInput)

```
fun Modifier.[pointerInput](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1))(block: suspend PointerInputScope.() -> Unit): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Modifier.pointerInput must provide one or more 'key' parameters that define the identity of the modifier and determine when its previous input processing coroutine should be cancelled and a new effect launched for the new key.

Create a modifier for processing pointer input within the region of the modified element.

It is an error to call `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` without at least one `key` parameter.

### Modifier.pointerInput

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/SuspendingPointerInputFilter.kt+function:pointerInput)

```
fun Modifier.pointerInput(key1: Any?, block: PointerInputEventHandler): Modifier
```

Create a modifier for processing pointer input within the region of the modified element.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)`s may call `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope#awaitPointerEventScope(kotlin.coroutines.SuspendFunction1)` to install a pointer input handler that can `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope#awaitPointerEvent(androidx.compose.ui.input.pointer.PointerEventPass)` to receive and consume pointer input events. Extension functions on `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope` may be defined to perform higher-level gesture detection. The pointer input handling `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` will be cancelled and **re-started** when `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` is recomposed with a different `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` or the `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` class is different.

When a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` modifier is created by composition, if `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` captures any local variables to operate on, two patterns are common for working with changes to those variables depending on the desired behavior.

Specifying the captured value as a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` parameter will cause `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` to cancel and restart from the beginning if the value changes:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    Box(
        Modifier.fillMaxSize().pointerInput(parameter) {
            // This entire pointerInput block will restart from the beginning
            // if and when `parameter` changes, since it's used as a key in
            // the creation of the `pointerInput` modifier
            detectTapGestures { performAction(parameter) }
        }
    )
}
```

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` should **not** restart when a captured value is changed but the value should still be updated for its next use, use `https://developer.android.com/reference/kotlin/androidx/compose/runtime/rememberUpdatedState.composable#rememberUpdatedState(kotlin.Any)` to update a value holder that is accessed by `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)`:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    val currentParameter by rememberUpdatedState(parameter)
    Box(
        Modifier.fillMaxSize().pointerInput(Unit) {
            // This pointerInput block will never restart since
            // it specifies a key of `Unit`, which never changes
            detectTapGestures {
                // ...however, currentParameter is updated out from under this running
                // pointerInput suspend block by rememberUpdatedState, and will always
                // contain the latest value updated by the composition when a tap
                // is detected here.
                performAction(currentParameter)
            }
        }
    )
}
```

***Note*** Any removal operations on Android Views from `pointerInput` should wrap the `block` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

### Modifier.pointerInput

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/SuspendingPointerInputFilter.kt+function:pointerInput)

```
fun Modifier.pointerInput(vararg keys: Any?, block: PointerInputEventHandler): Modifier
```

Create a modifier for processing pointer input within the region of the modified element.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)`s may call `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope#awaitPointerEventScope(kotlin.coroutines.SuspendFunction1)` to install a pointer input handler that can `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope#awaitPointerEvent(androidx.compose.ui.input.pointer.PointerEventPass)` to receive and consume pointer input events. Extension functions on `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope` may be defined to perform higher-level gesture detection. The pointer input handling `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` will be cancelled and **re-started** when `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` is recomposed with any different `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` or the `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` class is different.

When a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` modifier is created by composition, if `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` captures any local variables to operate on, two patterns are common for working with changes to those variables depending on the desired behavior.

Specifying the captured value as a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` parameter will cause `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` to cancel and restart from the beginning if the value changes:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    Box(
        Modifier.fillMaxSize().pointerInput(parameter) {
            // This entire pointerInput block will restart from the beginning
            // if and when `parameter` changes, since it's used as a key in
            // the creation of the `pointerInput` modifier
            detectTapGestures { performAction(parameter) }
        }
    )
}
```

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)` should **not** restart when a captured value is changed but the value should still be updated for its next use, use `https://developer.android.com/reference/kotlin/androidx/compose/runtime/rememberUpdatedState.composable#rememberUpdatedState(kotlin.Any)` to update a value holder that is accessed by `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Array,androidx.compose.ui.input.pointer.PointerInputEventHandler)`:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    val currentParameter by rememberUpdatedState(parameter)
    Box(
        Modifier.fillMaxSize().pointerInput(Unit) {
            // This pointerInput block will never restart since
            // it specifies a key of `Unit`, which never changes
            detectTapGestures {
                // ...however, currentParameter is updated out from under this running
                // pointerInput suspend block by rememberUpdatedState, and will always
                // contain the latest value updated by the composition when a tap
                // is detected here.
                performAction(currentParameter)
            }
        }
    )
}
```

***Note*** Any removal operations on Android Views from `pointerInput` should wrap the `block` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

### Modifier.pointerInput

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/input/pointer/SuspendingPointerInputFilter.kt+function:pointerInput)

```
fun Modifier.pointerInput(
    key1: Any?,
    key2: Any?,
    block: PointerInputEventHandler
): Modifier
```

Create a modifier for processing pointer input within the region of the modified element.

`https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)`s may call `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope#awaitPointerEventScope(kotlin.coroutines.SuspendFunction1)` to install a pointer input handler that can `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope#awaitPointerEvent(androidx.compose.ui.input.pointer.PointerEventPass)` to receive and consume pointer input events. Extension functions on `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/AwaitPointerEventScope` may be defined to perform higher-level gesture detection. The pointer input handling `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` will be cancelled and **re-started** when `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` is recomposed with a different `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)`, or the `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` class is different.

When a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` modifier is created by composition, if `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` captures any local variables to operate on, two patterns are common for working with changes to those variables depending on the desired behavior.

Specifying the captured value as a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` parameter will cause `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` to cancel and restart from the beginning if the value changes:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    Box(
        Modifier.fillMaxSize().pointerInput(parameter) {
            // This entire pointerInput block will restart from the beginning
            // if and when `parameter` changes, since it's used as a key in
            // the creation of the `pointerInput` modifier
            detectTapGestures { performAction(parameter) }
        }
    )
}
```

If `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)` should **not** restart when a captured value is changed but the value should still be updated for its next use, use `https://developer.android.com/reference/kotlin/androidx/compose/runtime/rememberUpdatedState.composable#rememberUpdatedState(kotlin.Any)` to update a value holder that is accessed by `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,androidx.compose.ui.input.pointer.PointerInputEventHandler)`:

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun MyComposable(parameter: String) {
    val currentParameter by rememberUpdatedState(parameter)
    Box(
        Modifier.fillMaxSize().pointerInput(Unit) {
            // This pointerInput block will never restart since
            // it specifies a key of `Unit`, which never changes
            detectTapGestures {
                // ...however, currentParameter is updated out from under this running
                // pointerInput suspend block by rememberUpdatedState, and will always
                // contain the latest value updated by the composition when a tap
                // is detected here.
                performAction(currentParameter)
            }
        }
    )
}
```

***Note*** Any removal operations on Android Views from `pointerInput` should wrap the `block` in a `post { }` block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

### Modifier.edgeSwipeToDismiss

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/SwipeToDismissBox.kt+function:edgeSwipeToDismiss)

```
fun Modifier.[edgeSwipeToDismiss](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp))(
    swipeToDismissBoxState: SwipeToDismissBoxState,
    edgeWidth: Dp = SwipeToDismissBoxDefaults.EdgeWidth
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> SwipeToDismiss has been migrated to androidx.wear.compose.foundation. Please import Modifier.edgeSwipeToDismiss from androidx.wear.compose.foundation instead, use this instead:
>
> ```kotlin
> androidx.wear.compose.foundation.edgeSwipeToDismiss(
> ```

Handles swipe to dismiss from the edge of the viewport.

Used when the content of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` is handling all the gestures of the viewport, which prevents `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` from handling the swipe-to-dismiss gesture. Examples of this scenario are horizontal paging, such as 2-d scrolling a Map or swiping horizontally between pages.

Use of `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` defines a zone on the left side of the viewport of width `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` in which the swipe-right gesture is intercepted. Other touch events are ignored - vertical scroll, click, long click, etc.

Currently Edge swipe, like swipe to dismiss, is only supported on the left part of the viewport regardless of layout direction as content is swiped away from left to right.

Requires that the element to which this modifier is applied exists within a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/BasicSwipeToDismissBox.composable#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` which is using the same `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBoxState` instance.

Requires that the element to which this modifier is applied notifies the nested scroll system about the scrolling events that are happening on the element. For example, using a `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollDispatcher`.

Example of a modifier usage with SwipeToDismiss

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}
```

| Parameters |
|---|---|
| `swipeToDismissBoxState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBoxState` | A state of SwipeToDismissBox. Used to trigger swipe gestures on SwipeToDismissBox |
| `edgeWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SwipeToDismissBoxDefaults.EdgeWidth` | A width of edge, where swipe should be recognised |

### Modifier.swipeable

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/Swipeable.kt+function:swipeable)

```
@ExperimentalMaterialApi
fun <T : Any?> Modifier.[swipeable](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp))(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from, to) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs. Please see developer.android.com for an overview of the changes and a migration guide.

Enable swipe gestures between a set of predefined states.

To use this, you must provide a map of anchors (in pixels) to states (of type `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`). Note that this map cannot be empty and cannot have two anchors mapped to the same state.

When a swipe is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/compose/material/SwipeableState` will be updated with the swipe delta. You should use this offset to move your content accordingly (see `Modifier.offsetPx`). When the swipe ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/compose/material/SwipeableState` will also be updated to the state corresponding to the new anchor. The target anchor is calculated based on the provided positional `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`.

Swiping is constrained between the minimum and maximum anchors. If the user attempts to swipe past these bounds, a resistance effect will be applied by default. The amount of resistance at each edge is specified by the `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` config. To disable all resistance, set it to `null`.

For an example of a `https://developer.android.com/reference/kotlin/androidx/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` with three states, see:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.Text
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// Draw a slider-like composable consisting of a red square moving along a
// black background, with three states: "A" (min), "B" (middle), and "C" (max).
val width = 350.dp
val squareSize = 50.dp

val swipeableState = rememberSwipeableState("A")
val sizePx = with(LocalDensity.current) { (width - squareSize).toPx() }
val anchors = mapOf(0f to "A", sizePx / 2 to "B", sizePx to "C")

Box(
    modifier =
        Modifier.width(width)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.5f) },
                orientation = Orientation.Horizontal,
            )
            .background(Color.Black)
) {
    Box(
        Modifier.offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
            .size(squareSize)
            .background(Color.Red),
        contentAlignment = Alignment.Center,
    ) {
        Text(swipeableState.currentValue, color = Color.White, fontSize = 24.sp)
    }
}
```

| Parameters |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?>` | The type of the state. |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material/SwipeableState<T>` | The state of the `https://developer.android.com/reference/kotlin/androidx/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`. |
| `anchors: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, T>` | Pairs of anchors and states, used to map anchors to states and vice versa. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` can be swiped. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` is enabled and should react to the user's input. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether to reverse the direction of the swipe, so a top to bottom swipe will behave like bottom to top, and a left to right swipe will behave like right to left. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `thresholds: (from, to) -> https://developer.android.com/reference/kotlin/androidx/compose/material/ThresholdConfig = { _, _ -> FixedThreshold(56.dp) }` | Specifies where the thresholds between the states are. The thresholds will be used to determine which state to animate to when swiping stops. This is represented as a lambda that takes two states and returns the threshold between them in the form of a `https://developer.android.com/reference/kotlin/androidx/compose/material/ThresholdConfig`. Note that the order of the states corresponds to the swipe direction. |
| `resistance: https://developer.android.com/reference/kotlin/androidx/compose/material/ResistanceConfig? = resistanceConfig(anchors.keys)` | Controls how much resistance will be applied when swiping past the bounds. |
| `velocityThreshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = VelocityThreshold` | The threshold (in dp per second) that the end velocity has to exceed in order to animate to the next state, even if the positional `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` have not been reached. |

### Modifier.swipeable

android Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Swipeable.kt+function:swipeable)

```
@ExperimentalWearMaterialApi
fun <T : Any?> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from, to) -> ThresholdConfig = { _, _ -> FractionalThreshold(0.5f) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold
): Modifier
```

Enable swipe gestures between a set of predefined states.

To use this, you must provide a map of anchors (in pixels) to states (of type `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`). Note that this map cannot be empty and cannot have two anchors mapped to the same state.

When a swipe is detected, the offset of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeableState` will be updated with the swipe delta. You should use this offset to move your content accordingly (see `Modifier.offsetPx`). When the swipe ends, the offset will be animated to one of the anchors and when that anchor is reached, the value of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeableState` will also be updated to the state corresponding to the new anchor. The target anchor is calculated based on the provided positional `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`.

Swiping is constrained between the minimum and maximum anchors. If the user attempts to swipe past these bounds, a resistance effect will be applied by default. The amount of resistance at each edge is specified by the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` config. To disable all resistance, set it to `null`.

For an example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` with three states, see:

| Parameters |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?>` | The type of the state. |
| `state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeableState<T>` | The state of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)`. |
| `anchors: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, T>` | Pairs of anchors and states, used to map anchors to states and vice versa. |
| `orientation: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/Orientation` | The orientation in which the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` can be swiped. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether this `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/swipeable.modifier#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` is enabled and should react to the user's input. |
| `reverseDirection: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether to reverse the direction of the swipe, so a top to bottom swipe will behave like bottom to top, and a left to right swipe will behave like right to left. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will passed on to the internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/draggable.modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)`. |
| `thresholds: (from, to) -> https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ThresholdConfig = { _, _ -> FractionalThreshold(0.5f) }` | Specifies where the thresholds between the states are. The thresholds will be used to determine which state to animate to when swiping stops. This is represented as a lambda that takes two states and returns the threshold between them in the form of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ThresholdConfig`. Note that the order of the states corresponds to the swipe direction. |
| `resistance: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ResistanceConfig? = resistanceConfig(anchors.keys)` | Controls how much resistance will be applied when swiping past the bounds. |
| `velocityThreshold: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = VelocityThreshold` | The threshold (in dp per second) that the end velocity has to exceed in order to animate to the next state, even if the positional `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#(androidx.compose.ui.Modifier).swipeable(androidx.wear.compose.material.SwipeableState,kotlin.collections.Map,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function2,androidx.wear.compose.material.ResistanceConfig,androidx.compose.ui.unit.Dp)` have not been reached. |

### Modifier.systemGestureExclusion

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/SystemGestureExclusion.android.kt+function:systemGestureExclusion)

```
fun Modifier.systemGestureExclusion(): Modifier
```

Excludes the layout rectangle from the system gesture.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setSystemGestureExclusionRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.systemGestureExclusion

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/SystemGestureExclusion.android.kt+function:systemGestureExclusion)

```
fun Modifier.systemGestureExclusion(exclusion: (LayoutCoordinates) -> Rect): Modifier
```

Excludes a rectangle within the local layout coordinates from the system gesture. After layout, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).systemGestureExclusion(kotlin.Function1)` is called to determine the `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` to exclude from the system gesture area.

The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier`'s location in the layout is passed as passed as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).systemGestureExclusion(kotlin.Function1)`'s parameter.

| See also |
|---|---|
| `https://developer.android.com/reference/android/view/View.html#setSystemGestureExclusionRects(java.util.List&lt;android.graphics.Rect&gt;)` |   |

### Modifier.testTag

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/platform/TestTag.kt+function:testTag)

```
fun Modifier.testTag(tag: String): Modifier
```

Applies a tag to allow modified element to be found in tests.

This is a convenience method for a `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` that sets `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/package-summary#(androidx.compose.ui.semantics.SemanticsPropertyReceiver).testTag()`.

### Modifier.appendTextContextMenuComponents

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/text/contextmenu/modifier/TextContextMenuModifier.kt+function:appendTextContextMenuComponents)

```
fun Modifier.appendTextContextMenuComponents(builder: TextContextMenuBuilderScope.() -> Unit): Modifier
```

Adds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)` to be run when the text context menu is shown within this hierarchy.

When there are multiple instances of this modifier in a layout hierarchy, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)`s are applied in order from bottom to top. They are then filtered by every `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/filterTextContextMenuComponents.modifier#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)` in the hierarchy.

```kotlin
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.contextmenu.builder.item
import androidx.compose.foundation.text.contextmenu.modifier.appendTextContextMenuComponents
import androidx.compose.foundation.text.input.clearText
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.ui.Modifier

val textFieldState = rememberTextFieldState()
BasicTextField(
    state = textFieldState,
    modifier =
        Modifier.appendTextContextMenuComponents {
            separator()
            item(key = ClearKeyDataObject, label = "Clear") {
                textFieldState.clearText()
                close()
            }
            separator()
        },
)
```

| Parameters |
|---|---|
| `builder: https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/builder/TextContextMenuBuilderScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | a snapshot-aware builder function for adding components to the context menu. In this function you can use member functions from the receiver `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/builder/TextContextMenuBuilderScope`, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/builder/TextContextMenuBuilderScope#separator()`, to add components. The `item` function is not in the common source set, but is instead defined as an extension function in the platform specific source sets. |

### Modifier.filterTextContextMenuComponents

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/text/contextmenu/modifier/TextContextMenuModifier.kt+function:filterTextContextMenuComponents)

```
fun Modifier.filterTextContextMenuComponents(
    filter: (TextContextMenuComponent) -> Boolean
): Modifier
```

Adds a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)` to be run when the text context menu is shown within this hierarchy.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)` will not be passed `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/data/TextContextMenuSeparator`, as they pass by default.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)`s added via this modifier will always run after every `builder` added via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/appendTextContextMenuComponents.modifier#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)`. When there are multiple instances of this modifier in a layout hierarchy, every `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/package-summary#(androidx.compose.ui.Modifier).filterTextContextMenuComponents(kotlin.Function1)` must pass in order for a context menu to be shown. They are always applied after all `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/modifier/appendTextContextMenuComponents.modifier#(androidx.compose.ui.Modifier).appendTextContextMenuComponents(kotlin.Function1)` have been applied, but the order in which they run should not be depended on.

```kotlin
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.contextmenu.modifier.filterTextContextMenuComponents
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.ui.Modifier

val textFieldState = rememberTextFieldState()
BasicTextField(
    state = textFieldState,
    modifier =
        Modifier.filterTextContextMenuComponents(
            filter = { component -> component.key === ClearKeyDataObject }
        ),
)
```

| Parameters |
|---|---|
| `filter: (https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/data/TextContextMenuComponent) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | a snapshot-aware lambda that determines whether a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/contextmenu/data/TextContextMenuComponent` should be included in the context menu. |

### Modifier.toggleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Toggleable.kt+function:toggleable)

```
fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onValueChange: (Boolean) -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of toggleable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of toggleable, it is recommended to instead provide `null` to enable lazy creation. If you need the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

```kotlin
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
// content that you want to make toggleable
Text(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether Toggleable is on or off |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` will handle input events and appear enabled for semantics purposes |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this toggleable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when toggleable is clicked, therefore the change of the state in requested. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` | if you require support for an indeterminate state. |

### Modifier.toggleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Toggleable.kt+function:toggleable)

```
fun Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` only when needed. This reduces the performance cost of toggleable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of toggleable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` instead of `null`, as this cannot be lazily created inside toggleable.

```kotlin
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
// content that you want to make toggleable
Text(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether Toggleable is on or off |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this toggleable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when modified element is pressed. Be default, indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Pass `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` will handle input events and appear enabled for semantics purposes |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when toggleable is clicked, therefore the change of the state in requested. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` | if you require support for an indeterminate state. |

### Modifier.triStateToggleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Toggleable.kt+function:triStateToggleable)

```
fun Modifier.triStateToggleable(
    state: ToggleableState,
    enabled: Boolean = true,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

TriStateToggleable should be used when there are dependent Toggleables associated to this component and those can have different values.

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of triStateToggleable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of triStateToggleable, it is recommended to instead provide `null` to enable lazy creation. If you need the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

```kotlin
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.selection.triStateToggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.state.ToggleableState

var checked by remember { mutableStateOf(ToggleableState.Indeterminate) }
// content that you want to make toggleable
Text(
    modifier =
        Modifier.triStateToggleable(
            state = checked,
            onClick = {
                checked =
                    if (checked == ToggleableState.On) ToggleableState.Off
                    else ToggleableState.On
            },
        ),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState` | current value for the component |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` will handle input events and appear enabled for semantics purposes |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this toggleable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks the toggleable. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` | if you want to support only two states: on and off |

### Modifier.triStateToggleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Toggleable.kt+function:triStateToggleable)

```
fun Modifier.triStateToggleable(
    state: ToggleableState,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

TriStateToggleable should be used when there are dependent Toggleables associated to this component and those can have different values.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` only when needed. This reduces the performance cost of triStateToggleable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of triStateToggleable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` instead of `null`, as this cannot be lazily created inside triStateToggleable.

```kotlin
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.selection.triStateToggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.state.ToggleableState

var checked by remember { mutableStateOf(ToggleableState.Indeterminate) }
// content that you want to make toggleable
Text(
    modifier =
        Modifier.triStateToggleable(
            state = checked,
            onClick = {
                checked =
                    if (checked == ToggleableState.On) ToggleableState.Off
                    else ToggleableState.On
            },
        ),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState` | current value for the component |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this triStateToggleable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when modified element is pressed. Be default, indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Pass `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` will handle input events and appear enabled for semantics purposes |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | will be called when user clicks the toggleable. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` | if you want to support only two states: on and off |

### Modifier.touchTargetAwareSize

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/TouchTargetAwareSize.kt+function:touchTargetAwareSize)

```
fun Modifier.touchTargetAwareSize(size: Dp): Modifier
```

Modifier to set both the size and recommended touch target for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButton.composable#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` and TextButton.

### Modifier.transformable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Transformable.kt+function:transformable)

```
fun Modifier.transformable(
    state: TransformableState,
    lockRotationOnZoomPan: Boolean = false,
    enabled: Boolean = true
): Modifier
```

Enable transformation gestures of the modified UI element.

Users should update their state themselves using default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` and its `onTransformation` callback or by implementing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` interface manually and reflect their own state in UI when using this component.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.animateZoomBy
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.rememberTransformableState
import androidx.compose.foundation.gestures.transformable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.geometry.center
import androidx.compose.ui.geometry.isSpecified
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.toSize

/**
 * Rotates the given offset around the origin by the given angle in degrees.
 *
 * A positive angle indicates a counterclockwise rotation around the right-handed 2D Cartesian
 * coordinate system.
 *
 * See: [Rotation matrix](https://en.wikipedia.org/wiki/Rotation_matrix)
 */
fun Offset.rotateBy(angle: Float): Offset {
    val angleInRadians = angle * (PI / 180)
    val cos = cos(angleInRadians)
    val sin = sin(angleInRadians)
    return Offset((x * cos - y * sin).toFloat(), (x * sin + y * cos).toFloat())
}

Box(Modifier.size(200.dp).clipToBounds().background(Color.LightGray)) {
    // set up all transformation states
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    val coroutineScope = rememberCoroutineScope()

    var size by remember { mutableStateOf(Size.Zero) }

    // let's create a modifier state to specify how to update our UI state defined above
    val state =
        rememberTransformableState { centroid, zoomChange, offsetChange, rotationChange ->
            // note: scale goes by factor, not an absolute difference, so we need to multiply it
            // for this example, we don't allow downscaling, so cap it to 1f
            val oldScale = scale
            val newScale = max(scale * zoomChange, 1f)

            // If the centroid isn't specified, assume it should be applied from the center
            val effectiveCentroid = centroid.takeIf { it.isSpecified } ?: size.center

            // For natural zooming and rotating, the centroid of the gesture should
            // be the fixed point where zooming and rotating occurs.
            // We compute where the centroid was (in the pre-transformed coordinate
            // space), and then compute where it will be after this delta.
            // We then compute what the new offset should be to keep the centroid
            // visually stationary for rotating and zooming, and also apply the pan.
            offset =
                (offset + effectiveCentroid / oldScale).rotateBy(rotationChange) -
                    (effectiveCentroid / newScale + offsetChange / oldScale)
            scale = newScale
            rotation += rotationChange
        }
    Box(
        Modifier.onSizeChanged { size = it.toSize() }
            // add transformable to listen to multitouch transformation events after offset
            .transformable(state = state)
            // optional for example: add double click to zoom
            .pointerInput(Unit) {
                detectTapGestures(
                    onDoubleTap = { offset ->
                        coroutineScope.launch { state.animateZoomBy(4f, centroid = offset) }
                    }
                )
            }
            .fillMaxSize()
            .border(1.dp, Color.Green)
    ) {
        Text(
            "\uD83C\uDF55",
            fontSize = 32.sp,
            // apply other transformations like rotation and zoom on the pizza slice emoji
            modifier =
                Modifier.fillMaxSize()
                    .graphicsLayer {
                        translationX = -offset.x * scale
                        translationY = -offset.y * scale
                        scaleX = scale
                        scaleY = scale
                        rotationZ = rotation
                        transformOrigin = TransformOrigin(0f, 0f)
                    }
                    .wrapContentSize(align = Alignment.Center),
        )
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` of the transformable. Defines how transformation events will be interpreted by the user land logic, contains useful information about on-going events and provides animation capabilities. |
| `lockRotationOnZoomPan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | If `true`, rotation is allowed only if touch slop is detected for rotation before pan or zoom motions. If not, pan and zoom gestures will be detected, but rotation gestures will not be. If `false`, once touch slop is reached, all three gestures are detected. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether zooming by gestures is enabled or not |

### Modifier.transformable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/gestures/Transformable.kt+function:transformable)

```
fun Modifier.transformable(
    state: TransformableState,
    canPan: (Offset) -> Boolean,
    lockRotationOnZoomPan: Boolean = false,
    enabled: Boolean = true
): Modifier
```

Enable transformation gestures of the modified UI element.

Users should update their state themselves using default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` and its `onTransformation` callback or by implementing `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` interface manually and reflect their own state in UI when using this component.

This overload of transformable modifier provides `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).transformable(androidx.compose.foundation.gestures.TransformableState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean)` parameter, which allows the caller to control when the pan can start. making pan gesture to not to start when the scale is 1f makes transformable modifiers to work well within the scrollable container. See example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.animateZoomBy
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.rememberTransformableState
import androidx.compose.foundation.gestures.transformable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.geometry.center
import androidx.compose.ui.geometry.isSpecified
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.toSize

/**
 * Rotates the given offset around the origin by the given angle in degrees.
 *
 * A positive angle indicates a counterclockwise rotation around the right-handed 2D Cartesian
 * coordinate system.
 *
 * See: [Rotation matrix](https://en.wikipedia.org/wiki/Rotation_matrix)
 */
fun Offset.rotateBy(angle: Float): Offset {
    val angleInRadians = angle * (PI / 180)
    val cos = cos(angleInRadians)
    val sin = sin(angleInRadians)
    return Offset((x * cos - y * sin).toFloat(), (x * sin + y * cos).toFloat())
}

Row(Modifier.size(width = 120.dp, height = 100.dp).horizontalScroll(rememberScrollState())) {
    // first child of the scrollable row is a transformable
    Box(Modifier.size(100.dp).clipToBounds().background(Color.LightGray)) {
        // set up all transformation states
        var scale by remember { mutableStateOf(1f) }
        var rotation by remember { mutableStateOf(0f) }
        var offset by remember { mutableStateOf(Offset.Zero) }
        val coroutineScope = rememberCoroutineScope()

        var size by remember { mutableStateOf(Size.Zero) }

        // let's create a modifier state to specify how to update our UI state defined above
        val state =
            rememberTransformableState { centroid, zoomChange, offsetChange, rotationChange ->
                val oldScale = scale
                val newScale = max(scale * zoomChange, 1f)

                // If the centroid isn't specified, assume it should be applied from the center
                val effectiveCentroid = centroid.takeIf { it.isSpecified } ?: size.center

                // For natural zooming and rotating, the centroid of the gesture should
                // be the fixed point where zooming and rotating occurs.
                // We compute where the centroid was (in the pre-transformed coordinate
                // space), and then compute where it will be after this delta.
                // We then compute what the new offset should be to keep the centroid
                // visually stationary for rotating and zooming, and also apply the pan.
                offset =
                    (offset + effectiveCentroid / oldScale).rotateBy(rotationChange) -
                        (effectiveCentroid / newScale + offsetChange / oldScale)
                scale = newScale
                rotation += rotationChange
            }
        Box(
            Modifier.onSizeChanged { size = it.toSize() }
                // add transformable to listen to multitouch transformation events after offset
                // To make sure our transformable work well within pager or scrolling lists,
                // disallow panning if we are not zoomed in.
                .transformable(state = state, canPan = { scale != 1f })
                // optional for example: add double click to zoom
                .pointerInput(Unit) {
                    detectTapGestures(
                        onDoubleTap = { offset ->
                            coroutineScope.launch { state.animateZoomBy(4f, centroid = offset) }
                        }
                    )
                }
                .fillMaxSize()
                .border(1.dp, Color.Green)
        ) {
            Text(
                "\uD83C\uDF55",
                fontSize = 32.sp,
                modifier =
                    Modifier.fillMaxSize()
                        .graphicsLayer {
                            translationX = -offset.x * scale
                            translationY = -offset.y * scale
                            scaleX = scale
                            scaleY = scale
                            rotationZ = rotation
                            transformOrigin = TransformOrigin(0f, 0f)
                        }
                        .wrapContentSize(align = Alignment.Center),
            )
        }
    }
    // other children are just colored boxes
    Box(Modifier.size(100.dp).background(Color.Red).border(2.dp, Color.Black))
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TransformableState` of the transformable. Defines how transformation events will be interpreted by the user land logic, contains useful information about on-going events and provides animation capabilities. |
| `canPan: (https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether the pan gesture can be performed or not given the pan offset |
| `lockRotationOnZoomPan: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | If `true`, rotation is allowed only if touch slop is detected for rotation before pan or zoom motions. If not, pan and zoom gestures will be detected, but rotation gestures will not be. If `false`, once touch slop is reached, all three gestures are detected. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether zooming by gestures is enabled or not |

### Modifier.transformedHeight

android Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/lazy/TransformationSpec.kt+function:transformedHeight)

```
fun Modifier.transformedHeight(
    scope: TransformingLazyColumnItemScope,
    transformationSpec: TransformationSpec
): Modifier
```

Convenience modifier to calculate transformed height using `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/lazy/TransformationSpec`.

### Modifier.visible

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Visible.kt+function:visible)

```
fun Modifier.visible(visible: Boolean): Modifier
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that controls the visibility of the Layout it is applied to. When `visible` is `false`, the element will not be placed and thus will not be drawn or be interactable, but it will still be measured and take up space. It will also be invisible to accessibility services.

This is similar to the `View.INVISIBLE` visibility in the classic Android View system.

Note that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/visible.modifier#(androidx.compose.ui.Modifier).visible(kotlin.Boolean)` is not suitable for managing the visibility of a composable involved in a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` transition because it prevents placement.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.visible
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box {
    // This box will not be visible but will still occupy 50.dp x 50.dp of space.
    Box(modifier = Modifier.size(50.dp).background(Color.Red).visible(false))
}
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `true` to make the component visible, `false` to hide it. |

### Modifier.imeNestedScroll

android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsConnection.android.kt+function:imeNestedScroll)

```
@ExperimentalLayoutApi
fun Modifier.imeNestedScroll(): Modifier
```

Controls the soft keyboard as a nested scrolling on Android `https://developer.android.com/reference/android/os/Build.VERSION_CODES.html#R` and later. This allows the user to drag the soft keyboard up and down.

After scrolling, the IME will animate either to the fully shown or fully hidden position, depending on the position and fling.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imeNestedScroll
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

LazyColumn(
    modifier =
        Modifier.fillMaxSize() // fill the window
            .imePadding() // pad out the bottom for the IME
            .imeNestedScroll(), // scroll IME at the bottom
    reverseLayout = true, // First item is at the bottom
) {
    // content
    items(50) { Text("Hello World") }
}
```

### Modifier.captionBarPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:captionBarPadding)

```
fun Modifier.captionBarPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).captionBar()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).captionBar()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/displayCutoutPadding.modifier#(androidx.compose.ui.Modifier).displayCutoutPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/captionBarPadding.modifier#(androidx.compose.ui.Modifier).captionBarPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.captionBarPadding
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.captionBarPadding()) {
                // app content
            }
        }
    }
}
```

### Modifier.consumeWindowInsets

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.kt+function:consumeWindowInsets)

```
fun Modifier.consumeWindowInsets(insets: WindowInsets): Modifier
```

Consume insets that haven't been consumed yet by other insets Modifiers similar to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` without adding any padding.

This can be useful when content offsets are provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/asPaddingValues.composable#(androidx.compose.foundation.layout.WindowInsets).asPaddingValues()`. This should be used further down the hierarchy than the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues` is used so that the values aren't consumed before the padding is added.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.padding(WindowInsets.navigationBars.asPaddingValues())) {
                Box(Modifier.consumeWindowInsets(WindowInsets.navigationBars)) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.consumeWindowInsets

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.kt+function:consumeWindowInsets)

```
fun Modifier.consumeWindowInsets(paddingValues: PaddingValues): Modifier
```

Consume `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)` as insets as if the padding was added irrespective of insets. Layouts further down the hierarchy that use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/safeContentPadding.modifier#(androidx.compose.ui.Modifier).safeContentPadding()`, and other insets padding Modifiers won't pad for the values that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)` provides. This can be useful when content offsets are provided by layout rather than `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` modifiers.

This method consumes all of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)` in addition to whatever has been consumed by other `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` modifiers by ancestors. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.PaddingValues)` accepting a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` argument ensures that its insets are consumed and doesn't consume more if they have already been consumed by ancestors.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            with(LocalDensity.current) {
                val paddingValues = PaddingValues(horizontal = 20.dp)
                Box(Modifier.padding(paddingValues).consumeWindowInsets(paddingValues)) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.displayCutoutPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:displayCutoutPadding)

```
fun Modifier.displayCutoutPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).displayCutout()`.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).displayCutout()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/statusBarsPadding.modifier#(androidx.compose.ui.Modifier).statusBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/displayCutoutPadding.modifier#(androidx.compose.ui.Modifier).displayCutoutPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.displayCutoutPadding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).statusBarsPadding()) {
                Box(Modifier.background(Color.Yellow).displayCutoutPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.imePadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:imePadding)

```
fun Modifier.imePadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).ime()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).ime()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/navigationBarsPadding.modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/imePadding.modifier#(androidx.compose.ui.Modifier).imePadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).systemBarsPadding()) {
                Box(Modifier.imePadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.mandatorySystemGesturesPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:mandatorySystemGesturesPadding)

```
fun Modifier.mandatorySystemGesturesPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).mandatorySystemGestures()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).mandatorySystemGestures()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/navigationBarsPadding.modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/mandatorySystemGesturesPadding.modifier#(androidx.compose.ui.Modifier).mandatorySystemGesturesPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.mandatorySystemGesturesPadding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).systemBarsPadding()) {
                // The app content won't interfere with the mandatory system gestures area.
                // It will just be white.
                Box(Modifier.background(Color.White).mandatorySystemGesturesPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.navigationBarsPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:navigationBarsPadding)

```
fun Modifier.navigationBarsPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).navigationBars()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).navigationBars()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/systemBarsPadding.modifier#(androidx.compose.ui.Modifier).systemBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/navigationBarsPadding.modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).statusBarsPadding()) {
                Box(Modifier.background(Color.Green).navigationBarsPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.onConsumedWindowInsetsChanged

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.kt+function:onConsumedWindowInsetsChanged)

```
fun Modifier.onConsumedWindowInsetsChanged(
    block: (consumedWindowInsets: WindowInsets) -> Unit
): Modifier
```

Calls `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).onConsumedWindowInsetsChanged(kotlin.Function1)` with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` that have been consumed, either by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` or one of the padding Modifiers, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/imePadding.modifier#(androidx.compose.ui.Modifier).imePadding()`.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).onConsumedWindowInsetsChanged(kotlin.Function1)` can be called before or during measurement and layout. It should not be used to trigger changes to composition because composition will only be applied on the following frame, leading to the UI lagging WindowInsets by a frame.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.MutableWindowInsets
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.exclude
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.onConsumedWindowInsetsChanged
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContent
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            val remainingInsets = remember { MutableWindowInsets() }
            val safeContent = WindowInsets.safeContent
            Box(
                Modifier.navigationBarsPadding().onConsumedWindowInsetsChanged {
                    consumedWindowInsets ->
                    remainingInsets.insets = safeContent.exclude(consumedWindowInsets)
                }
            ) {
                // padding can be used without recomposition when insets change.
                val padding = remainingInsets.asPaddingValues()
                Box(Modifier.padding(padding))
            }
        }
    }
}
```

### Modifier.recalculateWindowInsets

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.kt+function:recalculateWindowInsets)

```
fun Modifier.recalculateWindowInsets(): Modifier
```

This recalculates the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` based on the size and position. This only works when `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` have `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#hasFixedHeight()`. This can be accomplished, for example, by having `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)`, or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxSize.modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, or other size modifier before `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/recalculateWindowInsets.modifier#(androidx.compose.ui.Modifier).recalculateWindowInsets()`. If the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` sizes aren't fixed, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/recalculateWindowInsets.modifier#(androidx.compose.ui.Modifier).recalculateWindowInsets()` won't adjust the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` and won't have any affect on layout.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/recalculateWindowInsets.modifier#(androidx.compose.ui.Modifier).recalculateWindowInsets()` is useful when the parent does not call `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` when it aligns a child. For example, a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` with two children should have different `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` for each child. The top item should exclude insets below its bottom and the bottom item should exclude the top insets, but the Column can't assign different insets for different children.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.recalculateWindowInsets
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

var hasFirstItem by remember { mutableStateOf(true) }
var hasLastItem by remember { mutableStateOf(true) }
Column(Modifier.fillMaxSize()) {
    if (hasFirstItem) {
        Box(Modifier.weight(1f).fillMaxWidth().background(Color.Magenta))
    }
    Box(
        Modifier.fillMaxWidth() // force a fixed size on the content
            .recalculateWindowInsets()
            .weight(1f)
            .background(Color.Yellow)
            .safeDrawingPadding()
    ) {
        Button(
            onClick = { hasFirstItem = !hasFirstItem },
            Modifier.align(Alignment.TopCenter),
        ) {
            val action = if (hasFirstItem) "Remove" else "Add"
            Text("$action First Item")
        }
        Button(
            onClick = { hasLastItem = !hasLastItem },
            Modifier.align(Alignment.BottomCenter),
        ) {
            val action = if (hasLastItem) "Remove" else "Add"
            Text("$action Last Item")
        }
    }
    if (hasLastItem) {
        Box(Modifier.weight(1f).fillMaxWidth().background(Color.Cyan))
    }
}
```

Another use is when a parent doesn't properly `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for all space that it consumes. For example, a 3rd-party container has padding that doesn't properly use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.recalculateWindowInsets
import androidx.compose.foundation.layout.safeContent
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// This outer Box is representing a 3rd-party layout that you don't control. It has a
// padding, but doesn't properly use consumeWindowInsets()
Box(Modifier.padding(10.dp)) {
    // This is the content that you control. You can make sure that the WindowInsets are correct
    // so you can pad your content despite the fact that the parent did not
    // consumeWindowInsets()
    Box(
        Modifier.fillMaxSize() // Force a fixed size on the content
            .recalculateWindowInsets()
            .safeContentPadding()
            .background(Color.Blue)
    )
}
```

In most cases you should not need to use this API, and the parent should instead use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` to provide the correct values

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContent
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// The outer Box uses padding and properly compensates for it by using consumeWindowInsets()
Box(
    Modifier.fillMaxSize()
        .padding(10.dp)
        .consumeWindowInsets(WindowInsets(10.dp, 10.dp, 10.dp, 10.dp))
) {
    Box(Modifier.fillMaxSize().safeContentPadding().background(Color.Blue))
}
```

### Modifier.safeContentPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:safeContentPadding)

```
fun Modifier.safeContentPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeContent()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeContent()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/navigationBarsPadding.modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/safeContentPadding.modifier#(androidx.compose.ui.Modifier).safeContentPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.safeContent
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Black).systemBarsPadding()) {
                // The app content will only be drawn where there is no possible
                // gesture confusion and content will not be drawn over.
                // The rest will be plain white
                Box(Modifier.background(Color.White).safeContentPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.safeDrawingPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:safeDrawingPadding)

```
fun Modifier.safeDrawingPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeDrawing()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeDrawing()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/statusBarsPadding.modifier#(androidx.compose.ui.Modifier).statusBarsPadding()`, the area that the parent pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/safeDrawingPadding.modifier#(androidx.compose.ui.Modifier).safeDrawingPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Black).systemBarsPadding()) {
                // The app content won't have anything drawing over it, but all the
                // background not in the status bars will be white.
                Box(Modifier.background(Color.White).safeDrawingPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.safeGesturesPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:safeGesturesPadding)

```
fun Modifier.safeGesturesPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeGestures()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeGestures()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/navigationBarsPadding.modifier#(androidx.compose.ui.Modifier).navigationBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/safeGesturesPadding.modifier#(androidx.compose.ui.Modifier).safeGesturesPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.safeGesturesPadding
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Black).systemBarsPadding()) {
                // The app content will only be drawn where there is no possible
                // gesture confusion. The rest will be plain white
                Box(Modifier.background(Color.White).safeGesturesPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.statusBarsPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:statusBarsPadding)

```
fun Modifier.statusBarsPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).statusBars()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).statusBars()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/displayCutoutPadding.modifier#(androidx.compose.ui.Modifier).displayCutoutPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/statusBarsPadding.modifier#(androidx.compose.ui.Modifier).statusBarsPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).statusBarsPadding()) {
                Box(Modifier.background(Color.Green).navigationBarsPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.systemBarsPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:systemBarsPadding)

```
fun Modifier.systemBarsPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemBars()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemBars()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/statusBarsPadding.modifier#(androidx.compose.ui.Modifier).statusBarsPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/systemBarsPadding.modifier#(androidx.compose.ui.Modifier).systemBarsPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.systemBarsPadding()) {
                // app content
            }
        }
    }
}
```

### Modifier.systemGesturesPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:systemGesturesPadding)

```
fun Modifier.systemGesturesPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemGestures()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemGestures()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/waterfallPadding.modifier#(androidx.compose.ui.Modifier).waterfallPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/systemGesturesPadding.modifier#(androidx.compose.ui.Modifier).systemGesturesPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.layout.systemGesturesPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).systemBarsPadding()) {
                // The app content won't interfere with the system gestures area.
                // It will just be white.
                Box(Modifier.background(Color.White).systemGesturesPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.waterfallPadding

Cmn android Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.+function:waterfallPadding)

```
fun Modifier.waterfallPadding(): Modifier
```

Adds padding to accommodate the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).waterfall()` insets.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from the padding. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).waterfall()` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if a parent layout uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/systemGesturesPadding.modifier#(androidx.compose.ui.Modifier).systemGesturesPadding()`, the area that the parent layout pads for the status bars will not be padded again by this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/waterfallPadding.modifier#(androidx.compose.ui.Modifier).waterfallPadding()` modifier.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will be consumed.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.layout.waterfallPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.background(Color.Blue).systemBarsPadding()) {
                // The app content shouldn't spill over the edges. They will be green.
                Box(Modifier.background(Color.Green).waterfallPadding()) {
                    // app content
                }
            }
        }
    }
}
```

### Modifier.windowInsetsPadding

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsPadding.kt+function:windowInsetsPadding)

```
fun Modifier.windowInsetsPadding(insets: WindowInsets): Modifier
```

Adds padding so that the content doesn't enter `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` space.

Any insets consumed by other insets padding modifiers or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` on a parent layout will be excluded from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)`. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` will be `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)` for child layouts as well.

For example, if an ancestor uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/statusBarsPadding.modifier#(androidx.compose.ui.Modifier).statusBarsPadding()` and this modifier uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).systemBars()`, the portion of the system bars that the status bars uses will not be padded again by this modifier.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.union
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            val insets = WindowInsets.systemBars.union(WindowInsets.ime)
            Box(Modifier.background(Color.White).fillMaxSize().windowInsetsPadding(insets)) {
                // app content
            }
        }
    }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` |   |

### Modifier.windowInsetsBottomHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsSize.kt+function:windowInsetsBottomHeight)

```
fun Modifier.windowInsetsBottomHeight(insets: WindowInsets): Modifier
```

Sets the height to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsBottomHeight(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getBottom(androidx.compose.ui.unit.Density)` of the screen.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will respect the consumed insets from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)`, but won't consume any insets.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize()) {
                // Background for navigation bar at the bottom
                Box(
                    Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)
                        .fillMaxWidth()
                        .align(Alignment.BottomCenter)
                        .background(Color.Red)
                )
                // app content
            }
        }
    }
}
```

### Modifier.windowInsetsEndWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsSize.kt+function:windowInsetsEndWidth)

```
fun Modifier.windowInsetsEndWidth(insets: WindowInsets): Modifier
```

Sets the width to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsEndWidth(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#End()` of the screen, using either `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getLeft(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getRight(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)`, depending on the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will respect the consumed insets from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)`, but won't consume any insets.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.windowInsetsEndWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize()) {
                // Background for navigation bar at the end
                Box(
                    Modifier.windowInsetsEndWidth(WindowInsets.navigationBars)
                        .fillMaxHeight()
                        .align(Alignment.CenterEnd)
                        .background(Color.Red)
                )
                // app content
            }
        }
    }
}
```

### Modifier.windowInsetsStartWidth

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsSize.kt+function:windowInsetsStartWidth)

```
fun Modifier.windowInsetsStartWidth(insets: WindowInsets): Modifier
```

Sets the width to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsStartWidth(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Start()` of the screen, using either `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getLeft(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getRight(androidx.compose.ui.unit.Density,androidx.compose.ui.unit.LayoutDirection)`, depending on the `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/LayoutDirection`.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will respect the consumed insets from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)`, but won't consume any insets.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.windowInsetsStartWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize()) {
                // Background for navigation bar at the start
                Box(
                    Modifier.windowInsetsStartWidth(WindowInsets.navigationBars)
                        .fillMaxHeight()
                        .align(Alignment.CenterStart)
                        .background(Color.Red)
                )
                // app content
            }
        }
    }
}
```

### Modifier.windowInsetsTopHeight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/WindowInsetsSize.kt+function:windowInsetsTopHeight)

```
fun Modifier.windowInsetsTopHeight(insets: WindowInsets): Modifier
```

Sets the height to that of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsTopHeight(androidx.compose.foundation.layout.WindowInsets)` at the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets#getTop(androidx.compose.ui.unit.Density)` of the screen.

When used, the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` will respect the consumed insets from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/windowInsetsPadding.modifier#(androidx.compose.ui.Modifier).windowInsetsPadding(androidx.compose.foundation.layout.WindowInsets)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/consumeWindowInsets.modifier#(androidx.compose.ui.Modifier).consumeWindowInsets(androidx.compose.foundation.layout.WindowInsets)`, but won't consume any insets.

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsTopHeight
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.core.view.WindowCompat

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(Modifier.fillMaxSize()) {
                // Background for status bar at the top
                Box(
                    Modifier.windowInsetsTopHeight(WindowInsets.statusBars)
                        .fillMaxWidth()
                        .align(Alignment.TopCenter)
                        .background(Color.Red)
                )
                // app content
            }
        }
    }
}
```

### Modifier.zIndex

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ZIndexModifier.kt+function:zIndex)

```
fun Modifier.zIndex(zIndex: Float): Modifier
```

Creates a modifier that controls the drawing order for the children of the same layout parent. A child with larger `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)` will be drawn on top of all the children with smaller `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)`. When children have the same `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)` the original order in which the parent placed the children is used.

Note that if there would be multiple `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)` modifiers applied for the same layout the sum of their values will be used as the final zIndex. If no `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier#(androidx.compose.ui.Modifier).zIndex(kotlin.Float)` were applied for the layout then the default zIndex is 0.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.zIndex

Box {
    Text("Drawn second", Modifier.zIndex(1f))
    Text("Drawn first")
}
```

### Modifier.resizeWithContentScale

android Artifact: [androidx.media3:media3-ui-compose](https://developer.android.com/jetpack/androidx/releases/media3) [View Source](https://cs.android.com/search?q=file:androidx/media3/ui/compose/modifiers/extensions.kt+function:resizeWithContentScale)

```
@UnstableApi
fun Modifier.resizeWithContentScale(
    contentScale: ContentScale,
    aspectRatio: Float?,
    alignment: Alignment = Alignment.Center
): Modifier
```

Attempts to size the original content rectangle to be inscribed into a destination by applying a specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` type.

| Parameters |
|---|---|
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` to apply to the content. |
| `aspectRatio: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html?` | The aspect ratio of the content (width / height). If null, no scaling is applied. |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` used to position the scaled content within the destination. If the scaled content overflows the destination, e.g. with `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale#Crop()`, the alignment determines which part of the content lies within the destination. |

### Modifier.resizeWithContentScale

android Artifact: [androidx.media3:media3-ui-compose](https://developer.android.com/jetpack/androidx/releases/media3) [View Source](https://cs.android.com/search?q=file:androidx/media3/ui/compose/modifiers/extensions.kt+function:resizeWithContentScale)

```
@UnstableApi
@Composable
fun Modifier.[resizeWithContentScale](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).resizeWithContentScale(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.geometry.Size,androidx.compose.ui.unit.Density))(
    contentScale: ContentScale,
    sourceSizeDp: Size?,
    density: Density = LocalDensity.current
): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> Use the overload that takes aspectRatio instead, use this instead:
>
> ```kotlin
> this.resizeWithContentScale(contentScale, sourceSizeDp?.run { if (width > 0 && height > 0) width / height else null })
> ```

Attempts to size the original content rectangle to be inscribed into a destination by applying a specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` type.

Use the overload that takes aspectRatio instead.

| Parameters |
|---|---|
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` to apply to the content. |
| `sourceSizeDp: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size?` | The size of the content in DP. |
| `density: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density = LocalDensity.current` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density` to use for conversions. |