CapDrive
Benutzerhandbuch

Material

Zeichnen Sie die Oberfläche aus Milchglasmaterial, das mit Text und Grafiken überlagert werden kann, um einen Inhaltsbereich zu bilden. type unterstützt derzeit mattiert, style steuert die Materialstärke; Der sichtbare Effekt hängt vom Inhalt dahinter ab.

Beispiel

function main() {
  return (
    <ZStack>
      <Material type="frosted" style="thin" />
      <Text>CapDrive</Text>
    </ZStack>
  );
}

Verwendung

  • Material ist eine Fläche ohne children und padding. Text per ZStack darüberlegen. Milchglas hängt vom Hintergrund ab. type unterstützt derzeit frosted, style die Stärke; Bildtexturen werden nicht akzeptiert.
  • mask verwendet Alpha: deckende Bereiche bleiben sichtbar, transparente verschwinden. Schwarz und Weiß mit gleichem Alpha wirken gleich. Masken beeinflussen das Layout nicht; Maße explizit setzen und von clipped unterscheiden.

Eigenschaften

type"frosted"

Materialart; derzeit erzeugt frosted natives Milchglas.

Beispiel"frosted"
style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"

Materialstärke ultraThin bis ultraThick; bar nutzt Systemleistenmaterial.

Beispiel"ultraThin"
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
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?boolean | "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 (
    <ZStack width={200} height={100}>
      <HStack spacing={0} width="fill" height="fill">
        <Rectangle width="fill" height="fill" background="blue" />
        <Rectangle width="fill" height="fill" background="orange" />
      </HStack>
      <Material
        width={160}
        height={64}
        type="frosted"
        style="thin"
        cornerRadius={16}
      />
      <Text fontSize={28}>78 km/h</Text>
    </ZStack>
  );
}

Animation

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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
type"frosted"
style"ultraThin"

ZStack

Image

ZStack

Zurück

CardContent

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs