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'
1
  • 1
    Your two code snippets seem to be identical. May 26, 2020 at 10:48

1 Answer 1

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

1
  • 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, 2020 at 1:53

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.