CapDriveVStack
Disposez les sous-titres View de haut en bas, en fonction de la combinaison verticale des titres, des numéros principaux et des unités. spacing définit l'espacement adjacent et alignment définit l'alignement gauche et droit dans cette colonne.
Exemple
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Utilisation
- alignment règle l’alignement horizontal de la colonne : leading à gauche, trailing à droite. Spacer ajoute un espace vertical flexible ; spacing sépare les enfants voisins.
- Les dimensions numériques sont en points. auto mesure le contenu, fill utilise l’espace alloué par le parent. Dimensionnez d’abord le conteneur ; fill et un long texte n’agrandissent pas un parent fixe.
- x/y et transform s’appliquent après la disposition. Déplacer un enfant ne repousse pas ses voisins ; utilisez spacing ou Spacer. Rotation et échelle affectent le dessin complet.
Propriétés
children?ViewContentContenu de dessin enfant.
spacing?numberEspacement entre les vues enfants en points.
8alignment?"leading" | "center" | "trailing"Alignement horizontal dans la colonne : leading, center ou trailing.
"center"Propriétés communes
width?number | "auto" | "fill"Largeur en points, taille automatique ou remplissage du parent.
100height?number | "auto" | "fill"Hauteur en points, taille automatique ou remplissage du parent.
80padding?numberMarge intérieure du contenu en points.
0x?numberDécalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.
0y?numberDécalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.
0transform?ViewTransformTransformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.
{rotation: 0}background?PaintFond de couleur ou dégradé ; clear le rend transparent.
"clear"opacity?numberOpacité globale du View : 0 transparent, 1 opaque.
1cornerRadius?numberRayon des coins en points.
0clipped?booleanDécoupe les dessins dépassant les limites du View.
falseclip?"rectangle" | "ellipse"Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.
"rectangle"mask?View | nullView de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrdre entre éléments frères ; les valeurs élevées sont devant.
0blur?numberRayon du flou en points ; 0 le désactive.
4innerShadow?DrawingEffectCouleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectCouleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorCouleur de l’ombre extérieure.
HDR("black")shadowOpacity?numberOpacité de l’ombre de 0 à 1 ; 0 la masque.
0shadowRadius?numberRayon du flou de l’ombre extérieure, en points.
4shadowX?numberDécalage de l’ombre en points : x à droite, y en bas.
0shadowY?numberDécalage de l’ombre en points : x à droite, y en bas.
2animations?Animation[]Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentifiant stable parmi les éléments frères.
Exemple pratique
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>
);
}
Animation
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYEn cas d’omission
Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.