Color / Gradient

Os métodos de escrita comumente usados ​​incluem nomes de cores, cores hexadecimais e objetos { r, g, b, a }. Componentes RGB e transparência usam 0–1, clear significa transparente. $env.foreground e $env.accent fornecem cores comuns que mudam de acordo com o tema.

HDR(color) adiciona a tag HDR à string de cores. As cores normais preenchidas explicitamente permanecem SDR; por exemplo, color={$env.foreground} não será aprimorado automaticamente e pode ser escrito como color={HDR($env.foreground)} quando o realce for necessário. O comportamento padrão quando o atributo color é omitido é mostrado na tabela abaixo.

Quando nenhuma cor de desenho é especificada, as seguintes cores padrão são marcadas com HDR.

O fundo do contêiner permanece transparente. Imagens em cores primárias, mapas e materiais do sistema mantêm suas próprias cores e exibição. Cores normais, escalas de cores gradientes e paletas de símbolos especificadas explicitamente não são convertidas em HDR como um todo, e as cores que requerem aprimoramento devem ser marcadas separadamente.

O sinalizador HDR não garante o brilho real. O aprimoramento requer iOS 26 ou posterior, telas suportadas, modo HUD e ativação do aprimoramento HDR; os resultados reais também são afetados pelo ambiente de exibição atual. O modo normal do instrumento, a visualização do editor e o PNG exportado usam a faixa de exibição normal e a visualização não pode ser usada para avaliar o efeito de realce real.

As três linhas a seguir omitem a cor, usam explicitamente a cor normal e marcam explicitamente a cor de destaque. Pode parecer igual na visualização, mas a diferença de aprimoramento se torna aparente após entrar em um ambiente HUD que suporta HDR.

function main() {
  return (
    <VStack spacing={8}>
      <Text fontSize={22}>Default HDR</Text>
      <Text fontSize={22} color={$env.foreground}>
        Explicit SDR
      </Text>
      <Text fontSize={22} color={HDR($env.accent)}>
        Explicit HDR
      </Text>
    </VStack>
  );
}

LinearGradient muda ao longo de uma linha reta, RadialGradient se espalha a partir do centro e AngularGradient muda angularmente em torno do centro. Ao construir, você pode passar um array de cores ou um array de cores com color e location. Use 0–1 para localização da amostra de cor e coordenadas centrais, pontos para raio radial e graus para ângulos.

O gradiente criado pode ser passado para background, stroke e outros atributos que suportam Paint. Atributos que aceitam apenas Color ainda precisam usar cor única. Os tipos específicos disponíveis estão sujeitos à definição do atributo.

Fundo linear, preenchimento radial, traço angular e texto HDR são mostrados abaixo, respectivamente.

function main() {
  return (
    <VStack spacing={12}>
      <Rectangle
        height={48}
        background={LinearGradient(['#B9E883', '#30B3A2'], { angle: 30 })}
      />
      <Circle
        width={100}
        height={100}
        background={RadialGradient(['white', '#30B3A2'])}
      />
      <Circle
        width={100}
        height={100}
        stroke={AngularGradient(['#B9E883', '#30B3A2', '#B9E883'])}
        lineWidth={8}
        background="clear"
      />
      <Text color={HDR('white')}>CapDrive</Text>
    </VStack>
  );
}