En Jetpack Compose, el objeto `Modifier` proporciona una variedad de propiedades que puedes utilizar para aplicar modificadores a tus componentes de interfaz de usuario y controlar su diseño y comportamiento. A continuación, se muestran algunas de las propiedades más comunes que puedes utilizar con `Modifier`:
1. Tamaño y Diseño:
- `size(width: Dp, height: Dp)`: Establece el ancho y el alto del componente.
- `fillMaxWidth()`: Hace que el componente ocupe todo el ancho disponible.
- `fillMaxHeight()`: Hace que el componente ocupe todo el alto disponible.
- `requiredWidth(width: Dp)`: Requiere que el componente tenga un ancho específico.
- `requiredHeight(height: Dp)`: Requiere que el componente tenga una altura específica.
- `offset(x: Dp, y: Dp)`: Desplaza el componente en el eje X e Y.
2. Margen y Espaciado:
- `padding(all: Dp)`: Agrega márgenes iguales en todos los lados.
- `padding(horizontal: Dp, vertical: Dp)`: Agrega márgenes horizontales y verticales.
- `padding(start: Dp, top: Dp, end: Dp, bottom: Dp)`: Agrega márgenes en lados específicos.
3. Alineación:
- `align(alignment: Alignment)`: Alinea el componente dentro de su contenedor.
- `alignBy(alignmentLine: AlignmentLine)`: Alinea el componente por una línea específica (por ejemplo, la línea base de un texto).
4. Fondo y Color:
- `background(color: Color)`: Establece un color de fondo para el componente.
- `border(border: BorderStroke)`: Agrega un borde al componente.
5. Interacción:
- `clickable(onClick: () -> Unit)`: Hace que el componente sea interactivo y responde a clics.
- `pointerInput` y `pointerInteropFilter`: Permite gestionar eventos de entrada personalizados.
6. Comportamiento Scroll:
- `scrollable`: Hace que el componente sea desplazable.
7. Flujo de Contenido:
- `fillMaxSize()`: Hace que el componente ocupe todo el espacio disponible en su contenedor.
- `weight(weight: Float)`: Distribuye el espacio disponible en un `Row` o `Column` según el peso relativo.
8. Transformación y Rotación:
- `scale(scaleX: Float, scaleY: Float)`: Escala el componente en el eje X e Y.
- `rotate(degrees: Float)`: Rota el componente por un ángulo específico.
9. Clips y Recortes:
- `clip(shape: Shape)`: Aplica un clip a la forma del componente.
- `clipToBounds()`: Recorta el contenido que se desborda del componente.
10. Interacción táctil:
- `swipeable()`: Hace que el componente sea deslizable.
Estas son solo algunas de las propiedades más comunes que puedes utilizar con `Modifier` en Jetpack Compose. Puedes combinar y anidar modificadores para lograr el diseño y el comportamiento específicos que necesites para tus componentes de interfaz de usuario. El uso de estos modificadores te permite crear interfaces de usuario flexibles y personalizadas en Compose.
Box(
modifier = Modifier
.size(100.dp, 100.dp)
.background(Color.Blue)
) {
// Contenido del componente
}
Margen y Espaciado:
padding(all: Dp):
Box(
modifier = Modifier
.padding(16.dp)
.background(Color.Green)
) {
// Contenido del componente con margen en todos los lados
}
Box(
modifier = Modifier
.size(100.dp, 100.dp)
.background(Color.Red)
.align(Alignment.Center)
) {
// Contenido del componente alineado en el centro
}
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Yellow)
) {
// Contenido del componente con color de fondo
}
var text by remember { mutableStateOf("Haz clic en mí") }
Box(
modifier = Modifier
.size(100.dp, 100.dp)
.background(Color.Magenta)
.clickable {
text = "¡Haz hecho clic!"
}
) {
Text(text)
}
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Cyan)
) {
Text("Elemento 1")
Text("Elemento 2", modifier = Modifier.fillMaxWidth())
Text("Elemento 3")
}
Box(
modifier = Modifier
.size(100.dp, 100.dp)
.clip(RoundedCornerShape(16.dp))
.background(Color.Orange)
) {
// Contenido del componente con esquinas redondeadas
}
val swipeState = rememberSwipeableState(initialValue = 0)
Box(
modifier = Modifier
.size(100.dp, 100.dp)
.background(Color.Purple)
.swipeable(
state = swipeState,
anchors = mapOf(
0f to 0,
1000f to 1
),
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Horizontal
)
) {
Text("Desliza")
}
