CapDrive
使用指南

Image

顯示儀表資源中的圖片，例如標誌、裝飾背景或平鋪紋理。source 使用資源名稱，按可用尺寸設定縮放、裁切或重複方式。

範例

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

使用說明

  • source 是儀表資源圖片名稱。original 保留原色，template 才以 color 著色。repeatMode 平鋪圖片，不是重複子 View；一般縮放使用 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

整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 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