CapDriveZStack
Arka plan, ölçek ve merkez okumaları için uygun olan birden fazla View öğesini aynı alanda istifleyin. View çocukları sırayla çizilir ve alignment bunların kapsayıcı içindeki ortak hizalama konumunu belirler.
Örnek
function main() {
return (
<ZStack alignment="center">
<Circle width={100} height={100} background={$env.accent} />
<Text color="black">78</Text>
</ZStack>
);
}
Kullanım
- Çocuklar arkadan öne çizilir, zIndex sırayı değiştirir. alignment aynı kapsayıcı dayanağını kullanır. Boyutlar aynıysa fark az görünür.
- Sayısal ölçüler noktadır. auto içeriği ölçer, fill ebeveynin ayırdığı alanı kullanır. Önce kapsayıcıyı boyutlandırın; fill veya uzun metin sabit ebeveyni genişletmez.
- 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.
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"Üst üste çocukları dokuz kenar/merkez konumunda hizalar.
"center"Ortak özellikler
width?number | "auto" | "fill"Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.
100height?number | "auto" | "fill"Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.
80padding?numberPunto cinsinden içerik iç boşluğu.
0x?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0y?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0transform?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 (
<ZStack width={180} height={100} alignment="bottomTrailing">
<Rectangle
width="fill"
height="fill"
background="#30B3A233"
cornerRadius={12}
/>
<Text fontSize={40} x={-12} y={-8}>
78
</Text>
</ZStack>
);
}
Animasyon
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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.
| Özellikler | Atlandığında |
|---|---|
alignment | "center" |