Card VS Box 渲染差异

Question

有没有解释为什么会这样

Card(
        modifier =
        Modifier
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(
                        OrgFarmTheme.colors.secondary,
                        OrgFarmTheme.colors.onSecondary
                    )
                )
            )
           .clip(RoundedCornerShape(10))
    ) {
...
}

呈现、

而

Box(
        modifier =
        Modifier
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(
                        OrgFarmTheme.colors.secondary,
                        OrgFarmTheme.colors.onSecondary
                    )
                )
            )
            .clip(RoundedCornerShape(10))
    ) {
...
}

呈现 ?

我已经尝试使用 Card 的默认 shape 参数，但它呈现相同。

Answer 1

Card 背景颜色由 backgroundColor 属性而不是 background 修饰符定义。此属性也有一个默认值 = MaterialTheme.colors.surface，默认应用于 Card。这是您的代码不同的原因。

如果你想用 Card 实现与 Box 相同的布局，你必须使用：

Card(
    modifier =
    Modifier
        .background(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    MaterialTheme.colors.secondary,
                    MaterialTheme.colors.onSecondary
                )
            )
        )
        ,
    backgroundColor =  Transparent,
    shape = RoundedCornerShape(10),
    elevation = 0.dp //it is important to avoid borders
)

如果您想要 Box 以高程和渐变作为背景，您可以使用 shadow 修饰符：

Box(
    modifier =
    Modifier
        .shadow(12.dp,RoundedCornerShape(10),true)
        .background(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    MaterialTheme.colors.secondary,
                    MaterialTheme.colors.onSecondary
                )
            )
        )
        .clip(RoundedCornerShape(10))
) {
}

Card VS Box 渲染差异

Card VS Box render Difference

android

android-cardview

android-jetpack-compose