简体   繁体   中英

How to set default elevation for ExtendedFloatingActionButton in Jetpack Compose

How can the default elevation for ExtendedFloatingActionButton be applied in Jetpack Compose so that a shadow can be seen? Understandably, the default resting level is number 3 and the default height is 6dp, but using elevation = 6.dp didn't work, so what other method is there?

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

Defaults maybe in colors, elevations or anywhere is supposed to be used like this

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 = {}
)

With M3 the default elevation is defined by FloatingActionButtonDefaults.elevation() .
If you want the default value just omit it. You can also override the default values with:

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

It defines the elevation of a ExtendedFloatingActionButton in different states

@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

You can see in the source code :

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

With M2 the approach is similar and default values are defined by FloatingActionButtonDefaults.elevation() :

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM