Color / Gradient

일반적으로 사용되는 쓰기 방법에는 색상 이름, 16진수 색상 및 { r, g, b, a } 개체가 포함됩니다. RGB 구성 요소와 투명도는 0~1을 사용하며 clear은 투명함을 의미합니다. $env.foreground 및 $env.accent은 테마에 따라 전환되는 공통 색상을 제공합니다.

HDR(color)은 색상 문자열에 HDR 태그를 추가합니다. 명시적으로 채워진 일반 색상은 SDR로 유지됩니다. 예를 들어, color={$env.foreground}은 자동으로 향상되지 않으며 강조 표시가 필요할 때 color={HDR($env.foreground)}로 쓸 수 있습니다. 색상 속성이 생략된 경우의 기본 동작은 아래 표에 나와 있습니다.

그리기 색상이 지정되지 않은 경우 다음 기본 색상은 HDR으로 표시됩니다.

컨테이너 배경은 투명하게 유지됩니다. 기본 색상 이미지, 지도 및 시스템 재료는 고유한 색상과 표시를 유지합니다. 명시적으로 지정된 일반 색상, 그라데이션 색상 스케일, 기호 팔레트는 전체적으로 HDR로 변환되지 않으며 개선이 필요한 색상은 별도로 표시해야 합니다.

HDR 플래그는 실제 밝기를 보장하지 않습니다. 향상을 위해서는 iOS 26 이상, 지원되는 화면, HUD 모드 및 HDR 향상 기능이 필요합니다. 실제 결과는 현재 디스플레이 환경의 영향도 받습니다. 일반 기기 모드, 편집기 미리보기 및 내보낸 PNG는 일반 표시 범위를 사용하며 미리보기를 사용하여 실제 하이라이트 효과를 판단할 수 없습니다.

다음 세 줄은 색상을 생략하고 명시적으로 일반 색상을 사용하며 명시적으로 강조 색상을 표시합니다. 미리보기에서는 동일해 보일 수 있지만 HDR을 지원하는 HUD 환경에 들어가면 향상된 차이점이 분명해집니다.

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은 직선을 따라 변하고, RadialGradient은 중심에서 퍼져 나가며, AngularGradient은 중심을 중심으로 각지게 변합니다. 생성할 때 색상 배열 또는 color 및 location를 사용하여 색상 배열을 전달할 수 있습니다. 색상 패치 위치와 중심 좌표, 방사형 반경의 점, 각도의 각도에는 0-1을 사용합니다.

생성된 그라데이션은 background, stroke 및 Paint를 지원하는 기타 속성에 전달될 수 있습니다. Color만 허용하는 속성은 여전히 ​​단일 색상을 사용해야 합니다. 사용 가능한 특정 유형은 속성 정의에 따라 달라집니다.

선형 배경, 방사형 채우기, 각도 획 및 HDR 텍스트가 각각 아래에 표시됩니다.

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