如何在 Jetpack Compose 中為 ExtendedFloatingActionButton 設置默認高度

Question

如何在 Jetpack Compose 中應用ExtendedFloatingActionButton的默認高度，以便可以看到陰影？ 可以理解，默認的靜止高度是3號，默認的高度是6dp，但是用elevation = 6.dp不行，那還有什么辦法呢？

ExtendedFloatingActionButton(
    text = { Text(text = "Button") },
    icon = { Icon(Icons.Filled.Add, "") },
    modifier = Modifier.clip(RoundedCornerShape(16.dp)),
    elevation = FloatingActionButtonElevation.?
)

Answer 1

默認值可能在顏色、高度或任何地方都應該像這樣使用

ExtendedFloatingActionButton(
    text = { Text(text = "Button") },
    icon = { Icon(Icons.Filled.Add, "") },
    modifier = Modifier.clip(RoundedCornerShape(16.dp)),
    elevation = FloatingActionButtonDefaults.elevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        hoveredElevation = 2.dp,
        focusedElevation = 1.dp,
    ),
    onClick = {}
)

Answer 2

對於M3 ，默認高度由FloatingActionButtonDefaults.elevation()定義。
如果您想要默認值，請忽略它。 您還可以使用以下方法覆蓋默認值：

ExtendedFloatingActionButton(
    //..
    elevation = FloatingActionButtonDefaults.elevation(
        defaultElevation = 4.dp
    )
)

它定義了不同狀態下ExtendedFloatingActionButton的高度

@Composable
fun elevation(
    defaultElevation: Dp = FabPrimaryTokens.ContainerElevation, //6.0.dp
    pressedElevation: Dp = FabPrimaryTokens.PressedContainerElevation, //6.0.dp
    focusedElevation: Dp = FabPrimaryTokens.FocusContainerElevation, //6.0.dp
    hoveredElevation: Dp = FabPrimaryTokens.HoverContainerElevation //8.0.dp
): FloatingActionButtonElevation

你可以在源代碼中看到：

val ContainerElevation = ElevationTokens.Level3
val PressedContainerElevation = ElevationTokens.Level3
val FocusContainerElevation = ElevationTokens.Level3
val HoverContainerElevation = ElevationTokens.Level4

對於M2 ，方法類似，默認值由FloatingActionButtonDefaults.elevation()定義：

@Composable
fun elevation(
    defaultElevation: Dp = 6.dp,
    pressedElevation: Dp = 12.dp,
    hoveredElevation: Dp = 8.dp,
    focusedElevation: Dp = 8.dp,
)