Color / Gradient

Los métodos de escritura más utilizados incluyen nombres de colores, colores hexadecimales y objetos { r, g, b, a }. Los componentes RGB y la transparencia utilizan 0–1, clear significa transparente. $env.foreground y $env.accent proporcionan colores comunes que cambian según el tema.

HDR(color) agrega la etiqueta HDR a la cadena de color. Los colores normales rellenados explícitamente siguen siendo SDR; por ejemplo, color={$env.foreground} no se mejorará automáticamente y se puede escribir como color={HDR($env.foreground)} cuando sea necesario resaltarlo. El comportamiento predeterminado cuando se omite el atributo de color se muestra en la siguiente tabla.

Cuando no se especifica ningún color de dibujo, los siguientes colores predeterminados se marcan con HDR.

El fondo del contenedor permanece transparente. Las imágenes, mapas y materiales del sistema en colores primarios conservan sus propios colores y visualización. Los colores normales, las escalas de color de degradado y las paletas de símbolos especificados explícitamente no se convierten a HDR en su totalidad, y los colores que requieren mejora deben marcarse por separado.

La bandera HDR no garantiza el brillo real. La mejora requiere iOS 26 o posterior, pantallas compatibles, modo HUD y activación de la mejora HDR; Los resultados reales también se ven afectados por el entorno de visualización actual. El modo de instrumento normal, la vista previa del editor y el PNG exportado utilizan el rango de visualización normal y la vista previa no se puede utilizar para juzgar el efecto de resaltado real.

Las tres líneas siguientes omiten el color, utilizan explícitamente el color normal y marcan explícitamente el color de resaltado. Puede verse igual en la vista previa, pero la diferencia de mejora se hace evidente después de ingresar a un entorno HUD que admita 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 a lo largo de una línea recta, RadialGradient se extiende desde el centro y AngularGradient cambia angularmente alrededor del centro. Al construir, puede pasar una matriz de colores o una matriz de colores con color y location. Utilice 0–1 para la ubicación del parche de color y las coordenadas centrales, puntos para el radio radial y grados para los ángulos.

El gradiente creado se puede pasar a background, stroke y otros atributos que admitan Paint. Los atributos que solo aceptan Color aún deben usar un solo color. Los tipos específicos disponibles están sujetos a la definición del atributo.

El fondo lineal, el relleno radial, el trazo angular y el texto HDR se muestran a continuación, 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>
  );
}