Card
Cardウィジェットは、コンテンツを1つにまとめて収める、角丸と影（立体感）を持つ表面（surface）です。
リスト項目や情報ブロックのように、関連する要素を視覚的にグループ化するときに使います。
定義・役割
Cardウィジェットは、1つの子コンテンツを包む四角い表面を描きます。背景色・影の色・立体感（elevation）・外形・外側のマージンを設定でき、子を収めるコンテナとして動作します。
- カテゴリー: Layouts
- 子のデフォルトサイズ:
100 × 100 - 背景色を指定しない場合、表面は透明で描かれます。
機能
| 機能 | 説明 |
|---|---|
| コンテンツのグループ化 | 関連する要素を1つの表面上にまとめ、視覚的に区別します。 |
| 立体感の表現 | 立体感（elevation）と影の色（shadowColor）で、カードが背景の上に浮いているような深さを与えます。 |
| 外形の設定 | shapeで外側の枠線と角丸を指定します。 |
| 背景・マージン | 背景色（color）とカードの外側のマージン（margin）を調整します。 |
| はみ出しの処理 | clipBehaviorで、子がカードの境界をはみ出したときの切り取り方を決めます。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- Card項目をキャンバスにドラッグ&ドロップします。
- カードの中に表示するウィジェットを子として配置します。
- 右のプロパティパネルで背景色・立体感・外形・マージンなどを調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
color | カードの背景（表面）のカラー。未設定の場合は透明で描かれます。 | 未設定 | カラー |
shadowColor | カードの影のカラー | 未設定 | カラー |
elevation | 影の深さ（立体感） | 未設定 | 数値 |
shape | カードの外形（枠線・角） | 未設定 | 外形の値 |
borderOnForeground | 子コンテンツの上に枠線を描くかどうか | true | true / false |
margin | カードの外側のマージン | 未設定 | マージンの値 |
clipBehavior | 子がカードの境界をはみ出したときの切り取り方 | 未設定 | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
semanticContainer | アクセシビリティでカードを1つのセマンティックコンテナとして扱うかどうか | true | true / false |
注意・ヒント
ヒント
立体感はelevationとshadowColorで調整します。値が大きいほど影が広がり、カードがより浮いているように見えます。
注記
color（背景色）を指定しない場合、カードの表面は透明で描かれます。表面の色が必要な場合は背景色を設定してください。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Card Widget Controlドキュメントで確認できます。