CapDriveGroup
Combine varios View en un todo, aplicando uniformemente transparencia, rotación u otros efectos especiales. El niño View sigue las reglas de disposición del contenedor exterior y los efectos especiales se aplican a todo el conjunto de resultados sintetizados.
Ejemplo
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Uso
- Group no añade reglas de distribución; sus hijos participan en el padre. Compone el conjunto antes de aplicar opacidad y efectos, distinto de opacidades individuales en solapamientos. Para tamaño y padding usa un Stack exterior.
- Usa identificadores estables como key para conservar identidad y animaciones. El índice del array no sirve como identidad permanente si cambia el orden.
- x/y y transform actúan después de reservar espacio. Mover un hijo no empuja a sus hermanos; usa spacing o Spacer. Giro y escala afectan al dibujo completo.
Propiedades
children?ViewContentContenido de dibujo hijo.
Propiedades comunes
transform?ViewTransformTransformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.
{rotation: 0}background?PaintColor o degradado de fondo; clear es transparente.
"clear"opacity?numberOpacidad de todo el View: 0 transparente, 1 opaco.
1cornerRadius?numberRadio de las esquinas en puntos.
0clipped?booleanRecorta el dibujo que sobresale de los límites del View.
falseclip?"rectangle" | "ellipse"Recorte rectangle o ellipse; Material también admite false para desactivarlo.
"rectangle"mask?View | nullView de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrden entre elementos hermanos; los valores mayores aparecen delante.
0blur?numberRadio de desenfoque en puntos; 0 lo desactiva.
4innerShadow?DrawingEffectColor, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectColor, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorColor de la sombra exterior.
HDR("black")shadowOpacity?numberOpacidad de la sombra de 0 a 1; 0 la oculta.
0shadowRadius?numberRadio de desenfoque de la sombra, en puntos.
4shadowX?numberDesplazamiento de sombra en puntos: x derecha, y abajo.
0shadowY?numberDesplazamiento de sombra en puntos: x derecha, y abajo.
2animations?Animation[]Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentidad estable entre elementos hermanos.
""Ejemplo práctico
function main() {
return (
<HStack spacing={12}>
<Group opacity={0.6} transform={{ rotation: 10 }}>
<Text fontSize={40}>78</Text>
<Symbol name="speedometer" fontSize={28} />
</Group>
<Text>km/h</Text>
</HStack>
);
}
Animación
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYAl omitir
La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.