CapDriveGroup
Kombinieren Sie mehrere View zu einem Ganzen und wenden Sie dabei gleichmäßig Transparenz, Drehung oder andere Spezialeffekte an. Das untergeordnete Element View folgt den Anordnungsregeln des äußeren Containers und die Spezialeffekte werden auf den gesamten Satz synthetisierter Ergebnisse angewendet.
Beispiel
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Verwendung
- Group legt keine Anordnung fest; Kinder nehmen am äußeren Layout teil. Effekte und Deckkraft wirken auf die zusammengesetzte Gruppe. Überlappungen unterscheiden sich von Einzel-opacity. Maße und Padding über einen äußeren Stack setzen.
- Stabile Daten-IDs als key erhalten die View-Identität bei Aktualisierungen und Animationen. Bei veränderlicher Reihenfolge keinen Arrayindex als dauerhafte ID verwenden.
- x/y und transform folgen der Platzberechnung. Verschieben verdrängt keine Geschwister; Abstände ändern spacing oder Spacer. Rotation und Skalierung betreffen die fertige Zeichnung.
Eigenschaften
children?ViewContentUntergeordneter Zeicheninhalt.
Allgemeine Eigenschaften
transform?ViewTransformGesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.
{rotation: 0}background?PaintHintergrundfarbe oder Verlauf; clear ist transparent.
"clear"opacity?numberDeckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.
1cornerRadius?numberEckenradius in Punkten.
0clipped?booleanZeichnung außerhalb der View-Grenzen abschneiden.
falseclip?"rectangle" | "ellipse"Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.
"rectangle"mask?View | nullView als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.
<Circle width="fill" height="fill" background="white"/>zIndex?numberZeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.
0blur?numberUnschärferadius in Punkten; 0 deaktiviert die Unschärfe.
4innerShadow?DrawingEffectEffektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectEffektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorFarbe des äußeren Schattens.
HDR("black")shadowOpacity?numberSchattendeckkraft 0–1; 0 blendet ihn aus.
0shadowRadius?numberUnschärferadius des äußeren Schattens in Punkten.
4shadowX?numberSchattenversatz in Punkten: x rechts, y unten.
0shadowY?numberSchattenversatz in Punkten: x rechts, y unten.
2animations?Animation[]Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberStabile Kennung unter Geschwisterelementen.
""Praxisbeispiel
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.anchorYBeim Weglassen
Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.