CapDriveGroup
Combina più View in un tutto, applicando uniformemente trasparenza, rotazione o altri effetti speciali. Il figlio View segue le regole di disposizione del contenitore esterno e gli effetti speciali vengono applicati all'intero set di risultati sintetizzati.
Esempio
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Utilizzo
- Group non crea regole di disposizione: i figli partecipano al layout esterno. Compone il gruppo prima di opacità ed effetti, diverso dalle opacità singole nelle sovrapposizioni. Usa uno Stack esterno per dimensioni e padding.
- Usa ID stabili come key per preservare identità e animazioni. L’indice non è un’identità permanente adatta quando cambia l’ordine degli elementi.
- x/y e transform seguono il layout. Spostare un figlio non spinge gli altri; usa spacing o Spacer. Rotazione e scala interessano il disegno completo.
Proprietà
children?ViewContentContenuto di disegno figlio.
Proprietà comuni
transform?ViewTransformTrasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.
{rotation: 0}background?PaintColore o gradiente di sfondo; clear è trasparente.
"clear"opacity?numberOpacità dell’intero View: 0 trasparente, 1 opaco.
1cornerRadius?numberRaggio degli angoli in punti.
0clipped?booleanRitaglia il disegno oltre i limiti del View.
falseclip?"rectangle" | "ellipse"Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.
"rectangle"mask?View | nullView per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrdine tra elementi fratelli; valori più grandi appaiono davanti.
0blur?numberRaggio della sfocatura in punti; 0 la disattiva.
4innerShadow?DrawingEffectColore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectColore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorColore dell’ombra esterna.
HDR("black")shadowOpacity?numberOpacità dell’ombra 0–1; 0 la nasconde.
0shadowRadius?numberRaggio di sfocatura dell’ombra esterna in punti.
4shadowX?numberOffset dell’ombra in punti: x a destra, y in basso.
0shadowY?numberOffset dell’ombra in punti: x a destra, y in basso.
2animations?Animation[]Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentità stabile tra elementi fratelli.
""Esempio pratico
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>
);
}
Animazione
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYQuando omesso
La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.