CapDriveVStack
View alt başlıklarını, başlıkların, ana sayıların ve birimlerin dikey kombinasyonuna uygun şekilde yukarıdan aşağıya doğru düzenleyin. spacing bitişik aralığı ayarlar ve alignment bu sütundaki sol ve sağ hizalamayı ayarlar.
Örnek
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Kullanım
- alignment sütunda yatay hizalamadır: leading sol, trailing sağ. Esnek dikey boşluk için Spacer, komşular arası için spacing kullanın.
- 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.
spacing?numberPunto cinsinden alt görünüm aralığı.
8alignment?"leading" | "center" | "trailing"Sütun içi yatay hizalama: leading, center veya trailing.
"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 (
<VStack width={180} height={140} alignment="leading" spacing={8}>
<Text fontSize={14}>Speed</Text>
<Spacer minLength={8} />
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
</VStack>
);
}
Animasyon
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.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.