CapDriveMaterial
Desenhe a superfície do vidro fosco, que pode ser sobreposta com texto e gráficos para formar uma área de conteúdo. type atualmente suporta fosco, style controla a espessura do material; o efeito visível depende do conteúdo por trás dele.
Exemplo
function main() {
return (
<ZStack>
<Material type="frosted" style="thin" />
<Text>CapDrive</Text>
</ZStack>
);
}
Uso
- Material é uma superfície sem children ou padding. Sobreponha texto com ZStack; o vidro depende do conteúdo atrás. type aceita frosted, style escolhe espessura; texturas de imagem não são aceitas.
- mask usa alfa: opaco revela, transparente oculta. Preto e branco com alfa igual são equivalentes. Não altera layout; dimensione explicitamente e diferencie do recorte clipped.
Propriedades
type"frosted"Tipo de material; atualmente frosted cria vidro fosco nativo.
"frosted"style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"Aparência de ultraThin a ultraThick; bar usa o material de barras do sistema.
"ultraThin"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.
80x?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?boolean | "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 (
<ZStack width={200} height={100}>
<HStack spacing={0} width="fill" height="fill">
<Rectangle width="fill" height="fill" background="blue" />
<Rectangle width="fill" height="fill" background="orange" />
</HStack>
<Material
width={160}
height={64}
type="frosted"
style="thin"
cornerRadius={16}
/>
<Text fontSize={28}>78 km/h</Text>
</ZStack>
);
}
Animação
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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.