How on earth do you reason about order of Jetpack Compose modifiers?

Question

I get that Jetpack Compose operates from the outside in for modifiers, but what about this one?

What I asked for:

8 dp padding
then 2 dp border
then background colour for component
then 16 dp padding

@Composable
fun App() {
    MaterialTheme(colors = darkColors()) {
        Surface(
            modifier = Modifier
                .background(MaterialTheme.colors.background)
                .fillMaxSize()
                .padding(8.dp)
        ) {
            Column {
                Card(
                    modifier = Modifier
                        .requiredSize(DpSize(300.dp, 200.dp))
                        .border(BorderStroke(2.dp, Color.White), RoundedCornerShape(8.dp))
                        .background(MaterialTheme.colors.surface)
                        .padding(16.dp)
                ) {
                    // Content still to come
                }
            }
        }
    }
}

What I got:

8 dp padding
then 2 dp border
--then 16 dp padding--
--then background colour for component--

How do I reason about the background colour not extending to the border here? I defined it immediately after.

Addendum:

By the way, swap border and background - same result:

I do realise that using the other parameters to `Card` produces better results in this case, but what I really want here is some way to understand why it's being quirky. — Hakanai, Aug 08 '22 at 06:35

score 0 · Answer 1 · answered Mar 13 '23 at 02:05

0

Modifier order has always been confusing, but they have a rule: they will append each other since a modifier extension returns a modifer.then. The closest and probably the best incongruity and analogy:

properties are not applied to a view collectively, forget css and xml styling
properties are sequenced, like factory workers on a production line, if padding is first, the next border call will be inside the padding. If border is first, padding will be inside the border

So be careful of positional modifiers.

answered Mar 13 '23 at 02:05

Blessing Charumbira

422
4
8

Right, but my question shows a case where I swapped the modifiers and things still came out the same way. So it's more like, modifiers are applied from the outside-in _unless some other conditions are met, in which case it does something else_ – Hakanai Mar 17 '23 at 08:40
Well, quirky is the way it will always be, after writing dozens of UI (for desktop as well) I feel like they cheated by forking off of androidx components without thoroughly explaining the onDraw call system – Blessing Charumbira Mar 20 '23 at 17:11

How on earth do you reason about order of Jetpack Compose modifiers?

1 Answers1