Modifier Order

Modifier Order

The Modifier Chain and Order of Operations

A modifier chain applies from the outside in: each modifier wraps everything after it. In CSS the order of padding and background does not matter; in Compose 234 the order is the layout:

ui/LayoutDemos.kt: four chains that differ only in orderKotlin

@Composable
fun ModifierOrder() {
  val tag = Modifier.border(1.dp, Color.Gray)
  Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("padding, then background", tag.padding(16.dp).background(Color(0xFFFFE0B2)))
    Text("background, then padding", tag.background(Color(0xFFFFE0B2)).padding(16.dp))
    Text("clickable, then padding", tag.clickable { Log.d("BookNestUi", "outer") }
      .padding(16.dp))
    Text("size(120.dp).padding(24.dp)", tag.size(120.dp).padding(24.dp)
      .background(Color(0xFFBBDEFB)))
  }
}

In the first line the padding sits outside the orange background; in the second the background fills it. clickable before padding makes the whole box the touch target; after it, only the text would respond. The last box is 120 dp square, and its 24 dp padding leaves 72 dp for the blue background, so the text wraps and is cut off (left half of the figure in Alignment and Weight).

MENU