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 完全不透明。
範例
1cornerRadius?number圓角半徑,單位為點。
範例
0clipped?boolean是否裁切超出 View 邊界的內容。
範例
falseclip?"rectangle" | "ellipse"裁切形狀:rectangle 矩形或 ellipse 橢圓;Material 另可用 false 停用。
範例
"rectangle"mask?View | null透明度遮罩 View,置中顯示且不影響佈局;null 表示不使用遮罩。
範例
<Circle width="fill" height="fill" background="white"/>zIndex?number同層 View 的繪製順序,數值越大越靠前。
範例
0blur?number模糊半徑,單位為點;0 不模糊。
範例
4innerShadow?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 隱藏陰影。
範例
0shadowRadius?number外部陰影模糊半徑,單位為點。
範例
4shadowX?number外部陰影位移,單位為點:x 向右、y 向下。
範例
0shadowY?number外部陰影位移,單位為點:x 向右、y 向下。
範例
2animations?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省略時的行為
下表是經實作核對的省略行為;屬性範例不是預設值。固定效果應明確傳值,尺寸和主題色等依環境變動,不能視為常數。