Color / Gradient

I metodi di scrittura comunemente utilizzati includono nomi di colori, colori esadecimali e oggetti { r, g, b, a }. I componenti RGB e la trasparenza utilizzano 0–1, clear significa trasparente. $env.foreground e $env.accent forniscono colori comuni che cambiano con il tema.

HDR(color) aggiunge il tag HDR alla stringa dei colori. I colori normali compilati esplicitamente rimangono SDR; ad esempio, color={$env.foreground} non verrà migliorato automaticamente e potrà essere scritto come color={HDR($env.foreground)} quando è richiesta l'evidenziazione. Il comportamento predefinito quando l'attributo color viene omesso è mostrato nella tabella seguente.

Quando non viene specificato alcun colore di disegno, i seguenti colori predefiniti sono contrassegnati con HDR.

Lo sfondo del contenitore rimane trasparente. Le immagini a colori primari, le mappe e i materiali del sistema mantengono i propri colori e la propria visualizzazione. I colori normali, le scale di colore dei gradienti e le tavolozze dei simboli specificati esplicitamente non vengono convertiti in HDR nel loro insieme e i colori che richiedono miglioramenti devono essere contrassegnati separatamente.

Il flag HDR non garantisce la luminosità effettiva. Il miglioramento richiede iOS 26 o versione successiva, schermi supportati, modalità HUD e l'attivazione del miglioramento HDR; i risultati effettivi sono influenzati anche dall'ambiente di visualizzazione corrente. La modalità strumento normale, l'anteprima dell'editor e il PNG esportato utilizzano l'intervallo di visualizzazione normale e l'anteprima non può essere utilizzata per giudicare l'effettivo effetto di evidenziazione.

Le tre righe seguenti omettono il colore, utilizzano esplicitamente il colore normale e contrassegnano esplicitamente il colore di evidenziazione. Potrebbe sembrare lo stesso nell'anteprima, ma la differenza di miglioramento diventa evidente dopo aver inserito un ambiente HUD che supporta 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 cambia lungo una linea retta, RadialGradient si estende dal centro e AngularGradient cambia angolarmente attorno al centro. Durante la costruzione, puoi passare un array di colori o un array di colori con color e location. Utilizzare 0–1 per la posizione del campione di colore e le coordinate del centro, punti per il raggio radiale e gradi per gli angoli.

Il gradiente creato può essere passato a background, stroke e altri attributi che supportano Paint. Gli attributi che accettano solo Color devono comunque utilizzare un solo colore. I tipi specifici disponibili sono soggetti alla definizione dell'attributo.

Di seguito sono mostrati rispettivamente lo sfondo lineare, il riempimento radiale, il tratto angolare e il testo HDR.

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>
  );
}