CapDrive
Panduan penggunaan

RadialLayout

Bagikan skala, angka, atau simbol di sekeliling lingkaran. radius mengontrol jarak dari pusat ke pusat tata letak View, dan startAngle dan sweepAngle mengontrol jangkauan distribusi.

Contoh

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

Penggunaan

  • Radius menempatkan pusat anak, bukan tepi luar. includeEnd=false membagi n, true n−1 bagian. Pada lingkaran penuh ujung awal/akhir bertumpuk. childRotation mengatur orientasi.
  • Sudut dalam derajat: 0 kanan, 90 bawah, sweep positif searah jarum jam. startAngle modulo 360, sweepAngle dibatasi −360…360. Nol kosong, ±360 penuh. wrap:360 hanya untuk startAngle.
  • Gunakan ID data stabil sebagai key agar identitas dan animasi terjaga. Indeks array tidak cocok sebagai ID tetap saat urutan berubah.

Properti

children?ViewContent

Konten gambar anak.

radius?number

Radius dalam poin: radius untuk kedua sumbu, radiusX/radiusY menimpa per sumbu. Negatif menjadi 0.

Contoh80
radiusX?number

Radius dalam poin: radius untuk kedua sumbu, radiusX/radiusY menimpa per sumbu. Negatif menjadi 0.

Contoh80
radiusY?number

Radius dalam poin: radius untuk kedua sumbu, radiusX/radiusY menimpa per sumbu. Negatif menjadi 0.

Contoh80
startAngle?number

Sudut awal dalam derajat, dinormalisasi modulo 360 saat pengambilan sampel.

Contoh-90
sweepAngle?number

Rentang sudut dalam derajat, dibatasi ke -360…360 saat pengambilan sampel. Nilai positif searah jarum jam; wrap tidak didukung.

Contoh360
includeEnd?boolean

Sertakan sudut akhir dalam penempatan. Untuk lingkaran penuh, false mencegah tumpang tindih awal dan akhir.

Contohfalse
childRotation?"none" | "radial" | "tangent"

none mempertahankan arah, radial mengikuti radius, tangent menambah 90 derajat.

Contoh"none"
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
clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse
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?RadialLayoutAnimation[]

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 (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

Animasi

Animasi

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYradiusradiusXradiusYstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

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
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Sebelumnya

Circle

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait