CapDriveRepeatedLayout
Sürekli hareket eden ölçekler ve pusulalar için uygun olan, kırpma penceresindeki bir deseni periyodik olarak çoğaltır. period tekrar aralığını ayarlar, value ve anchor geçerli değerin nereye hizalanacağını belirler.
Örnek
function main() {
return (
<RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
<Text width={120}>N</Text>
</RepeatedLayout>
);
}
Kullanım
- children bir desen, period tekrar aralığıdır. value anchor ile hizalanır; artınca desen ters yönde hareket eder, offset eklenir. both iki ekseni tekrarlar, {x,y} ayrı ayarlar. Pencere daima kırpar.
- 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.
axis?"horizontal" | "vertical" | "both"horizontal, vertical veya both tekrar; both ızgara oluşturur.
"horizontal"period?RepeatAxisValueKopya aralığı, punto; x/y eksenleri ayrı ayarlar.
360value?RepeatAxisValueanchor konumuna yerleştirilecek içerik koordinatı. Artınca kopyalar ters yönde gider; hız değildir.
$data.current.heading?.direction ?? 0anchor?RepeatAxisValueGörünen alan oranı: 0 başlangıç, 0.5 orta, 1 son.
0.5offset?RepeatAxisValuevalue, anchor ile hizalandıktan sonraki ek kayma, punto.
0alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"Üst üste çocukları dokuz kenar/merkez konumunda hizalar.
"topLeading"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.
0clip?"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 (
<RepeatedLayout
width={240}
height={140}
axis="both"
period={{ x: 80, y: 50 }}
value={{ x: 40, y: 25 }}
anchor={{ x: 0.5, y: 0.5 }}
alignment="center"
>
<Symbol name="plus" fontSize={20} color={$env.accent} />
</RepeatedLayout>
);
}
Animasyon
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.yAtlandığı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.