CapDriveGroup
複数の View を 1 つに結合し、透明度、回転、その他の特殊効果を均一に適用します。子 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、完成した描画の回転・拡大には transform を使います。
プロパティ
children?ViewContent子の描画コンテンツ。
共通プロパティ
transform?ViewTransformレイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 1 は等倍、基点は 0–1。
例
{rotation: 0}background?Paint背景の色またはグラデーション。clear は透明。
例
"clear"opacity?numberView 全体の不透明度。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省略時の動作
表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。