CapDrive
Panduan penggunaan

RepeatedLayout

Menduplikasi pola secara berkala di jendela pemangkasan, cocok untuk timbangan dan kompas yang terus bergerak. period mengatur interval pengulangan, value dan anchor menentukan di mana nilai saat ini disejajarkan.

Contoh

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

Penggunaan

  • children adalah satu pola, period jarak ulang. value sejajar anchor; kenaikannya memindahkan pola berlawanan, ditambah offset dalam poin. both mengulang dua sumbu, dipisahkan lewat {x,y}. Bingkai selalu memotong.
  • x/y dan transform diterapkan setelah layout. Memindah anak tidak mendorong saudara; gunakan spacing atau Spacer. Rotasi dan skala memengaruhi seluruh gambar.

Properti

children?ViewContent

Konten gambar anak.

axis?"horizontal" | "vertical" | "both"

Ulangi horizontal, vertical atau both; both membentuk kisi.

Contoh"horizontal"
period?RepeatAxisValue

Jarak salinan dalam poin; x/y mengatur setiap sumbu terpisah.

Contoh360
value?RepeatAxisValue

Koordinat isi yang ditempatkan pada anchor. Nilai membesar menggeser salinan berlawanan; bukan kecepatan.

Contoh$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Posisi area terlihat: 0 awal, 0.5 tengah, 1 akhir.

Contoh0.5
offset?RepeatAxisValue

Offset tambahan dalam poin setelah value disejajarkan dengan anchor.

Contoh0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Perataan anak bertumpuk pada sembilan posisi tepi dan tengah.

Contoh"topLeading"
Properti umum
width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh100
height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh80
padding?number

Padding konten dalam poin.

Contoh0
x?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
y?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}
background?Paint

Warna atau gradasi latar; clear berarti transparan.

Contoh"clear"
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
cornerRadius?number

Radius sudut dalam poin.

Contoh0
clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"
mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

Contoh<Circle width="fill" height="fill" background="white"/>
zIndex?number

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0
blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4
innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Warna bayangan luar.

ContohHDR("black")
shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0
shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4
shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0
shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2
animations?Animation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

Contoh[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identitas stabil di antara elemen sejajar.

Contoh praktis

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>
  );
}

Animasi

Animasi

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

PropertiJika dihilangkan
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Animasi

Symbol

Sebelumnya

RadialLayout

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait