5

if code like this:

Text(
    "Text with background",
    Modifier.drawBackground(Color.Magenta, RectangleShape).padding(10.dp)
)

first drawBackground second do padding

Text(
    "Text with background",
    Modifier.padding(10.dp).drawBackground(Color.Magenta, RectangleShape)
)

first do padding second drawBackground

jetpack compose config

composeOptions {
    kotlinCompilerVersion "1.3.70-dev-withExperimentalGoogleExtensions-20200424"
    kotlinCompilerExtensionVersion = "0.1.0-dev10"
}

implementation 'androidx.ui:ui-framework:0.1.0-dev10'
implementation 'androidx.ui:ui-layout:0.1.0-dev10'
implementation 'androidx.ui:ui-material:0.1.0-dev10'
implementation 'androidx.ui:ui-tooling:0.1.0-dev10'
Peter Haddad
  • 78,874
  • 25
  • 140
  • 134
leiiiooo
  • 83
  • 1
  • 5

1 Answers1

12

The order of modifiers are important in Jetpack compose to make it visible I wrapped it inside a parent with gray background:

Column {
    // It just draws a background with out any padding
    Stack(modifier = Modifier.drawBackground(Color.Gray)) {
        Text(
            "Order of modifiers are important",
            Modifier.drawBackground(Color.Magenta, RectangleShape)
        )
    }

    Spacer(modifier = Modifier.height(20.dp))

    // In this one we put the padding modifier before the drawBackground
    // It first adds a padding, what should be the color of that padding?
    // so far we didn't tell any thing about it to Jetpack compose so it's transparent
    // and shows the color of parent layout that's gray color
    // then draws the background behind the content of Text(but doesn't change the color of padding)
    Stack(modifier = Modifier.drawBackground(Color.Gray)) {
        Text(
            "Order of modifiers are important",
            Modifier.padding(10.dp).drawBackground(Color.Magenta, RectangleShape)

        )
    }

    Spacer(modifier = Modifier.height(20.dp))

    // In this one we put the padding modifier after the drawBackground
    // It first draws a background behind the text
    // then padding applies but this time it's not transparent, it inherits the color of
    // backgroundColor
    Stack(modifier = Modifier.drawBackground(Color.Gray)) {
        Text(
            "Order of modifiers are important",
            Modifier.drawBackground(Color.Magenta, RectangleShape).padding(10.dp)
        )
    }
}

enter image description here

Habib Kazemi
  • 2,172
  • 1
  • 24
  • 30
  • 1
    cooool, Thank you very much for your reply, I've been following the profile as I understood it before and it seems that the order of the modifiers does have an effect on the results and the default is a reasonable behavior. I think the order of the configuration should have no effect on the result if the code is understood in terms of configuration items, similar to the builder design pattern. – leiiiooo May 27 '20 at 01:53