CapDrive
Guía de uso

ZStack

Apile varios View en la misma área, adecuados para lecturas de fondo, escala y centro. Los hijos View se dibujan secuencialmente y alignment establece su posición de alineación común dentro del contenedor.

Ejemplo

function main() {
  return (
    <ZStack alignment="center">
      <Circle width={100} height={100} background={$env.accent} />
      <Text color="black">78</Text>
    </ZStack>
  );
}

Uso

  • Los hijos se dibujan de atrás hacia delante; zIndex cambia el orden. alignment usa el mismo anclaje del contenedor. Si ambos tienen igual tamaño, la diferencia apenas se ve.
  • Las medidas numéricas son puntos. auto mide el contenido y fill usa el espacio asignado. Define primero el contenedor: fill y un texto largo no amplían un padre fijo.
  • x/y y transform actúan después de reservar espacio. Mover un hijo no empuja a sus hermanos; usa spacing o Spacer. Giro y escala afectan al dibujo completo.

Propiedades

children?ViewContent

Contenido de dibujo hijo.

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

Alinea hijos superpuestos en nueve posiciones de borde y centro.

Ejemplo"center"
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo100
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo80
padding?number

Relleno interior del contenido en puntos.

Ejemplo0
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
background?Paint

Color o degradado de fondo; clear es transparente.

Ejemplo"clear"
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
cornerRadius?number

Radio de las esquinas en puntos.

Ejemplo0
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4
innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color de la sombra exterior.

EjemploHDR("black")
shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0
shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4
shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0
shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2
animations?Animation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

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

Identidad estable entre elementos hermanos.

Ejemplo práctico

function main() {
  return (
    <ZStack width={180} height={100} alignment="bottomTrailing">
      <Rectangle
        width="fill"
        height="fill"
        background="#30B3A233"
        cornerRadius={12}
      />
      <Text fontSize={40} x={-12} y={-8}>
        78
      </Text>
    </ZStack>
  );
}

Animación

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

PropiedadesAl omitir
alignment"center"

Group

Material

HStack

Anterior

Material

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas