CapDriveGroup
Birden fazla View'yi bir bütün halinde birleştirerek şeffaflık, döndürme veya diğer özel efektleri eşit şekilde uygulayın. View çocuğu dış kabın düzenleme kurallarına uyar ve özel efektler sentezlenen sonuçların tamamına uygulanır.
Örnek
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Kullanım
- Group düzen oluşturmaz; çocuklar dış yerleşime katılır. Grubu birleştirip opaklık ve efekt uygular; örtüşmeler ayrı opacity değerlerinden farklıdır. Ölçü ve padding için dış Stack kullanın.
- Güncelleme ve animasyon kimliğini korumak için key olarak sabit veri kimlikleri kullanın. Sırası değişen dizilerde indeks kalıcı kimlik değildir.
- x/y ve transform yerleşimden sonra uygulanır. Çocuğu taşımak kardeşleri itmez; aralık için spacing veya Spacer kullanın. Dönüş ve ölçek tüm çizimi etkiler.
Özellikler
children?ViewContentAlt çizim içeriği.
Ortak özellikler
transform?ViewTransformYerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.
{rotation: 0}background?PaintArka plan rengi veya gradyanı; clear saydamdır.
"clear"opacity?numberTüm View opaklığı: 0 saydam, 1 opak.
1cornerRadius?numberKöşe yarıçapı, punto.
0clipped?booleanView sınırlarını aşan çizimi kırpar.
falseclip?"rectangle" | "ellipse"Kırpma şekli rectangle veya ellipse; Material için false kapatır.
"rectangle"mask?View | nullAlfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.
<Circle width="fill" height="fill" background="white"/>zIndex?numberKardeşler arasında çizim sırası; büyük değer öndedir.
0blur?numberBulanıklık yarıçapı, punto; 0 kapatır.
4innerShadow?DrawingEffectEfekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectEfekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorDış gölge rengi.
HDR("black")shadowOpacity?numberGölge opaklığı 0–1; 0 gizler.
0shadowRadius?numberDış gölge bulanıklık yarıçapı, punto.
4shadowX?numberGölge kayması, punto: x sağa, y aşağı.
0shadowY?numberGölge kayması, punto: x sağa, y aşağı.
2animations?Animation[]Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberKardeş öğeler arasında kararlı kimlik.
""Pratik örnek
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>
);
}
Animasyon
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYAtlandığında
Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.