Jetpack Compose: Modifier#then

Modifier#then(Modifier)

概要

引数に与えられたModifierを後ろへ連結した、新たなModifierを返すメソッド。

val modifierA = Modifier.padding(4.dp)
val modifierB = Modifier.background(color = Color.Red)

val modifierX = modifierA.then(modifierB)

val modifierY = Modifier
  .padding(4.dp)
  .background(color = Color.Red)
  
// 上の時、modifierX と modifierY には同等の操作が施されている

主にModifier.paddingなどModifierのAPIの実装に使われている程度ではあるが、Modifierの連結する順序を入れ替えられることから、常用で一部使える場合もある。

実用例

例として、縦にスクロール可能なColumnをComposableとして切り出すケースを考える。

@Composable
fun ScrollableColumn(
  modifier: Modifier = Modifier,
  scrollState: ScrollState = rememberScrollState(),
  content: @Composable ColumnScope.() -> Unit,
) {
  Column(
    modifier = Modifier
      .verticalScroll(scrollState)
      .then(modifier), // <- 連結順序を入れ替える
    content = content,
  )
}

@Preview
@Composable
fun Preview() {
  ScrollableColumn(
    modifier = Modifier
      .padding(32.dp)
      .background(color = Color.Red)
  ) {
    repeat(2048) {
      Text(
        text = "$it",
        fontSize = 32.sp,
      )
    }
  }
}

上のようにthenを使わず、modifier.verticalScroll(scrollState)のように実装すると、verticalScroll化が修飾の前に起こるので挙動が変化する。こういった、与えられたmodifierの適用を後で行いたいケースにおいてModifier#thenは有効に働く。

thenを使わずmodifierの後ろにチェーンしている	thenを使い連結順序を入れ替えている