--------------------------------------------------------
・Scaffoldが保持するプロパティであり、
topbar, bottombarがあるときに 効果があるらしい。
--------------------------------------------------------
androidプロジェクトにおいて、UIをcomposeで組む場合、
setContentに以下のようなViewを指定するとき、
MyAppNameTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
のうちの innerPadding ->
は子要素に対して paddingの値を伝達しているのだと思いますが、
この innerPaddingは Scaffoldが保持するプロパティなのでしょうか？
↓
はい、`innerPadding` は `Scaffold` が提供するプロパティです。
この `innerPadding` は `Scaffold` における
**コンテンツ領域のパディング** を示しており、
通常は `Scaffold` のトップバー（`topBar`）、ボトムバー（`bottomBar`）、
またはドロワー（`drawerContent`）などのコンポーネントによって
占有された領域を避けるために使用されます。
具体的には、`Scaffold` のスロットで定義されたレイアウト要素
（例えば、`topBar` や `bottomBar`）がある場合、
それらの分だけコンテンツ領域が縮小されます。
この縮小された領域のパディング情報が `innerPadding` として渡され、
子要素（今回の場合は `Greeting` コンポーザブル）に適用できます。
### Scaffoldの`innerPadding`の仕組み
- **`innerPadding` の型**:
`PaddingValues`（`Modifier.padding()` でそのまま利用可能）
- **生成元**:
`Scaffold` の内部で計算される `contentPadding` というプロパティに基づいています。
- **主な目的**:
- 子要素が `Scaffold` によって割り当てられた領域を避けて描画されるようにする。
- コンテンツが重ならないようにする（例えば、ツールバーやナビゲーションバーを避ける）。
### 実際のコード例
以下のように `topBar` と `bottomBar` を定義すると、
`innerPadding` にそれらの高さに基づいたパディングが含まれます。
```kotlin
Scaffold(
modifier = Modifier.fillMaxSize(),
topBar = {
TopAppBar(
title = { Text("My App") }
)
},
bottomBar = {
BottomAppBar {
Text("Bottom Bar")
}
}
) { innerPadding ->
// innerPadding に TopAppBar と BottomAppBar の高さ分のパディングが含まれる
Box(
modifier = Modifier
.padding(innerPadding) // 必要に応じて適用
.fillMaxSize()
) {
Greeting(name = "Android")
}
}
```
### `PaddingValues`の仕組み
`innerPadding` の型である `PaddingValues` は、以下のようなデータを保持します：
- `start`: 開始部分のパディング
- `top`: 上部のパディング
- `end`: 終了部分のパディング
- `bottom`: 下部のパディング
例えば、`innerPadding.calculateTopPadding()` を呼び出すことで、
上方向のパディング値を個別に取得することが可能です。
---
もしさらに内部の詳細やカスタマイズ方法について知りたければ
教えてください！ 😊
コメント
コメントを投稿