CapDrive
Guia de uso

Image

Exibe uma imagem de um recurso de medidor, como um logotipo, um plano de fundo decorativo ou uma textura de bloco. source Use o nome do recurso para definir o método de dimensionamento, corte ou repetição para os tamanhos disponíveis.

Exemplo

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Uso

  • source identifica uma imagem do pacote. original mantém cores; template usa color. repeatMode repete a imagem, não os filhos. contentMode controla o dimensionamento normal.
  • 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.

Propriedades

sourcestring

Nome do arquivo de imagem nos recursos do instrumento, não um nome SF Symbols.

Exemplo""
contentMode?"fit" | "fill" | "stretch"

fit mostra tudo; fill preenche e recorta; stretch altera a proporção.

Exemplo"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Repetição no tamanho original: repeat nos dois eixos, repeatX/repeatY em um, none sem repetição.

Exemplo"none"
renderingMode?"original" | "template"

original mantém as cores; template usa color para tingir.

Exemplo"original"
color?Paint

Cor de desenho, incluindo cores HDR.

ExemploHDR($env.foreground)
contentAnimation?ContentAnimation

Transição na mudança de conteúdo. Escolha um type compatível; duration/delay em segundos.

Exemplo{type: "fade", duration: 0.25}
Propriedades comuns
width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo100
height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo80
padding?number

Espaçamento interno do conteúdo em pontos.

Exemplo0
x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0
transform?ViewTransform

Transforma 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.

Exemplo{rotation: 0}
background?Paint

Cor ou gradiente de fundo; clear é transparente.

Exemplo"clear"
opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1
cornerRadius?number

Raio dos cantos em pontos.

Exemplo0
clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"
mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

Exemplo<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0
blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4
innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")
shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0
shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4
shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0
shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2
animations?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.

Exemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animação

Animação

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

Quando 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.

PropriedadesQuando omitido
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Anterior

Group

Próximo passo

Nesta página

ExemploUsoPropriedadesExemplo práticoAnimaçãoQuando omitidoAPIs relacionadas