Card VS Box 渲染差异答案

【问题标题】：Card VS Box render DifferenceCard VS Box 渲染差异
【发布时间】：2021-10-12 04:59:33
【问题描述】：

有没有解释为什么会这样

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 参数，但它呈现的效果相同。

【问题讨论】：

Box VS Surface 也是如此
Card 有一个由MaterialTheme.colors.surface 定义的默认backgroundColor
暗示不可能对卡片应用渐变？
对于我的特定用例，我必须使用自定义 Layoutrequiring 其中每个子项的索引

标签： android android-cardview android-jetpack-compose

【解决方案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))
) {
}

【讨论】：

谢谢先生。它确实尝试添加海拔 = 0.dp，并且它完全按预期工作（就像一个盒子）。然而，我使用卡片的真正目的是在焦点上提升它，给它一个悬停效果。如果elevation = 0.dp就可以了，但是稍微增加一点，效果就开始变差了。
有没有办法通过渐变来实现高程？如果有答案，您是在编辑这个答案，还是我应该开始一个新问题？
@MARSK 我已经用盒子的例子更新了答案，带有高程和渐变。
优秀的解决方案先生。谢谢！