在Compose中自定义颜色高程效果

At Medium Engineering we’re in the process of moving to Compose. Today I found some funny stuff I wanted to share quickly.

在Medium Engineering，我们正在转向 Compose。今天我发现了一些有趣的东西，想要快速分享一下。

I was having an elevated surface where there was no illumination effect on it so I had to look at why and how I could customize it.

我有一个有高度的表面，但上面没有光照效果，所以我不得不研究为什么以及如何自定义它。

no illumination in the 6 dp elevated surface

6 dp 的凸起表面没有照明

I was wondering why our colors weren’t illuminated in dark theme with Compose like described in material documentation with the following code:

我想知道为什么我们的颜色在使用以下代码时没有在Compose中的暗色主题中发光，就像在材料文档中描述的那样：

Surface(
Modifier.height(40.dp), color = MediumTheme.colors.backgroundNeutralPrimary,

shape = CircleShape,

elevation = 6._dp
_) { _// content
_}

elevation = 6._dp
_) { _// 内容
_}

Like every time a Compose behavior surprised me, I jumped into the composable code so here I follow my color into the Surface code with some cmd + click to see what I missed.

就像每次Compose的行为让我感到惊讶一样，我跳进了可组合的代码，所以我跟随我的颜色进入Surface代码，并使用一些cmd +点击来看看我错过了什么。

I ended up to:

我最终得到了：

@Composableprivate fun Surface( modifier: Modifier, shape: Shape, color: Color, contentColor: Color, border: BorderStroke?, elevation: Dp, clickAndSemanticsModifier: Modifier, content: @Composable () -> Unit) {

val elevationOverlay = LocalElevationOverlay.current

val absoluteElevation = LocalAbsoluteElevation.current + elevation val backgroundColor = if (color == MaterialTheme.colors.surface && elevationOverlay != null) { elevationOverlay.apply(color, absoluteElevation) } else { color } CompositionLocalProvider(

val absoluteElevation = LocalAbsoluteElevation.current + elevation val backgroundColor = if (color...