調整 Jetpack Compose 中 Material Design 3 組件的色調提升？

Question

是否可以調整 Material Design 3 組件的 tonalElevation（但不是 shadowElevation）？

看起來好像只能同時調整兩者。 下面是 Material Design 3 中浮動操作按鈕的實現。其他組件也存在同樣的問題。

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = FabPrimaryTokens.ContainerShape,
    containerColor: Color = FabPrimaryTokens.ContainerColor.toColor(),
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit,
) {
    Surface(
        onClick = onClick,
        modifier = modifier,
        shape = shape,
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = elevation.tonalElevation(interactionSource = interactionSource).value,
        shadowElevation = elevation.shadowElevation(interactionSource = interactionSource).value,
        interactionSource = interactionSource,
    ) {
        CompositionLocalProvider(LocalContentColor provides contentColor) {
            // Adding the text style from [ExtendedFloatingActionButton] to all FAB variations. In
            // the majority of cases this will have no impact, because icons are expected, but if a
            // developer decides to put some short text to emulate an icon, (like "?") then it will
            // have the correct styling.
            ProvideTextStyle(
                MaterialTheme.typography.fromToken(ExtendedFabPrimaryTokens.LabelTextFont),
            ) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(
                            minWidth = FabPrimaryTokens.ContainerWidth,
                            minHeight = FabPrimaryTokens.ContainerHeight,
                        ),
                    contentAlignment = Alignment.Center,
                ) { content() }
            }
        }
    }
}

Answer 1

ColorScheme 類上有一個擴展函數，可將 Elevation 轉換為 Color： surfaceColorAtElevation() 。

TextField(
    ...
    colors = TextFieldDefaults.textFieldColors(
        containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp)
    )
)

此外，Material 3 ( https://m3.material.io/styles/elevation/tokens ) 中有六個不同的海拔級別：

Level 0: 0dp
Level 1: 1dp
Level 2: 3dp
Level 3: 6dp
Level 4: 8dp
Level 5: 12dp