CapDrive
Benutzerhandbuch

HStack

Ordnen Sie die Untertitel View von links nach rechts an, geeignet für horizontale Kombinationen von Symbolen und Zahlen, Zahlen und Einheiten usw. spacing legt den angrenzenden Abstand fest, alignment legt die Ober- und Unterseite oder die Ausrichtung der Textgrundlinie innerhalb dieser Zeile fest.

Beispiel

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" />
      <Text fontSize={32}>78</Text>
    </HStack>
  );
}

Verwendung

  • alignment richtet innerhalb der Zeile vertikal oder an Textgrundlinien aus, nicht die ganze Zeile horizontal. Spacer trennt zwei Enden; firstTextBaseline passt für große Zahlen mit kleinen Einheiten.
  • Maße sind Punkte. auto misst Inhalt, fill nutzt den zugeteilten Elternraum. Zuerst den Container bemessen; fill und langer Text vergrößern keinen festen Elternrahmen.
  • x/y und transform folgen der Platzberechnung. Verschieben verdrängt keine Geschwister; Abstände ändern spacing oder Spacer. Rotation und Skalierung betreffen die fertige Zeichnung.

Eigenschaften

children?ViewContent

Untergeordneter Zeicheninhalt.

spacing?number

Abstand zwischen untergeordneten Ansichten in Punkten.

Beispiel8
alignment?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"

Vertikale Ausrichtung in der Zeile: top, center, bottom oder erste/letzte Textgrundlinie.

Beispiel"center"
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?Animation[]

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 (
    <HStack width={260} alignment="firstTextBaseline" spacing={4}>
      <Text fontSize={48}>78</Text>
      <Text fontSize={14}>km/h</Text>
      <Spacer minLength={12} />
      <Symbol name="speedometer" fontSize={24} />
    </HStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.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
spacing8
alignment"center"

Spacer

VStack

VStack

Zurück

ZStack

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs