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