CapDriveRepeatedLayout
Duplica periodicamente um padrão na janela de corte, adequado para escalas e bússolas em movimento contínuo. period define o intervalo de repetição, value e anchor determinam onde o valor atual está alinhado.
Exemplo
function main() {
return (
<RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
<Text width={120}>N</Text>
</RepeatedLayout>
);
}
Uso
- children define um padrão, period sua repetição. value alinha com anchor; aumentá-lo desloca no sentido oposto, mais offset em pontos. both repete nos dois eixos, separados por {x,y}. O quadro sempre recorta.
- x/y e transform atuam após o layout. Mover um filho não empurra os vizinhos; use spacing ou Spacer para intervalos. Rotação e escala afetam o desenho inteiro.
Propriedades
children?ViewContentConteúdo de desenho filho.
axis?"horizontal" | "vertical" | "both"Repete em horizontal, vertical ou both; both cria uma grade.
"horizontal"period?RepeatAxisValueDistância entre cópias em pontos; x/y configura cada eixo separadamente.
360value?RepeatAxisValueCoordenada do conteúdo colocada em anchor. Aumentar move cópias no sentido contrário; não é velocidade.
$data.current.heading?.direction ?? 0anchor?RepeatAxisValuePosição na área visível: 0 início, 0.5 meio, 1 fim.
0.5offset?RepeatAxisValueDeslocamento extra em pontos após alinhar value a anchor.
0alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"Alinha filhos sobrepostos em nove posições de bordas e centro.
"topLeading"Propriedades comuns
width?number | "auto" | "fill"Largura em pontos, tamanho automático ou preenchimento do contêiner.
100height?number | "auto" | "fill"Altura em pontos, tamanho automático ou preenchimento do contêiner.
80padding?numberEspaçamento interno do conteúdo em pontos.
0x?numberDeslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.
0y?numberDeslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.
0transform?ViewTransformTransforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.
{rotation: 0}background?PaintCor ou gradiente de fundo; clear é transparente.
"clear"opacity?numberOpacidade de todo o View: 0 transparente, 1 opaco.
1cornerRadius?numberRaio dos cantos em pontos.
0clip?"rectangle" | "ellipse"Recorte rectangle ou ellipse; Material também aceita false para desativar.
"rectangle"mask?View | nullView de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrdem entre elementos irmãos; valores maiores ficam na frente.
0blur?numberRaio do desfoque em pontos; 0 desativa.
4innerShadow?DrawingEffectCor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectCor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorCor da sombra externa.
HDR("black")shadowOpacity?numberOpacidade da sombra entre 0 e 1; 0 oculta.
0shadowRadius?numberRaio de desfoque da sombra externa em pontos.
4shadowX?numberDeslocamento da sombra em pontos: x à direita, y para baixo.
0shadowY?numberDeslocamento da sombra em pontos: x à direita, y para baixo.
2animations?Animation[]Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentidade estável entre elementos irmãos.
Exemplo prático
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>
);
}
Animação
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.yQuando omitido
A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.