Compose RoundedCornerShape、填充和背景颜色未按预期工作

Question

期待

现实

（请忽略具体颜色；外部背景颜色为紫色，内部背景颜色为红色）

编写代码

@Preview
@Composable
fun MyCta() {
    MaterialTheme() {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(50))
                .padding(32.dp)
                .background(MaterialTheme.colors.primary)
        ) {
            Text(
                "Tap to continue",
                Modifier
                    .padding(8.dp)
                    .background(Color.Red)
                ,
                color = MaterialTheme.colors.onPrimary
            )
        }
    }
}

我的期望落空了吗？为什么？

Answer 1

padding您想在指定后使用background

@Preview
@Composable
fun MyCta() {
    MaterialTheme() {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(50))
                .background(MaterialTheme.colors.primary)
                .padding(32.dp)
        ) {
            Text(
                "Tap to continue",
                Modifier
                    .padding(8.dp)
                    .background(Color.Red)
                ,
                color = MaterialTheme.colors.onPrimary
            )
        }
    }
}

注意：明确的顺序可以帮助您推断不同
修饰符将如何相互作用。将此与基于视图的系统进行比较，在基于视图的系统中
，您必须学习盒模型，边距应用在
元素“外部”，但填充在元素“内部”，并且背景元素的大小将
相应调整。修改器设计使这种行为变得
明确且可预测，并为您提供更多控制来实现
您想要的确切行为。

修饰符文档：