boxShadow solo está disponible en la Nueva Arquitectura. Las sombras exteriores solo son compatibles con Android 9+. Las sombras interiores solo son compatibles con Android 10+.
Añade un efecto de sombra a un elemento, permitiendo controlar su posición, color, tamaño y difuminado. Esta sombra puede aparecer alrededor del exterior o interior del cuadro del borde del elemento, dependiendo de si es inset (interior). Esta implementación cumple con la especificación de la propiedad de estilo web del mismo nombre. Consulta todos los argumentos disponibles en la documentación de BoxShadowValue.
Estas sombras pueden combinarse para que un único boxShadow esté compuesto por múltiples sombras diferentes.
En iOS 17+, establecerlo en pointer permite efectos de hover cuando un puntero (como trackpad o stylus en iOS, o la mirada del usuario en visionOS) está sobre la vista.
Establece la elevación de una vista usando la API de elevación subyacente de Android. Esto añade una sombra paralela al elemento y afecta el orden z de vistas superpuestas. Solo compatible con Android 5.0+, sin efecto en versiones anteriores.
Añade un filtro gráfico a la View. Este filtro se compone de cualquier número de funciones de filtro, cada una representando un cambio atómico en la composición gráfica de la View. La lista completa de funciones válidas se define abajo. filter se aplicará tanto a los descendientes de la View como a la propia View. filter implica overflow: hidden, por lo que los descendientes se recortarán para ajustarse a los límites de la View.
Las siguientes funciones de filtro funcionan en todas las plataformas:
brightness: Modifica el brillo de la View. Acepta un número o porcentaje no negativo.
opacity: Modifica la opacidad o alfa de la View. Acepta un número o porcentaje no negativo.
nota
Debido a problemas de rendimiento y cumplimiento de especificaciones, estas son las únicas dos funciones de filtro disponibles en iOS. Existen planes para explorar soluciones alternativas utilizando SwiftUI en lugar de UIKit para esta implementación.
Android
Las siguientes funciones de filtro funcionan solo en Android:
blur: Difumina la View con un desenfoque gaussiano, donde el valor especificado representa el radio usado en el algoritmo de desenfoque. Se acepta cualquier valor DIP no negativo (sin porcentajes). Cuanto mayor sea el valor, más borroso será el resultado.
contrast: Cambia el contraste de la View. Acepta un número o porcentaje no negativo.
dropShadow: Añade una sombra alrededor de la máscara alfa de la View (solo los píxeles con alfa distinto de cero en la View proyectarán sombra). Acepta un color opcional para la sombra y 2 o 3 medidas. Si se especifican 2 medidas, se interpretan como offsetX y offsetY que desplazan la sombra en los ejes X e Y respectivamente. Si se proporciona una tercera medida, se interpreta como la desviación estándar del desenfoque gaussiano aplicado a la sombra; un valor mayor difuminará más la sombra. Consulta más detalles sobre los argumentos en DropShadowValue.
grayscale: Convierte la View a escala de grises en la cantidad especificada. Acepta un número o porcentaje no negativo, donde 1 o 100% representa escala de grises completa.
hueRotate: Cambia el tono de la View. El argumento define el ángulo de rotación en la rueda de colores (por ejemplo, 360deg no tendría efecto). Este ángulo puede usar unidades deg o rad.
invert: Invierte los colores de la View. Acepta un número o porcentaje no negativo, donde 1 o 100% representa inversión completa.
sepia: Convierte la View a sepia. Acepta un número o porcentaje no negativo, donde 1 o 100% representa sepia completa.
saturate: Cambia la saturación de la View. Acepta un número o porcentaje no negativo.
nota
blur y dropShadow solo son compatibles en Android 12+
filter acepta un array de objetos con las funciones de filtro anteriores o un string que imita la sintaxis web.
Controla cómo la View mezcla sus colores con otros elementos en su contexto de apilamiento. Consulta la documentación de MDN para ver una descripción completa de cada función de mezcla.
Para un control más granular sobre lo que debe mezclarse, consulta isolation.
normal: El elemento se dibuja sobre el fondo sin mezcla.
multiply: Multiplica el color fuente por el color destino y lo reemplaza.
screen: Multiplica los complementos del fondo y fuente, luego complementa el resultado.
overlay: Multiplica o aplica pantalla según el color de fondo.
darken: Selecciona el color más oscuro entre fondo y fuente.
lighten: Selecciona el color más claro entre fondo y fuente.
color-dodge: Aclara el fondo para reflejar el color fuente. Negro no produce cambios.
color-burn: Oscurece el fondo para reflejar el color fuente. Blanco no produce cambios.
hard-light: Multiplica o aplica pantalla según el color fuente. Efecto similar a un foco intenso.
soft-light: Oscurece o aclara según el color fuente. Efecto similar a un foco difuso.
difference: Resta el color más oscuro del más claro.
exclusion: Similar a Diferencia pero con menos contraste.
hue: Crea un color con el tono de la fuente y saturación/luminosidad del fondo.
saturation: Crea un color con la saturación de la fuente y tono/luminosidad del fondo.
color: Crea un color con el tono y saturación del color fuente, y la luminosidad del color de fondo. Esto preserva los niveles de gris del fondo y es útil para colorear imágenes monocromáticas o aplicar tonos a imágenes en color.
luminosity: Crea un color con la luminosidad del color fuente y el tono/saturación del color de fondo. Produce un efecto inverso al modo Color.