CapDriveRepeatedLayout
Duplica periódicamente un patrón en la ventana de recorte, adecuado para escalas y compases en movimiento continuo. period establece el intervalo de repetición, value y anchor determinan dónde está alineado el valor actual.
Ejemplo
function main() {
return (
<RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
<Text width={120}>N</Text>
</RepeatedLayout>
);
}
Uso
- children define un motivo y period su repetición. value se coloca en anchor; aumentarlo desplaza en sentido contrario, más offset en puntos. both repite en dos ejes, independientes con {x,y}. Siempre recorta al área visible.
- 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.
axis?"horizontal" | "vertical" | "both"Repetición horizontal, vertical o both; both forma una cuadrícula.
"horizontal"period?RepeatAxisValueDistancia entre copias en puntos; x/y configura cada eje por separado.
360value?RepeatAxisValueCoordenada del contenido situada en anchor. Aumentarla mueve copias en sentido contrario; no es velocidad.
$data.current.heading?.direction ?? 0anchor?RepeatAxisValuePosición en el área visible: 0 inicio, 0.5 centro, 1 final.
0.5offset?RepeatAxisValueDesplazamiento extra en puntos tras alinear value con anchor.
0alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"Alinea hijos superpuestos en nueve posiciones de borde y centro.
"topLeading"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.
0clip?"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 (
<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>
);
}
Animación
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.yAl 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.