SafeArea
SafeAreaウィジェットは、子ウィジェットをノッチ・ステータスバー・ホームインジケーターなどのシステムUIの領域を避けて、画面の安全な領域内に配置するレイアウトウィジェットです。
デバイスごとに異なる画面外縁の侵入領域を自動的に避け、主要なコンテンツが隠れないようにします。
定義・役割
SafeAreaウィジェットは、子をメディアの安全余白（ステータスバー・ノッチ・ホームインジケーターなど）の分だけ内側に寄せて配置します。上・下・左・右の方向ごとに適用の有無をオフにでき、安全領域がない場合に適用する最小余白を指定できます。
- カテゴリー: Layouts
- デフォルトの適用方向: 上・下・左・右すべてオン
- デフォルトの最小余白:
0
機能
| 機能 | 説明 |
|---|---|
| 安全領域への配置 | 子をノッチ・ステータスバー・ホームインジケーターなどのシステムUIを避けた領域に配置します。 |
| 方向ごとの適用 | 上・下・左・右それぞれの方向で余白の適用をオン/オフします。 |
| 最小余白 | システムの安全領域がない場合に適用する最小余白（minimum）を指定します。 |
| 下部パディングの維持 | キーボードなどで下部のビューパディングが変わっても、下部の余白を維持するかどうかを設定します。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- SafeArea項目をキャンバスにドラッグ＆ドロップします。
- 安全領域内に配置したいウィジェットをSafeAreaの中に入れます。
- 必要に応じて方向ごとの適用有無（
top・bottom・left・right）と最小余白（minimum）を調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
left | 左の安全領域の分だけ内側の余白を適用するかどうか | オン（true） | 真/偽 |
top | 上（ステータスバー・ノッチ）の安全領域の分だけ内側の余白を適用するかどうか | オン（true） | 真/偽 |
right | 右の安全領域の分だけ内側の余白を適用するかどうか | オン（true） | 真/偽 |
bottom | 下（ホームインジケーターなど）の安全領域の分だけ内側の余白を適用するかどうか | オン（true） | 真/偽 |
minimum | システムの安全領域がない場合に適用する内側の最小余白 | 0 | 余白の値 |
maintainBottomViewPadding | キーボードなどで下部のビューパディングが消費されても下部の余白を維持するかどうか | オン（true） | 真/偽 |
注意・ヒント
ヒント
top・bottom・left・rightで方向ごとに安全領域の適用をオフにできます。たとえば上だけ適用するには、残りの方向をオフにします。
警告
minimumは、システムの安全領域がより小さいときだけ最小値として適用されます。安全領域がより大きい場合は、その値が優先されます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、SafeArea Widget Controlドキュメントで確認してください。