CapDriveHStack
Organize as legendas View da esquerda para a direita, adequadas para combinações horizontais de ícones e números, números e unidades, etc. spacing define o espaçamento adjacente, alignment define o alinhamento superior e inferior ou da linha de base do texto dentro desta linha.
Exemplo
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
Uso
- alignment controla alinhamento vertical ou linhas de base da linha, não sua posição horizontal. Spacer separa extremidades; firstTextBaseline alinha números grandes a unidades pequenas.
- 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?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"Alinhamento vertical na linha: top, center, bottom ou primeira/última linha de base.
"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 (
<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>
);
}
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.