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)} として書き込むことができます。 color 属性を省略した場合のデフォルトの動作を次の表に示します。

描画色が指定されていない場合、次のデフォルト色は HDR でマークされます。

コンテナの背景は透明のままです。原色の画像、マップ、システム マテリアルは、独自の色と表示を保持します。明示的に指定された通常の色、グラデーション カラー スケール、およびシンボル パレットは全体として HDR に変換されず、強調が必要な色は個別にマークする必要があります。

HDR フラグは実際の明るさを保証するものではありません。拡張には、iOS 26 以降、サポートされている画面、HUD モード、および HDR 拡張をオンにする必要があります。実際の結果は現在の表示環境にも影響されます。通常の機器モード、エディターのプレビュー、およびエクスポートされた PNG は通常の表示範囲を使用し、プレビューを使用して実際のハイライト効果を判断することはできません。

次の 3 行では、色を省略し、通常の色を明示的に使用し、ハイライト色を明示的にマークしています。プレビューでは同じように見えますが、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>
  );
}