Android Academy · Lección

El sistema Modifier

Cambie el tamaño, añada relleno y aplique estilos con modifiers

El sistema Modifier es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

¿Qué es un Modifier?

Un Modifier decora o configura un composable: su tamaño, relleno, fondo, comportamiento al hacer clic y mucho más. Casi todos los composables aceptan un parámetro modifier.

Encadenamiento

Los modificadores se encadenan: cada función devuelve un modificador nuevo, por lo que se invocan uno después de otro.

Modifier
    .padding(16.dp)
    .size(100.dp)
    .background(Color.LightGray)

Pasar un Modifier

Pase la cadena al parámetro modifier del composable.

Text(
    text = "Hello",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
)

¡El orden importa!

El orden de los modificadores cambia el resultado. Los modificadores se aplican de izquierda a derecha y se envuelven entre sí como capas.

padding y después background

Aquí el relleno se aplica primero, por lo que el fondo solo cubre el área interior y deja transparente el espacio del relleno.

Modifier
    .padding(16.dp)
    .background(Color.Red)

background y después padding

Si los intercambia, el fondo cubre ahora toda el área y el relleno empuja el contenido hacia dentro. Son los mismos modificadores, pero el aspecto es diferente porque el orden importa.

Modifier
    .background(Color.Red)
    .padding(16.dp)

Modificadores de tamaño habituales

Modificadores de tamaño utilizados con frecuencia:

size(100.dp) — ancho y alto fijos.
fillMaxWidth() — ocupa todo el espacio horizontal.
fillMaxSize() — ocupa todo el espacio disponible.
width() / height() — establece una dimensión.

Clickable

Modifier.clickable hace que cualquier composable responda a los toques, incluso un Text o un Box simple.

Text(
    text = "Tap me",
    modifier = Modifier.clickable { /* handle */ }
)

Reutilizar un parámetro Modifier

Por convención, los composables personalizados aceptan un parámetro modifier: Modifier = Modifier y se lo pasan a su elemento raíz. Esto permite que quienes los invoquen personalicen el diseño desde fuera.

@Composable
fun Card(modifier: Modifier = Modifier) {
    Column(modifier = modifier) { /* ... */ }
}

Modifier es el primer parámetro

Convención: el parámetro modifier aparece primero entre los parámetros opcionales y tiene como valor predeterminado el Modifier vacío. Así, su API mantiene la coherencia con la biblioteca estándar.

Cómo unirlo todo

Un cuadro con estilo que utiliza una cadena cuyo orden es deliberado.

Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFFE86F00))
        .padding(12.dp)
) {
    Text(text = "Compose", color = Color.White)
}

Comprobación rápida

¿Por qué Modifier.padding(16.dp).background(Color.Red) tiene un aspecto diferente de Modifier.background(Color.Red).padding(16.dp)?

Resumen

Modificadores:

Configuran el tamaño, el relleno, el fondo, los clics y mucho más.
Se encadenan y se aplican en orden: el orden importa.
Los composables personalizados deben exponer como primer parámetro modifier: Modifier = Modifier.

Preguntas frecuentes

¿La lección «El sistema Modifier» es gratis?

Sí — el texto completo de «El sistema Modifier» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El sistema Modifier»?

Cambie el tamaño, añada relleno y aplique estilos con modifiers Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «El sistema Modifier»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy