CapDriveVStack
Organice los subtítulos View de arriba a abajo, adecuados para la combinación vertical de títulos, números principales y unidades. spacing establece el espaciado adyacente y alignment establece la alineación izquierda y derecha dentro de esta columna.
Ejemplo
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Uso
- alignment alinea horizontalmente en la columna: leading izquierda, trailing derecha. Spacer añade espacio vertical flexible y spacing separa hijos contiguos.
- 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?ViewContentContenido de dibujo hijo.
spacing?numberEspacio entre vistas hijas en puntos.
8alignment?"leading" | "center" | "trailing"Alineación horizontal en la columna: leading, center o trailing.
"center"Propiedades comunes
width?number | "auto" | "fill"Anchura en puntos, tamaño automático o relleno del contenedor.
100height?number | "auto" | "fill"Altura en puntos, tamaño automático o relleno del contenedor.
80padding?numberRelleno interior del contenido en puntos.
0x?numberDesplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.
0y?numberDesplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.
0transform?ViewTransformTransformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.
{rotation: 0}background?PaintColor o degradado de fondo; clear es transparente.
"clear"opacity?numberOpacidad de todo el View: 0 transparente, 1 opaco.
1cornerRadius?numberRadio de las esquinas en puntos.
0clipped?booleanRecorta el dibujo que sobresale de los límites del View.
falseclip?"rectangle" | "ellipse"Recorte rectangle o ellipse; Material también admite false para desactivarlo.
"rectangle"mask?View | nullView de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrden entre elementos hermanos; los valores mayores aparecen delante.
0blur?numberRadio de desenfoque en puntos; 0 lo desactiva.
4innerShadow?DrawingEffectColor, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectColor, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorColor de la sombra exterior.
HDR("black")shadowOpacity?numberOpacidad de la sombra de 0 a 1; 0 la oculta.
0shadowRadius?numberRadio de desenfoque de la sombra, en puntos.
4shadowX?numberDesplazamiento de sombra en puntos: x derecha, y abajo.
0shadowY?numberDesplazamiento de sombra en puntos: x derecha, y abajo.
2animations?Animation[]Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentidad estable entre elementos hermanos.
Ejemplo práctico
function main() {
return (
<VStack width={180} height={140} alignment="leading" spacing={8}>
<Text fontSize={14}>Speed</Text>
<Spacer minLength={8} />
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
</VStack>
);
}
Animación
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYAl 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.