CapDriveSpacer
スタック内の残りのスペースを割り当てて、コンテンツを両側にプッシュするか、コンテンツ用の弾性距離を確保します。 minLength は最小長を設定し、明示的な width または height は対応する方向のサイズを固定できます。
例
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
使い方
- Spacer 自体は描画しません。HStack では横、VStack では縦の残り空間を使い、minLength が下限です。width/height で軸を固定でき、背景や透明度、描画効果は持ちません。
- 数値の寸法はポイントです。auto は内容を測り、fill は親が割り当てた空間を使います。先に親の寸法を決めてください。fill や長い文字列は固定サイズの親を拡張しません。
プロパティ
minLength?number親 Stack の主軸に確保する最小の可変スペース（ポイント）。
例
0共通プロパティ
width?number | "auto" | "fill"幅。ポイント指定、自動サイズ、親領域への拡張に対応します。
例
"auto"height?number | "auto" | "fill"高さ。ポイント指定、自動サイズ、親領域への拡張に対応します。
例
"auto"animations?SpacerAnimation[]プロパティ変更のアニメーション。duration/delay は秒、from/to は端点、repeat/autoreverse は反復、wrap は周期。
例
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | number兄弟要素間で安定した識別子。
例
""組み合わせ例
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
アニメーション
widthheightminLength省略時の動作
表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。
| プロパティ | 省略時の動作 |
|---|---|
minLength | 0 |