CapDriveHStack
Organice los subtítulos View de izquierda a derecha, adecuados para combinaciones horizontales de íconos y números, números y unidades, etc. spacing establece el espaciado adyacente, alignment establece la alineación superior e inferior o la línea base del texto dentro de esta línea.
Ejemplo
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
Uso
- alignment alinea verticalmente o por línea base dentro de la fila, no su posición horizontal. Spacer separa extremos; firstTextBaseline une números grandes con unidades pequeñas.
- 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?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"Alineación vertical en la fila: top, center, bottom o primera/última línea base.
"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 (
<HStack width={260} alignment="firstTextBaseline" spacing={4}>
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
<Spacer minLength={12} />
<Symbol name="speedometer" fontSize={24} />
</HStack>
);
}
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.