Jetpack Compose 文本显示混淆

Question

如果这样的代码：

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

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

jetpack 组合配置

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'

Answer 1

修饰符的顺序在 Jetpack compose 中很重要为了让它可见，我将它包裹在一个灰色背景的父对象中：

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 文本显示混淆

Jetpack Compose Text Show Confuse

android

android-jetpack-compose