在 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() 顺序如何改变结果，可能对某些可组合项有帮助，但对于按钮，您需要使用

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,
    )