curvedColumn

Function

Android

public fun CurvedScope.curvedColumn(
    modifier: CurvedModifier = CurvedModifier,
    radialDirection: CurvedDirection.Radial? = null,
    angularAlignment: CurvedAlignment.Angular? = null,
    contentBuilder: CurvedScope.() -> Unit,
): Unit

A curved layout composable that places its children stacked as part of an arc (the first child will be the outermost). This is similar to a Column layout, but curved into a segment of an annulus.

The thickness of the layout (the difference between the outer and inner radius) will be the sum of the thickness of its children, and the angle taken will be the biggest angle of the children.

Parameters


modifier	The `CurvedModifier` to apply to this curved column.
radialDirection	Order to lay out components, outside in or inside out. The default is to inherit from the containing `curvedColumn` or `CurvedLayout`
angularAlignment	Angular alignment specifies where to lay down children that are thinner than the curved column, either at the `CurvedAlignment.Angular.Start` of the layout, at the `CurvedAlignment.Angular.End`, or `CurvedAlignment.Angular.Center`. If unspecified or null, they can choose for themselves.
contentBuilder	Scope used to provide the content for this column.

Code Examples

CurvedRowAndColumn

@Composable
fun CurvedRowAndColumn() {
    CurvedLayout(modifier = Modifier.fillMaxSize()) {
        curvedComposable { Box(modifier = Modifier.size(20.dp).background(Color.Red)) }
        curvedColumn(angularAlignment = CurvedAlignment.Angular.End) {
            repeat(3) {
                curvedRow {
                    curvedComposable {
                        BasicText(
                            "Row #$it",
                            Modifier.background(Color.White).padding(2.dp),
                            TextStyle(color = Color.Black, fontSize = 14.sp),
                        )
                    }
                    curvedComposable {
                        Box(modifier = Modifier.size(10.dp).background(Color.Green))
                    }
                    curvedComposable {
                        BasicText(
                            "More",
                            Modifier.background(Color.Yellow).padding(2.dp),
                            TextStyle(color = Color.Black, fontSize = 14.sp),
                        )
                    }
                }
            }
        }
        curvedComposable { Box(modifier = Modifier.size(20.dp).background(Color.Red)) }
    }
}