Jetpack Compose Text Show Confuse

Question

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'

user_4146943 · Answer

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)
        )
    }
}

Jetpack Compose Text Show Confuse

1 Answers