CapDrive
Kullanım kılavuzu

RadialLayout

Ölçekleri, sayıları veya sembolleri bir dairenin etrafına dağıtın. radius, merkezden View yerleşim merkezine olan mesafeyi kontrol eder ve startAngle ve sweepAngle dağıtım aralığını kontrol eder.

Örnek

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

Kullanım

  • Yarıçap çocuk merkezlerini yerleştirir, dış sınırı değil. includeEnd=false n, true n−1 parçaya böler. Tam turda uçlar çakışır. childRotation yönelimi ayarlar.
  • Açı derece: 0 sağ, 90 aşağı, pozitif sweep saat yönü. startAngle mod 360, sweepAngle −360…360 sınırlı. 0 çizmez, ±360 tam turdur. wrap:360 yalnız startAngle için.
  • Güncelleme ve animasyon kimliğini korumak için key olarak sabit veri kimlikleri kullanın. Sırası değişen dizilerde indeks kalıcı kimlik değildir.

Özellikler

children?ViewContent

Alt çizim içeriği.

radius?number

Yarıçap, punto: radius iki eksen, radiusX/radiusY ayrı eksenler. Negatif değerler 0 olur.

Örnek80
radiusX?number

Yarıçap, punto: radius iki eksen, radiusX/radiusY ayrı eksenler. Negatif değerler 0 olur.

Örnek80
radiusY?number

Yarıçap, punto: radius iki eksen, radiusX/radiusY ayrı eksenler. Negatif değerler 0 olur.

Örnek80
startAngle?number

Derece cinsinden başlangıç açısı; örnekleme sırasında 360 modunda normalleştirilir.

Örnek-90
sweepAngle?number

Derece cinsinden tarama açısı; örnekleme sırasında -360…360 ile sınırlanır. Pozitif değer saat yönündedir; wrap desteklenmez.

Örnek360
includeEnd?boolean

Dağılıma bitiş açısını dahil eder. Tam çemberde false uçların çakışmasını önler.

Örnekfalse
childRotation?"none" | "radial" | "tangent"

none yönü korur, radial yarıçapı izler, tangent 90 derece ekler.

Örnek"none"
Ortak özellikler
width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek100
height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek80
padding?number

Punto cinsinden içerik iç boşluğu.

Örnek0
x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
transform?ViewTransform

Yerleş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.

Örnek{rotation: 0}
background?Paint

Arka plan rengi veya gradyanı; clear saydamdır.

Örnek"clear"
opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1
cornerRadius?number

Köşe yarıçapı, punto.

Örnek0
clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse
clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"
mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

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

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0
blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4
innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

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

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

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

Dış gölge rengi.

ÖrnekHDR("black")
shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0
shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4
shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0
shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2
animations?RadialLayoutAnimation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

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

Kardeş öğeler arasında kararlı kimlik.

Pratik örnek

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

Animasyon

Animasyon

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

Atlandığı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.

ÖzelliklerAtlandığında
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Önceki

Circle

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler