CapDriveGroup
Combinez plusieurs View en un tout, en appliquant uniformément la transparence, la rotation ou d'autres effets spéciaux. L'enfant View suit les règles d'arrangement du conteneur externe et les effets spéciaux sont appliqués à l'ensemble des résultats synthétisés.
Exemple
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Utilisation
- Group ne crée pas de disposition ; ses enfants participent au parent. Il compose le groupe avant opacité et effets, ce qui diffère des opacités individuelles aux intersections. Utilisez un Stack externe pour dimensions et marges.
- Utilisez des identifiants stables pour key afin de conserver l’identité pendant les mises à jour et animations. Un index ne convient pas si les éléments changent d’ordre.
- 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.
Propriétés communes
transform?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 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>
);
}
Animation
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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.