Modifier

ModifierFactorySample

@Composable
fun ModifierFactorySample() {
    class FancyModifier(val level: Float) : Modifier.Element
    fun Modifier.fancy(level: Float) = this.then(FancyModifier(level))
    Row(Modifier.fancy(1f).padding(10.dp)) {
        // content
    }
}

ModifierParameterSample

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

ModifierUsageSample

@Composable
fun ModifierUsageSample() {
    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
    )
}

SubcomponentModifierSample

@Composable
fun SubcomponentModifierSample() {
    @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") }
        }
    }
}