在 jetpack compose 中使用 .shadow 和 Button 会导致问题

Question

我想使用.shadow运算符为我的按钮添加阴影，但正如您在图像中看到的那样，我有一个白色背景。

Answer 1

Jetpack Compose 中的Modifier.shadow()顺序中的许多修饰符很重要。 首先使用阴影。

Button(
    modifier = Modifier
        .shadow(2.dp, RoundedCornerShape(2.dp))
        .height(36.dp),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

对比

Button(
    modifier = Modifier
        .height(36.dp)
        .shadow(2.dp, RoundedCornerShape(2.dp)),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

但这不是您为按钮设置高度的方式。 这是为了演示 Modifier.shadow() 顺序如何改变结果，可能对一些 Composables 有帮助，但对于 Button 你需要使用

Button(
    modifier = Modifier.height(36.dp),
    shape = RoundedCornerShape(2.dp),
    elevation = ButtonDefaults.elevation(...),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

高程函数具有不同状态的属性，例如

  @Composable
    fun elevation(
        defaultElevation: Dp = 2.dp,
        pressedElevation: Dp = 8.dp,
        disabledElevation: Dp = 0.dp,
        hoveredElevation: Dp = 4.dp,
        focusedElevation: Dp = 4.dp,
    )