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 Compose 配置

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'

- leiiiooo

---

你的两个代码片段看起来完全相同。 - CommonsWare

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

- Habib Kazemi

---

非常酷，非常感谢您的回复。我之前已经按照我理解的方式关注了该配置文件，似乎修饰符的顺序确实会影响结果，而默认行为是合理的。我认为，如果代码以配置项的形式被理解，类似于构建器设计模式，那么配置的顺序不应该对结果产生影响。 - leiiiooo