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

发布于07月21日

I want to use the .shadow operator to add a shadow to my button, but as you can see in the image, I got a white background.

推荐答案

Jetpack中的修改器数量多达Modifier.shadow()个.首先使用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")
}

但这不是为按钮设置高程的方式.这是为了演示如何修改.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,
    )