Color / Gradient

Các phương pháp viết thường được sử dụng bao gồm tên màu, màu thập lục phân và đối tượng { r, g, b, a }. Các thành phần RGB và độ trong suốt sử dụng 0–1, clear có nghĩa là trong suốt. $env.foreground và $env.accent cung cấp các màu phổ biến thay đổi theo chủ đề.

HDR(color) thêm thẻ HDR vào chuỗi màu. Được tô rõ ràng bằng các màu bình thường vẫn còn SDR; ví dụ: color={$env.foreground} sẽ không được tự động sửa và có thể được viết thành color={HDR($env.foreground)} khi cần đánh dấu. Hành vi mặc định khi thuộc tính màu bị bỏ qua được hiển thị trong bảng bên dưới.

Khi không chỉ định màu vẽ, các màu mặc định sau sẽ được đánh dấu bằng HDR.

Nền container vẫn trong suốt. Hình ảnh, bản đồ và tài liệu hệ thống màu chính vẫn giữ lại màu sắc và cách hiển thị riêng. Các màu thông thường được chỉ định rõ ràng, thang màu chuyển màu và bảng biểu tượng không được chuyển đổi thành HDR nói chung và các màu cần nâng cao phải được đánh dấu riêng.

Cờ HDR không đảm bảo độ sáng thực tế. Tính năng nâng cao yêu cầu iOS 26 trở lên, màn hình được hỗ trợ, chế độ HUD và bật cải tiến HDR; kết quả thực tế cũng bị ảnh hưởng bởi môi trường hiển thị hiện tại. Chế độ công cụ thông thường, bản xem trước của trình chỉnh sửa và PNG đã xuất sử dụng phạm vi hiển thị bình thường và không thể sử dụng bản xem trước để đánh giá hiệu ứng nổi bật thực tế.

Ba dòng sau đây bỏ qua màu sắc, sử dụng rõ ràng màu bình thường và đánh dấu rõ ràng màu nổi bật. Nó có thể trông giống nhau trong bản xem trước, nhưng sự khác biệt nâng cao sẽ trở nên rõ ràng sau khi vào môi trường HUD hỗ trợ 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 thay đổi theo đường thẳng, RadialGradient trải ra từ tâm và AngularGradient thay đổi theo góc xung quanh tâm. Khi xây dựng, bạn có thể truyền mảng màu hoặc mảng màu bằng color và location. Sử dụng 0–1 cho vị trí mảng màu và tọa độ trung tâm, điểm cho bán kính hướng tâm và độ cho góc.

Độ dốc đã tạo có thể được chuyển tới background, stroke và các thuộc tính khác hỗ trợ Paint. Các thuộc tính chỉ chấp nhận Color vẫn cần sử dụng một màu. Các loại cụ thể có sẵn tùy thuộc vào định nghĩa thuộc tính.

Nền tuyến tính, nền xuyên tâm, nét góc và văn bản HDR lần lượt được hiển thị bên dưới.

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