Color / Gradient

Les méthodes d'écriture couramment utilisées incluent les noms de couleurs, les couleurs hexadécimales et les objets { r, g, b, a }. Les composants RVB et la transparence utilisent 0–1, clear signifie transparent. $env.foreground et $env.accent fournissent des couleurs communes qui changent en fonction du thème.

HDR(color) ajoute la balise HDR à la chaîne de couleur. Les couleurs normales explicitement remplies restent SDR ; par exemple, color={$env.foreground} ne sera pas automatiquement amélioré et peut être écrit sous la forme color={HDR($env.foreground)} lorsque la mise en surbrillance est requise. Le comportement par défaut lorsque l'attribut color est omis est indiqué dans le tableau ci-dessous.

Lorsqu'aucune couleur de dessin n'est spécifiée, les couleurs par défaut suivantes sont marquées par HDR.

L'arrière-plan du conteneur reste transparent. Les images en couleurs primaires, les cartes et les matériaux du système conservent leurs propres couleurs et affichage. Les couleurs normales, les échelles de couleurs dégradées et les palettes de symboles explicitement spécifiées ne sont pas converties en HDR dans leur ensemble, et les couleurs nécessitant une amélioration doivent être marquées séparément.

Le drapeau HDR ne garantit pas la luminosité réelle. L'amélioration nécessite iOS 26 ou version ultérieure, les écrans pris en charge, le mode HUD et l'activation de l'amélioration HDR ; les résultats réels sont également affectés par l’environnement d’affichage actuel. Le mode instrument normal, l'aperçu de l'éditeur et le PNG exporté utilisent la plage d'affichage normale, et l'aperçu ne peut pas être utilisé pour juger de l'effet de surbrillance réel.

Les trois lignes suivantes omettent la couleur, utilisent explicitement la couleur normale et marquent explicitement la couleur de surbrillance. Cela peut ressembler à l'aperçu, mais la différence d'amélioration devient apparente après être entré dans un environnement HUD prenant en charge 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 change le long d'une ligne droite, RadialGradient s'étend à partir du centre et AngularGradient change angulairement autour du centre. Lors de la construction, vous pouvez transmettre un tableau de couleurs ou un tableau de couleurs avec color et location. Utilisez 0–1 pour l'emplacement du patch de couleur et les coordonnées centrales, les points pour le rayon radial et les degrés pour les angles.

Le dégradé créé peut être transmis à background, stroke et à d'autres attributs prenant en charge Paint. Les attributs qui n'acceptent que Color doivent toujours utiliser une seule couleur. Les types spécifiques disponibles sont soumis à la définition de l'attribut.

L'arrière-plan linéaire, le remplissage radial, le trait angulaire et le texte HDR sont respectivement affichés ci-dessous.

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