Color / Gradient

Yaygın olarak kullanılan yazma yöntemleri arasında renk adları, onaltılık renkler ve { r, g, b, a } nesneleri bulunur. RGB bileşenleri ve şeffaflık 0-1'i kullanır, clear şeffaf anlamına gelir. $env.foreground ve $env.accent temaya göre değişen ortak renkler sağlar.

HDR(color) renk dizisine HDR etiketini ekler. Açıkça doldurulmuş normal renklerde SDR kalır; örneğin, color={$env.foreground} otomatik olarak geliştirilmez ve vurgulama gerektiğinde color={HDR($env.foreground)} olarak yazılabilir. Renk özelliği atlandığında varsayılan davranış aşağıdaki tabloda gösterilmektedir.

Çizim rengi belirtilmediğinde aşağıdaki varsayılan renkler HDR ile işaretlenir.

Kapsayıcı arka planı şeffaf kalır. Birincil renkli görüntüler, haritalar ve sistem malzemeleri kendi renklerini ve görünümlerini korur. Açıkça belirtilen normal renkler, degrade renk skalaları ve sembol paletleri bir bütün olarak HDR'ye dönüştürülmez, geliştirilmesi gereken renkler ayrı ayrı işaretlenmelidir.

HDR bayrağı gerçek parlaklığı garanti etmez. Geliştirme, iOS 26 veya üzerini, desteklenen ekranları, HUD modunu ve HDR geliştirmesinin açılmasını gerektirir; gerçek sonuçlar aynı zamanda mevcut görüntüleme ortamından da etkilenir. Normal alet modu, düzenleyici önizlemesi ve dışa aktarılan PNG, normal görüntüleme aralığını kullanır ve önizleme, gerçek vurgulama efektini değerlendirmek için kullanılamaz.

Aşağıdaki üç satırda renk atlanır, açıkça normal renk kullanılır ve vurgu rengi açıkça işaretlenir. Önizlemede aynı görünebilir ancak geliştirme farkı, HDR'yi destekleyen bir HUD ortamına girdikten sonra belirgin hale gelir.

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 düz bir çizgi boyunca değişir, RadialGradient merkezden yayılır ve AngularGradient merkezin etrafında açısal olarak değişir. Oluştururken, bir renk dizisini veya color ve location ile bir renk dizisini iletebilirsiniz. Renk yaması konumu ve merkez koordinatları için 0-1'i, radyal yarıçap için noktaları ve açılar için dereceleri kullanın.

Oluşturulan degrade background, stroke ve Paint'yi destekleyen diğer niteliklere aktarılabilir. Yalnızca Color kabul eden özniteliklerin yine de tek renk kullanması gerekir. Mevcut belirli türler, nitelik tanımına tabidir.

Aşağıda sırasıyla doğrusal arka plan, radyal dolgu, açısal kontur ve HDR metni gösterilmektedir.

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