AndroidJetpack/Jetpack-Compose-Playground/docs/general/modifier.md

Modifier

Modifiers can be used modify certain aspects of a Composable. To set them, a Composable needs to accept a modifier as a parameter.

Combine modifiers

Column(modifier = Modifier.height(500.dp).padding(100.dp)) {
    Text("Hello")
}

You can chain multiple modifiers. The order is important modifier elements to the left are applied before modifier elements to the right.

Some Modifiers

The Compose libraries already contain some useful modifiers.

LayoutModifier

Modifier.width()

You can use this to set the width of a Composable.

Modifier.height()

You can use this to set the height of a Composable.

Modifier.size()

You can use this to set the width and height of a Composable.

Modifier.fillMaxHeight()

This will set the height of the Composable to the maximum available height. This is similar to MATCH_PARENT from the classic View system.

Modifier.fillMaxWidth()

This will set the width of the Composable to the maximum available width. This is similar to MATCH_PARENT from the classic View system.

Modifier.fillMaxSize()

This will set the height/width of the Composable to the maximum available height/width

Modifier.padding()

You can use Modifier.padding to set padding to Composables that take a modifier as an argument.

@Composable
fun PaddingDemo() {

    Column {
        Text("TextWithoutPadding")
        Column(modifier = Modifier.padding(start = 80.dp)){
            Text("TextWith80dpOnlyLeftPadding")
        }

        Column(Modifier.padding(all = 80.dp)){
            Text("TextWith80dpPadding")
        }
    }
}

DrawModifier

Modifier.background()

With this modifier you can set a background color/shape for the Composable

Modifier.clip()

This modifier can clip the Composable to rectangle, rounded, or circle

GestureModifier

Modifier.clickable

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

Modifier.scrollable

You can use this to make a Composable scrollable

Modifier.draggable

You can use this to make a Composable draggable

Modifier.swipeable

You drag elements which, when released, animate towards typically two or more anchor points defined in an orientation

Multitouch: Panning, zooming, rotating

To detect multitouch gestures used for panning, zooming and rotating, you can use the transformable modifier. This modifier does not transform elements by itself, it only detects the gestures.

See also:

• Official Docs