Color / Gradient

Metode penulisan yang umum digunakan meliputi nama warna, warna heksadesimal, dan objek { r, g, b, a }. Komponen RGB dan transparansi menggunakan 0–1, clear artinya transparan. $env.foreground dan $env.accent memberikan warna umum yang sesuai dengan tema.

HDR(color) menambahkan tag HDR ke string warna. Diisi secara eksplisit dalam warna normal tetap SDR; misalnya, color={$env.foreground} tidak akan ditingkatkan secara otomatis dan dapat ditulis sebagai color={HDR($env.foreground)} ketika penyorotan diperlukan. Perilaku default ketika atribut warna dihilangkan ditunjukkan pada tabel di bawah.

Jika tidak ada warna gambar yang ditentukan, warna default berikut ditandai dengan HDR.

Latar belakang penampung tetap transparan. Gambar berwarna primer, peta, dan materi sistem mempertahankan warna dan tampilannya sendiri. Warna normal yang ditentukan secara eksplisit, skala warna gradien, dan palet simbol tidak dikonversi ke HDR secara keseluruhan, dan warna yang memerlukan peningkatan harus ditandai secara terpisah.

Bendera HDR tidak menjamin kecerahan sebenarnya. Peningkatan memerlukan iOS 26 atau lebih baru, layar yang didukung, mode HUD, dan pengaktifan peningkatan HDR; hasil sebenarnya juga dipengaruhi oleh lingkungan tampilan saat ini. Mode instrumen normal, pratinjau editor, dan PNG yang diekspor menggunakan rentang tampilan normal, dan pratinjau tidak dapat digunakan untuk menilai efek sorotan sebenarnya.

Tiga baris berikut menghilangkan warna, secara eksplisit menggunakan warna normal, dan secara eksplisit menandai warna highlight. Ini mungkin terlihat sama di pratinjau, namun perbedaan peningkatan menjadi jelas setelah memasuki lingkungan HUD yang mendukung 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 berubah sepanjang garis lurus, RadialGradient menyebar dari pusat, dan AngularGradient berubah secara bersudut di sekitar pusat. Saat membuat, Anda dapat meneruskan larik warna atau larik warna dengan color dan location. Gunakan 0–1 untuk lokasi patch warna dan koordinat pusat, titik untuk radius radial, dan derajat untuk sudut.

Gradien yang dibuat dapat diteruskan ke background, stroke dan atribut lain yang mendukung Paint. Atribut yang hanya menerima Color tetap perlu menggunakan satu warna. Tipe spesifik yang tersedia tunduk pada definisi atribut.

Latar belakang linier, isian radial, guratan sudut, dan teks HDR masing-masing ditampilkan di bawah.

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