CapDriveHStack
Disposez les sous-titres View de gauche à droite, en fonction des combinaisons horizontales d'icônes et de chiffres, de chiffres et d'unités, etc. spacing définit l'espacement adjacent, alignment définit l'alignement du haut et du bas ou de la ligne de base du texte au sein de cette ligne.
Exemple
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
Utilisation
- alignment règle l’alignement vertical ou les lignes de base dans la rangée, pas sa position horizontale. Spacer sépare deux extrémités ; firstTextBaseline convient aux chiffres et unités de tailles différentes.
- 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?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"Alignement vertical dans la ligne : top, center, bottom ou première/dernière ligne de base.
"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 (
<HStack width={260} alignment="firstTextBaseline" spacing={4}>
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
<Spacer minLength={12} />
<Symbol name="speedometer" fontSize={24} />
</HStack>
);
}
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.