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