Group

將多個 View 合成為一個整體,統一應用透明度、旋轉或其他特效。子 View 沿用外層容器的排列規則,特效作用於合成後的整組結果。

範例

function main() {
  return (
    <Group transform={{ rotation: 12 }} opacity={0.8}>
      <Text>12</Text>
      <Symbol name="bolt.fill" />
    </Group>
  );
}

使用說明

  • Group 不建立排列規則,子 View 仍參與外層版面。先合成整組再套用透明度和特效,重疊處與逐個設定 opacity 不同。需要尺寸或內邊距時外包 Stack。
  • 陣列 key 應使用穩定的資料識別碼,讓更新和動畫對應同一個 View。內容會重排時,不要用陣列索引當永久識別碼。
  • 先計算版面佔位,再套用 x/y 和 transform。右移子 View 不會推開兄弟;改間隔用 spacing 或 Spacer。旋轉、縮放作用於完整繪製結果。

屬性

children?ViewContent

子檢視內容。

通用屬性
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}

特效的顏色、不透明度、模糊半徑及 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}>
      <Group opacity={0.6} transform={{ rotation: 10 }}>
        <Text fontSize={40}>78</Text>
        <Symbol name="speedometer" fontSize={28} />
      </Group>
      <Text>km/h</Text>
    </HStack>
  );
}

動畫

動畫

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

省略時的行為

下表是經實作核對的省略行為;屬性範例不是預設值。固定效果應明確傳值,尺寸和主題色等依環境變動,不能視為常數。

屬性省略時的行為
opacity1
zIndex0