Group
将多个 View 合成为一个整体,统一应用透明度、旋转或其他特效。子 View 沿用外层容器的排列规则,特效作用于合成后的整组结果。
示例
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
用法说明
- Group 不创建独立排列规则,子 View 仍参与外层容器的布局。它把多个子 View 合成一个整体来应用透明度、旋转和特效,因此重叠处的透明度与分别设置 opacity 不同。需要背景尺寸或内边距时,外包一个 Stack。
- 数组中的 key 应来自稳定的数据标识。保持 key 才能让更新和动画对应同一个 View;数据会重排时,不要把数组索引当作永久标识。
- 布局先决定占位,再应用 x/y 和 transform。把一个子 View 右移 20 点,不会把后面的兄弟推开;要改变间隔用 spacing 或 Spacer。旋转、缩放会作用于已经绘制好的整个 View。
属性
children?ViewContent子视图内容。
通用属性
transform?ViewTransform对整个 View 做视觉变换,不改变布局。平移用点,旋转和倾斜用角度,缩放 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省略时的行为
下表只列经实现核对的省略行为;属性旁的示例是可复制写法,不是默认值。需要固定效果时显式传值,尺寸、主题颜色等随上下文变化的属性不要当作固定常量。