Rectangle

Desenha um retângulo com cantos arredondados opcionais para uso com planos de fundo, barras de progresso e bordas. background preenche o interior, stroke traços, lineWidth e strokePosition controlam a largura e a posição do traço.

Exemplo

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Uso

background preenche, stroke contorna. cornerRadius limita-se à metade do menor lado. inside fica dentro, center cruza o limite, outside fica fora; o pai pode recortar o traço externo.
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.
background/stroke aceitam Color ou Gradient. Use três construtores Gradient; posições e centros 0–1, raios em pontos. HDR envolve uma cor; brilho depende do aparelho e do ambiente.

Propriedades

background?Paint

Cor ou gradiente de fundo; clear é transparente.

ExemploHDR($env.dark ? "white" : "black")

cornerRadius?number

Raio dos cantos em pontos.

Exemplo0

stroke?Paint

Cor ou gradiente do traço; clear o oculta.

Exemplo"clear"

lineWidth?number

Espessura do traço em pontos; 0 não desenha traço.

Exemplo2

strokePosition?"inside" | "center" | "outside"

Posição do traço em relação ao contorno: inside, center ou outside.

Exemplo"inside"

lineCap?"round" | "butt" | "square"

Ponta da linha: butt corta, square estende em quadrado, round arredonda.

Exemplo"round"

lineJoin?"round" | "miter" | "bevel"

Formato das junções: miter, round ou bevel.

Exemplo"round"

dash?number[]

Comprimentos alternados de traço e espaço em pontos; matriz vazia faz linha contínua.

Exemplo[]

dashPhase?number

Deslocamento do padrão tracejado em pontos.

Exemplo0

trimStart?number

Trecho visível trimStart–trimEnd entre 0 e 1. Circle/Ellipse/Arc usam ângulos.

Exemplo0

trimEnd?number

Trecho visível trimStart–trimEnd entre 0 e 1. Circle/Ellipse/Arc usam ângulos.

Exemplo1

Propriedades comuns

width?number | "auto" | "fill"

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

Exemplo"fill"

height?number | "auto" | "fill"

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

Exemplo"fill"

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}

opacity?number

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

Exemplo1

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={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animação

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

Propriedades	Quando omitido
`cornerRadius`	`0`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`trimStart`	`0`
`trimEnd`	`1`
`background`	`HDR($env.dark ? 'white' : 'black')`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

Color / Gradient

ZStack

Nesta página

Rectangle

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

Color / Gradient

ZStack

Nesta página