Jetpack Compose 1.2.0 では Scaffold の content に PaddingValues を必ず設定する

Jetpack Compose 1.2.0 (正確には Jetpack Compose 1.2.0-alpha07 以後) から Scaffold の content で Scaffold から渡される PaddingValues を使わないと Lint エラーとなります。

developer.android.com

Lint で指摘される例

次の例は Lint のエラーとなります。Scaffold の content は content: @Composable (PaddingValues) -> Unit と定義してあり、Scaffold 側から PaddingValues を渡すように設計してあります。 この PaddingValues は Jetpack Compose 1.1.x までは使わなくても特に Lint に怒られることはありませんでしたが、Scaffold が content を呼び出す前に内部で PaddingValues を計算しているため、 使わないとレイアウトが崩れる原因となる場合がありました。特に PaddingValues の計算には bottomBar の高さが計算に入っているようです。 このため、Jetpack Compose 1.2.0 からは Lint のエラーが出るようになりました。

@Composable
fun SampleScreen {
  Scaffold(
    scaffoldState = rememberScaffoldState(),
    topBar = { /* compose TopAppBar... */ },
  ) {

    // このラムダに渡される PaddingValues を無視して画面を構成するとエラーになる

    ConstraintLayout {
      /* compose screen... */
    }
  }
}

正しい記述

Scaffold の content で使う最もトップレベルの Composable に PaddingValues を設定します。

@Composable
fun SampleScreen {
  Scaffold(
    scaffoldState = rememberScaffoldState(),
    topBar = { /* compose TopAppBar... */ },
  ) { innerPadding ->

    // Scaffold 直下の Composable に innerPadding を設定する

    ConstraintLayout(
      modifier = Modifier.padding(innerPadding),
    ) {
      /* compose screen... */
    }
  }
}