CapDriveGroup
여러 개의 View을 전체로 결합하여 투명도, 회전 또는 기타 특수 효과를 균일하게 적용합니다. 하위 View은 외부 컨테이너의 배열 규칙을 따르며, 합성 결과 전체 집합에 특수 효과가 적용됩니다.
예제
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
사용법
- Group은 배치 규칙을 만들지 않아 자식이 바깥 레이아웃에 참여합니다. 합성 후 전체에 투명도와 효과를 적용하므로 자식별 opacity와 겹침 결과가 다릅니다. 크기와 안쪽 여백에는 외부 Stack을 사용하세요.
- 배열 key는 안정적인 데이터 ID를 사용해 업데이트와 애니메이션의 View를 유지하세요. 순서가 바뀌는 배열에서는 인덱스를 영구 ID로 쓰지 마세요.
- 공간 배치 후 x/y와 transform을 적용합니다. 자식을 옮겨도 형제는 밀리지 않습니다. 간격은 spacing 또는 Spacer, 완성된 View의 회전·확대는 transform을 사용하세요.
속성
children?ViewContent자식 그리기 콘텐츠.
공통 속성
transform?ViewTransform레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.
{rotation: 0}background?Paint배경 색상 또는 그라디언트입니다. clear는 투명입니다.
"clear"opacity?number전체 View 불투명도: 0은 투명, 1은 불투명입니다.
1cornerRadius?number모서리 반경(포인트)입니다.
0clipped?booleanView 경계를 벗어난 내용을 자릅니다.
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생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.