CapDrive
Benutzerhandbuch

RadialLayout

Verteilen Sie Skalen, Zahlen oder Symbole im Kreis. radius steuert den Abstand von der Mitte zur Layoutmitte von View, und startAngle und sweepAngle steuern den Verteilungsbereich.

Beispiel

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

Verwendung

  • Radien bestimmen Kindmittelpunkte, nicht die äußere Größe. includeEnd=false teilt in n, true in n−1 Abschnitte. Bei einem Vollkreis überlappen Anfang und Ende. childRotation bestimmt die Ausrichtung.
  • Winkel in Grad: 0 rechts, 90 unten, positive Bögen im Uhrzeigersinn. startAngle modulo 360, sweepAngle auf −360…360 begrenzt. 0 ist leer, ±360 ein Vollkreis. wrap:360 nur für startAngle, nicht sweepAngle.
  • Stabile Daten-IDs als key erhalten die View-Identität bei Aktualisierungen und Animationen. Bei veränderlicher Reihenfolge keinen Arrayindex als dauerhafte ID verwenden.

Eigenschaften

children?ViewContent

Untergeordneter Zeicheninhalt.

radius?number

Radius in Punkten: radius für beide Achsen, radiusX/radiusY überschreiben einzeln; negative Werte werden 0.

Beispiel80
radiusX?number

Radius in Punkten: radius für beide Achsen, radiusX/radiusY überschreiben einzeln; negative Werte werden 0.

Beispiel80
radiusY?number

Radius in Punkten: radius für beide Achsen, radiusX/radiusY überschreiben einzeln; negative Werte werden 0.

Beispiel80
startAngle?number

Startwinkel in Grad, bei der Abtastung modulo 360 normalisiert.

Beispiel-90
sweepAngle?number

Winkelbereich in Grad, bei der Abtastung auf -360…360 begrenzt. Positive Werte verlaufen im Uhrzeigersinn; wrap wird nicht unterstützt.

Beispiel360
includeEnd?boolean

Endwinkel in die Verteilung aufnehmen. Für einen Vollkreis false vermeidet doppelte Endpunkte.

Beispielfalse
childRotation?"none" | "radial" | "tangent"

none unverändert, radial folgt dem Radius, tangent dreht zusätzlich 90 Grad.

Beispiel"none"
Allgemeine Eigenschaften
width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel100
height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel80
padding?number

Innenabstand des Inhalts in Punkten.

Beispiel0
x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}
background?Paint

Hintergrundfarbe oder Verlauf; clear ist transparent.

Beispiel"clear"
opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1
cornerRadius?number

Eckenradius in Punkten.

Beispiel0
clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse
clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"
mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

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

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0
blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4
innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

Farbe des äußeren Schattens.

BeispielHDR("black")
shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0
shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4
shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0
shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2
animations?RadialLayoutAnimation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

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

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

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

Animation

Animation

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

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

EigenschaftenBeim Weglassen
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Zurück

Circle

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs