CurvedLayout

Functions summary

Unit
@Composable
CurvedLayout(
    modifier: Modifier,
    anchor: Float,
    anchorType: AnchorType,
    radialAlignment: CurvedAlignment.Radial?,
    angularDirection: CurvedDirection.Angular,
    contentBuilder: CurvedScope.() -> Unit
)

A layout composable that places its children in an arc, rotating them as needed.

Functions

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 curvedRow, that similar to a Row layout, that it's curved into a segment of an annulus.

Example usage:

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: Modifier = Modifier

The modifier to be applied to the CurvedRow.
anchor: Float = 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: AnchorType = AnchorType.Center

Specify how the content is drawn with respect to the anchor. Default is to center the content on the anchor.
radialAlignment: 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 thiner than the CurvedRow, either closer to the center (INNER), apart from the center (OUTER) or in the middle point (CENTER).
angularDirection: CurvedDirection.Angular = CurvedDirection.Angular.Normal

Specify the direction the children are laid on. See CurvedDirection.Angular. The default is CurvedDirection.Angular.Normal, which is clockwise under a LtR layout and counter clockwise on a RtL layout.
contentBuilder: CurvedScope.() -> Unit

Specifies the content of this layout, currently there are 5 available elements defined in foundations for this DSL: the sub-layouts curvedBox, curvedRow and curvedColumn, basicCurvedText and curvedComposable (used to add normal composables to curved layouts)