CapDriveVStack
Disporre i sottotitoli View dall'alto verso il basso, adatti alla combinazione verticale di titoli, numeri principali e unità. spacing imposta la spaziatura adiacente e alignment imposta l'allineamento sinistro e destro all'interno di questa colonna.
Esempio
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Utilizzo
- alignment regola la colonna orizzontalmente: leading a sinistra, trailing a destra. Spacer crea spazio verticale flessibile; spacing separa figli adiacenti.
- Le misure numeriche sono punti. auto misura il contenuto; fill usa lo spazio assegnato dal genitore. Dimensiona prima il contenitore: fill e testo lungo non ampliano un genitore fisso.
- 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.
spacing?numberSpazio tra le viste figlie in punti.
8alignment?"leading" | "center" | "trailing"Allineamento orizzontale nella colonna: leading, center o trailing.
"center"Proprietà comuni
width?number | "auto" | "fill"Larghezza in punti, dimensione automatica o riempimento del contenitore.
100height?number | "auto" | "fill"Altezza in punti, dimensione automatica o riempimento del contenitore.
80padding?numberSpaziatura interna del contenuto in punti.
0x?numberSpostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.
0y?numberSpostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.
0transform?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 (
<VStack width={180} height={140} alignment="leading" spacing={8}>
<Text fontSize={14}>Speed</Text>
<Spacer minLength={8} />
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
</VStack>
);
}
Animazione
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.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.