CapDriveGroup
Combine vários View em um todo, aplicando uniformemente transparência, rotação ou outros efeitos especiais. O filho View segue as regras de organização do contêiner externo e os efeitos especiais são aplicados a todo o conjunto de resultados sintetizados.
Exemplo
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Uso
- Group não cria distribuição: os filhos participam do layout externo. Compõe o grupo antes de opacidade e efeitos, diferindo de opacidades individuais nas sobreposições. Use Stack externo para dimensões e padding.
- Use IDs estáveis em key para preservar identidade e animações. Índices não são identidades permanentes adequadas quando a ordem dos itens muda.
- 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.
Propriedades comuns
transform?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.
0clipped?booleanRecorta o desenho que ultrapassa os limites do View.
falseclip?"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 (
<HStack spacing={12}>
<Group opacity={0.6} transform={{ rotation: 10 }}>
<Text fontSize={40}>78</Text>
<Symbol name="speedometer" fontSize={28} />
</Group>
<Text>km/h</Text>
</HStack>
);
}
Animação
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYQuando 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.