如何用阴影提升盒子？

Question

我有一个 Box comsopable 我想用阴影提升

`Box(modifier = Modifier
            .sizeIn(100.dp)
            .background(Color.Magenta)) {
   Text("Lorem Ipsum")
}

如何？

如何用阴影提升盒子？谢谢

Answer 1

在 sizeIn 之前使用 Modifier.shadow，它实际上应该是在阴影上绘制背景之前，但我习惯将剪辑或阴影修改器放在修改器链的顶部或开头。阴影的顺序决定了它的绘制方式。

@Composable
private fun ShadowSample(){
    Box(modifier = Modifier
        .sizeIn(100.dp)
        .background(Color.White)) {
        Text("Lorem Ipsum")
    }

    Spacer(modifier = Modifier.height(10.dp))

    Box(modifier = Modifier
        .shadow(2.dp)
        .sizeIn(100.dp)
        .background(Color.White)) {
        Text("Lorem Ipsum")
    }

    Spacer(modifier = Modifier.height(10.dp))

    Box(modifier = Modifier
        .shadow(8.dp)
        .sizeIn(100.dp)
        .background(Color.White)) {
        Text("Lorem Ipsum")
    }

    Spacer(modifier = Modifier.height(10.dp))

    Box(modifier = Modifier
        .sizeIn(100.dp)
        .background(Color.White)
        .shadow(8.dp)
    ) {
        Text("Lorem Ipsum")
    }
}