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。