CapDrive
Guida all’uso

RepeatedLayout

Duplica periodicamente un modello nella finestra di ritaglio, adatto per scale e compassi in continuo movimento. period imposta l'intervallo di ripetizione, value e anchor determinano dove è allineato il valore corrente.

Esempio

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

Utilizzo

  • children definisce un motivo, period la ripetizione. value si allinea ad anchor; aumentarlo sposta in direzione opposta, più offset in punti. both ripete su due assi, separati con {x,y}. Il riquadro ritaglia sempre.
  • x/y e transform seguono il layout. Spostare un figlio non spinge gli altri; usa spacing o Spacer. Rotazione e scala interessano il disegno completo.

Proprietà

children?ViewContent

Contenuto di disegno figlio.

axis?"horizontal" | "vertical" | "both"

Ripetizione horizontal, vertical o both; both crea una griglia.

Esempio"horizontal"
period?RepeatAxisValue

Distanza tra copie in punti; x/y imposta gli assi separatamente.

Esempio360
value?RepeatAxisValue

Coordinata del contenuto posta su anchor. Aumentando, le copie si muovono al contrario; non è una velocità.

Esempio$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Posizione nell’area visibile: 0 inizio, 0.5 centro, 1 fine.

Esempio0.5
offset?RepeatAxisValue

Offset aggiuntivo in punti dopo aver allineato value ad anchor.

Esempio0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Allinea i figli sovrapposti in nove posizioni tra bordi e centro.

Esempio"topLeading"
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
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 (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

Animazione

Animazione

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

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
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Animazione

Symbol

Precedente

RadialLayout

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate