CapDrive
Guida all’uso

Image

Visualizza un'immagine da una risorsa indicatore, ad esempio un logo, uno sfondo decorativo o una trama di riquadro. source Utilizza il nome della risorsa per impostare il metodo di ridimensionamento, ritaglio o ripetizione sulle dimensioni disponibili.

Esempio

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Utilizzo

  • source identifica un’immagine nel pacchetto. original conserva i colori; template applica color. repeatMode ripete l’immagine, non i figli. contentMode regola il normale ridimensionamento.
  • Le misure numeriche sono punti. auto misura il contenuto; fill usa lo spazio assegnato dal genitore. Dimensiona prima il contenitore: fill e testo lungo non ampliano un genitore fisso.

Proprietà

sourcestring

Nome di file immagine nelle risorse dello strumento, non un nome SF Symbols.

Esempio""
contentMode?"fit" | "fill" | "stretch"

fit mostra tutto; fill riempie e ritaglia; stretch altera le proporzioni.

Esempio"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Ripete alla dimensione originale: repeat entrambi gli assi, repeatX/repeatY uno, none nessuno.

Esempio"none"
renderingMode?"original" | "template"

original conserva i colori; template applica color.

Esempio"original"
color?Paint

Colore di disegno, inclusi i colori HDR.

EsempioHDR($env.foreground)
contentAnimation?ContentAnimation

Transizione al cambio di contenuto. Scegli un type supportato; duration/delay in secondi.

Esempio{type: "fade", duration: 0.25}
Proprietà comuni
width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio100
height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio80
padding?number

Spaziatura interna del contenuto in punti.

Esempio0
x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}
background?Paint

Colore o gradiente di sfondo; clear è trasparente.

Esempio"clear"
opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1
cornerRadius?number

Raggio degli angoli in punti.

Esempio0
clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse
clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"
mask?View | null

View per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.

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

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0
blur?number

Raggio della sfocatura in punti; 0 la disattiva.

Esempio4
innerShadow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

Colore dell’ombra esterna.

EsempioHDR("black")
shadowOpacity?number

Opacità dell’ombra 0–1; 0 la nasconde.

Esempio0
shadowRadius?number

Raggio di sfocatura dell’ombra esterna in punti.

Esempio4
shadowX?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio0
shadowY?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio2
animations?Animation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

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

Identità stabile tra elementi fratelli.

Esempio pratico

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animazione

Animazione

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

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

ProprietàQuando omesso
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Precedente

Group

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate