CapDriveVStack
Organize as legendas View de cima para baixo, adequadas à combinação vertical de títulos, números principais e unidades. spacing define o espaçamento adjacente e alignment define o alinhamento à esquerda e à direita nesta coluna.
Exemplo
function main() {
return (
<VStack spacing={8} alignment="leading">
<Text fontSize={32}>78</Text>
<Text>km/h</Text>
</VStack>
);
}
Uso
- alignment controla alinhamento horizontal da coluna: leading à esquerda, trailing à direita. Spacer cria espaço vertical flexível; spacing separa filhos adjacentes.
- Dimensões numéricas usam pontos. auto mede o conteúdo; fill usa o espaço atribuído pelo pai. Dimensione o contêiner primeiro. fill e texto longo não ampliam um pai fixo.
- 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.
spacing?numberEspaço entre visualizações filhas em pontos.
8alignment?"leading" | "center" | "trailing"Alinhamento horizontal na coluna: leading, center ou trailing.
"center"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.
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 (
<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>
);
}
Animação
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.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.