Stack
Stackウィジェットは、子ウィジェットを同じ位置に重ねて積み上げるレイアウトコンテナです。
背景の上に別の要素を重ねる場合や、特定の位置に要素を絶対配置する場合に使用します。
定義・役割
Stackウィジェットは、複数の子ウィジェットをz軸(前後)方向に重ねて配置します。位置を指定していない子はalignment基準で重ねて整列され、個々の子に絶対位置(上・左・右・下)を指定すると、その位置に固定されます。
- カテゴリー: Layouts
- パレットからドラッグ&ドロップすると、デフォルトで200×200サイズの領域として作成されます。
機能
| 機能 | 説明 |
|---|---|
| 子の重ね合わせ | 複数の子ウィジェットを同じ領域にz軸順で重ねて積み上げます。 |
| 絶対位置の配置 | 個々の子に上・左・右・下の値を指定して、任意の位置に固定します。 |
| 整列基準 | 位置を指定していない子をalignment基準で整列します。 |
| サイズの合わせ方 | fitで、位置を指定していない子がStackのサイズに合わせられる方法を設定します。 |
| はみ出しの処理 | clipBehaviorで、Stack領域を超えた子の切り取り方を設定します。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- Stack項目をキャンバスにドラッグ&ドロップします。
- Stack内に重ねて配置する子ウィジェットをドラッグ&ドロップします。
- 子を選択して絶対位置(上・左・右・下)を指定するか、
alignmentで整列基準を設定します。 - 必要に応じて
fit・clipBehaviorの値を調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
alignment | 位置を指定していない子(および一部のみ指定された子)の整列基準 | 左上(topStart) | アライメント値 |
textDirection | 整列・位置の計算に使用するテキスト方向 | 未設定 | rtl, ltr |
fit | 位置を指定していない子がStackのサイズに合わせられる方法 | loose | loose, expand, passthrough |
clipBehavior | Stack領域を超えた子の切り取り方 | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
注意・ヒント
ヒント
子に位置を指定しない場合は、alignment基準で重ねて配置されます。特定の子だけを任意の場所に置きたい場合は、その子に絶対位置(上・左・右・下)を指定します。
警告
fitをexpandにすると、位置を指定していない子がStack全体のサイズまで広がります。子が意図より大きく見える場合は、fitの値を確認してください。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、Stack Widget Controlドキュメントで確認してください。