# CurvedLayout

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedLayout.composable#CurvedLayout(androidx.compose.ui.Modifier,kotlin.Float,androidx.wear.compose.foundation.AnchorType,androidx.wear.compose.foundation.CurvedAlignment.Radial,androidx.wear.compose.foundation.CurvedDirection.Angular,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, anchor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/AnchorType, radialAlignment: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedAlignment.Radial?, angularDirection: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedDirection.Angular, contentBuilder: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A layout composable that places its children in an arc, rotating them as needed. |

## Functions

### CurvedLayout

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/CurvedLayout.kt+function:CurvedLayout)

```
@Composable
fun CurvedLayout(
    modifier: Modifier = Modifier,
    anchor: Float = 270.0f,
    anchorType: AnchorType = AnchorType.Center,
    radialAlignment: CurvedAlignment.Radial? = null,
    angularDirection: CurvedDirection.Angular = CurvedDirection.Angular.Normal,
    contentBuilder: CurvedScope.() -> Unit
): Unit
```

A layout composable that places its children in an arc, rotating them as needed. This will layout children using a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).curvedRow(androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedAlignment.Radial,androidx.wear.compose.foundation.CurvedDirection.Angular,kotlin.Function1)`, that similar to a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` layout, that it's curved into a segment of an annulus.

Example usage:

```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.foundation.layout.size
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
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
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.curvedComposable
import androidx.wear.compose.foundation.padding
import androidx.wear.compose.foundation.size
import androidx.wear.compose.material.Text

CurvedLayout(modifier = Modifier.fillMaxSize()) {
    curvedComposable {
        BasicText(
            "Simple",
            Modifier.background(Color.White).padding(2.dp),
            TextStyle(color = Color.Black, fontSize = 16.sp),
        )
    }
    curvedComposable { Box(modifier = Modifier.size(20.dp).background(Color.Gray)) }
    curvedComposable {
        BasicText(
            "CurvedWorld",
            Modifier.background(Color.White).padding(2.dp),
            TextStyle(color = Color.Black, fontSize = 16.sp),
        )
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the CurvedRow. |
| `anchor: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 270.0f` | The angle at which children are 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 screen) |
| `anchorType: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/AnchorType = AnchorType.Center` | Specify how the content is drawn with respect to the anchor. Default is to center the content on the anchor. |
| `radialAlignment: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedAlignment.Radial? = null` | Specifies the radial alignment for children, if not specified, children can choose their own radial Alignment. Alignment specifies where to lay down children that are thinner than the CurvedRow, either closer to the center (INNER), apart from the center (OUTER) or in the middle point (CENTER). |
| `angularDirection: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedDirection.Angular = CurvedDirection.Angular.Normal` | Specify the direction the children are laid on. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedDirection.Angular`. The default is `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedDirection.Angular#Normal()`, which is clockwise under a LtR layout and counter clockwise on a RtL layout. |
| `contentBuilder: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Specifies the content of this layout, currently there are 5 available elements defined in foundation for this DSL: the sub-layouts `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).curvedBox(androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedAlignment.Radial,androidx.wear.compose.foundation.CurvedAlignment.Angular,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).curvedRow(androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedAlignment.Radial,androidx.wear.compose.foundation.CurvedDirection.Angular,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).curvedColumn(androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedDirection.Radial,androidx.wear.compose.foundation.CurvedAlignment.Angular,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).basicCurvedText(kotlin.String,androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedDirection.Angular,androidx.compose.ui.text.style.TextOverflow,kotlin.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedScope).curvedComposable(androidx.wear.compose.foundation.CurvedModifier,androidx.wear.compose.foundation.CurvedAlignment.Radial,kotlin.Boolean,kotlin.Function1)` (used to add normal composables to curved layouts) |