CapDrive
使用指南

Image

显示仪表资源中的图片，例如标志、装饰背景或平铺纹理。source 使用资源名称，按可用尺寸设置缩放、裁切或重复方式。

示例

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

用法说明

  • source 指向仪表打包资源中的图片。original 保留原色，此时 color 不负责染色；template 才使用 color。repeatMode 平铺图片，不是把 children 重复排列；普通缩放用 contentMode。
  • 数字尺寸使用屏幕点；auto 根据内容测量，fill 使用父布局分配的空间。先给容器明确尺寸，再调整子 View。fill 不会创建额外空间，长文本也不会自动撑开固定尺寸的父级。

属性

sourcestring

仪表资源中图片的文件名，不是 SF Symbols 名称。

示例""
contentMode?"fit" | "fill" | "stretch"

fit 完整显示图片；fill 铺满区域并裁剪；stretch 拉伸，可能改变宽高比。

示例"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

按图片原始尺寸平铺：repeat 双向，repeatX/repeatY 单向，none 不平铺。

示例"none"
renderingMode?"original" | "template"

original 保留图片原色；template 使用 color 属性着色。

示例"original"
color?Paint

绘图颜色，支持 HDR 颜色。

示例HDR($env.foreground)
contentAnimation?ContentAnimation

内容变化时的过渡效果；选择该 View 支持的 type，duration/delay 单位为秒。

示例{type: "fade", duration: 0.25}
通用属性
width?number | "auto" | "fill"

宽度：点数、自动测量或填满父区域。

示例100
height?number | "auto" | "fill"

高度：点数、自动测量或填满父区域。

示例80
padding?number

内容内边距，单位为点。

示例0
x?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0
y?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0
transform?ViewTransform

对整个 View 做视觉变换，不改变布局。平移用点，旋转和倾斜用角度，缩放 1 保持原大小，锚点用 0–1。

示例{rotation: 0}
background?Paint

背景填充，可使用颜色或渐变；clear 表示透明。

示例"clear"
opacity?number

整个 View 的不透明度：0 完全透明，1 完全不透明。

示例1
cornerRadius?number

圆角半径，单位为点。

示例0
clipped?boolean

是否裁剪超出 View 边界的绘制内容。

示例false
clip?"rectangle" | "ellipse"

裁剪形状：rectangle 矩形或 ellipse 椭圆。Material 还可用 false 关闭裁剪。

示例"rectangle"
mask?View | null

透明度遮罩 View，居中显示且不影响布局；null 表示不使用遮罩。

示例<Circle width="fill" height="fill" background="white"/>
zIndex?number

同级 View 的绘制顺序，数值越大越靠前。

示例0
blur?number

模糊半径，单位为点；0 表示不模糊。

示例4
innerShadow?DrawingEffect

特效的颜色、不透明度、模糊半径和 x/y 偏移；距离单位为点。

示例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

特效的颜色、不透明度、模糊半径和 x/y 偏移；距离单位为点。

示例{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

外部阴影的颜色。

示例HDR("black")
shadowOpacity?number

外部阴影的不透明度，范围 0–1；0 隐藏阴影。

示例0
shadowRadius?number

外部阴影的模糊半径，单位为点。

示例4
shadowX?number

外部阴影偏移，单位为点：x 向右，y 向下。

示例0
shadowY?number

外部阴影偏移，单位为点：x 向右，y 向下。

示例2
animations?Animation[]

支持的属性变化时执行动画。duration/delay 单位为秒；from/to 指定端点；repeat 和 autoreverse 控制重复，wrap 指定周期。

示例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

兄弟节点中的稳定标识。

组合示例

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

动画

动画

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

省略时的行为

下表只列经实现核对的省略行为；属性旁的示例是可复制写法，不是默认值。需要固定效果时显式传值，尺寸、主题颜色等随上下文变化的属性不要当作固定常量。

属性省略时的行为
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

上一个

Group

下一步

本页内容

示例用法说明属性组合示例动画省略时的行为相关 API