Color / Gradient

为文字、背景和描边提供颜色与渐变。Paint 可以是颜色,也可以是由渐变构造函数创建的值。

颜色

常用写法包括颜色名称、十六进制颜色,以及 { 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($env.foreground);符号使用调色板模式且已指定调色板时保留调色板颜色。
矩形、圆、椭圆、柱状图的填充 HDR($env.dark ? 'white' : 'black')。
线条、圆弧、折线、路径、折线图的描边 HDR($env.dark ? 'white' : 'black')。
图表坐标轴与标签 默认使用 HDR 前景色。显式设置图表填充或描边不会改变标签的默认颜色。
已启用的发光、内阴影、投影 效果省略颜色时,发光默认 HDR 白色,内阴影与投影默认 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,径向半径使用点,角度使用度。

创建的渐变可传给支持 Paint 的 background、stroke 等属性。只接受 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>
  );
}

构造函数

HDR(color: string) → HDRColor

标记需要 HDR 增强的颜色,保留原始 SDR 颜色。

LinearGradient(colors: GradientColors, options?: LinearGradientOptions) → Gradient

创建渐变画笔,可直接调用或使用 new。

RadialGradient(colors: GradientColors, options?: RadialGradientOptions) → Gradient

创建渐变画笔,可直接调用或使用 new。

AngularGradient(colors: GradientColors, options?: AngularGradientOptions) → Gradient

创建渐变画笔,可直接调用或使用 new。