coco
94 lines
2.7 KiB
Markdown
94 lines
2.7 KiB
Markdown
<!---
|
|
This is the API of version 1.2.0
|
|
-->
|
|
# 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
|
|
```kotlin
|
|
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.
|
|
|
|
<p align="left">
|
|
<img src ="../../images/general/modifier/PaddingExample.png" height=100 width=300 />
|
|
</p>
|
|
|
|
```kotlin
|
|
@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](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)
|