Color / Gradient

Zu den häufig verwendeten Schreibmethoden gehören Farbnamen, Hexadezimalfarben und { r, g, b, a }-Objekte. RGB-Komponenten und Transparenz verwenden 0–1, clear bedeutet transparent. $env.foreground und $env.accent bieten gemeinsame Farben, die mit dem Thema wechseln.

HDR(color) fügt der Farbzeichenfolge das Tag HDR hinzu. Explizit ausgefüllte normale Farben bleiben SDR; Beispielsweise wird color={$env.foreground} nicht automatisch erweitert und kann als color={HDR($env.foreground)} geschrieben werden, wenn eine Hervorhebung erforderlich ist. Das Standardverhalten, wenn das Farbattribut weggelassen wird, ist in der folgenden Tabelle dargestellt.

Wenn keine Zeichenfarbe angegeben ist, werden die folgenden Standardfarben mit HDR gekennzeichnet.

Der Containerhintergrund bleibt transparent. Primärfarbbilder, Karten und Systemmaterialien behalten ihre eigenen Farben und Darstellungen. Explizit angegebene Normalfarben, Farbverlaufsskalen und Symbolpaletten werden nicht als Ganzes in HDR konvertiert, und Farben, die verbessert werden müssen, sollten separat markiert werden.

Das Flag HDR garantiert keine tatsächliche Helligkeit. Für die Erweiterung sind iOS 26 oder höher, unterstützte Bildschirme, der HUD-Modus und die Aktivierung der HDR-Erweiterung erforderlich. Die tatsächlichen Ergebnisse werden auch von der aktuellen Anzeigeumgebung beeinflusst. Der normale Instrumentenmodus, die Editor-Vorschau und exportiertes PNG verwenden den normalen Anzeigebereich und die Vorschau kann nicht zur Beurteilung des tatsächlichen Hervorhebungseffekts verwendet werden.

Die folgenden drei Zeilen lassen die Farbe weg, verwenden explizit die normale Farbe und markieren explizit die Hervorhebungsfarbe. In der Vorschau sieht es möglicherweise gleich aus, der Verbesserungsunterschied wird jedoch deutlich, wenn Sie in eine HUD-Umgebung wechseln, die HDR unterstützt.

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 ändert sich entlang einer geraden Linie, RadialGradient breitet sich vom Zentrum aus und AngularGradient ändert sich im Winkel um das Zentrum. Beim Erstellen können Sie ein Farbarray oder ein Farbarray mit color und location übergeben. Verwenden Sie 0–1 für die Farbfeldposition und die Mittelpunktskoordinaten, Punkte für den radialen Radius und Grad für Winkel.

Der erstellte Farbverlauf kann an background, stroke und andere Attribute übergeben werden, die Paint unterstützen. Attribute, die nur Color akzeptieren, müssen weiterhin eine einzelne Farbe verwenden. Die spezifischen verfügbaren Typen unterliegen der Attributdefinition.

Unten werden jeweils linearer Hintergrund, radiale Füllung, eckiger Strich und HDR-Text angezeigt.

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