现在位置: 首页 / Android / 正文

我再也不用求设计做阴影了 — Compose 阴影

在 Android Jetpack Compose 的界面开发中，视觉层次感是提升用户体验的关键因素，而阴影（Shadow）则是构建立体感和空间深度的核心元素。长期以来，开发者往往依赖设计工具生成的静态图片或复杂的自定义绘制逻辑来实现精细的阴影效果，这不仅增加了资源体积，还降低了 UI 的灵活性。随着 Compose 1.9.0 版本的发布，Google 引入了一套全新的原生阴影 API，包括 dropShadow 和 innerShadow 两个修饰符（Modifier）。这套 API 允许开发者以声明式的方式轻松创建高质量的外投影和内阴影，无需再求助于设计师切图或编写繁琐的 Canvas 代码。本文将深入解析这两个新 API 的工作原理、参数配置及其在实际场景中的应用，帮助开发者掌握现代 Compose UI 的视觉增强技巧，实现更高效、更美观的界面设计。

初识 Compose 阴影 API

在 Compose 1.9.0 之前，实现阴影主要依靠 Modifier.shadow，但其功能相对有限，难以满足复杂的设计需求。新的 dropShadow 和 innerShadow API 提供了更细粒度的控制能力。要使用这些新功能，首先需要理解它们作为 Modifier 的基本用法以及调用顺序的重要性。

以下代码展示了如何为一个矩形容器添加外阴影和内阴影：

// 外阴影示例：注意 modifier 的顺序
Box(
    modifier = Modifier
        .size(160.dp)
        // dropShadow 通常放置在背景色之前，以确保阴影绘制在背景之下或周围
        .dropShadow(shape = RectangleShape) {
            this.radius = 20f
        }
        .background("#fb2c36".color)
)

// 内阴影示例：注意 modifier 的顺序
Box(
    modifier = Modifier
        .size(160.dp)
        .background("#fb2c36".color)
        // innerShadow 必须放置在背景色之后，否则会被背景覆盖而无法显示
        .innerShadow(shape = RectangleShape) {
            this.radius = 20f
        }
)

在上述代码中，dropShadow 和 innerShadow 均接收两个主要参数：shape 和 block。shape 参数定义了阴影的几何轮廓，可以使用系统预定义的形状如 RectangleShape（矩形）、CircleShape（圆形），也可以传入自定义的 Shape 对象。block 参数则是一个 Lambda 表达式，它提供了一个作用域对象（ShadowScope），允许开发者在闭包内部配置阴影的具体属性。

需要特别注意的是 Modifier 的执行顺序。对于 dropShadow（外阴影），建议将其置于 background 之前，这样阴影会自然地渲染在组件背景的边缘外侧。而对于 innerShadow（内阴影），必须将其置于 background 之后，因为内阴影是绘制在内容区域内部的，如果先绘制阴影再绘制不透明的背景色，阴影将被完全遮盖。这种顺序依赖性是基于 Compose 修饰符链式调用的绘制层级逻辑决定的。

此外，dropShadow 提供的是 DropShadowScope，而 innerShadow 提供的是 InnerShadowScope。尽管两者提供的配置属性大部分相同，但在某些特定场景下，理解其作用域的细微差别有助于避免配置错误。通过这种灵活的配置方式，开发者可以快速原型化各种阴影效果，极大地提升了 UI 开发的效率。

命名规范解析：为何使用 Drop Shadow？

在阅读 API 文档时，许多开发者可能会疑惑：既然有 innerShadow（内阴影），为何外阴影不命名为 outerShadow，而是使用了 dropShadow？这并非随意的命名选择，而是遵循了图形设计和前端开发领域的长期惯例。

在设计软件如 Adobe Photoshop、Figma 以及 Web 标准 CSS（例如 filter: drop-shadow(...)）中，“Drop Shadow”是一个固定术语，特指从对象轮廓向外投射、带有偏移和模糊效果的阴影。这里的 “Drop” 并非指“掉落”，而是形象地描述了光线被物体遮挡后，阴影“投射”在背景表面的视觉效果。

4.png

采用 dropShadow 这一命名，旨在保持与业界主流设计工具和 Web 标准的一致性，降低开发者的认知成本。当设计师在 Figma 中标注“Drop Shadow”时，开发者可以直接映射到 Compose 中的 dropShadow Modifier，从而实现设计与代码的无缝对接。相比之下，innerShadow 则专门用于描述向内凹陷的阴影效果，两者成对出现，清晰地区分了阴影的投射方向。理解这一命名背景，有助于开发者更准确地沟通需求并查阅相关文档。

核心属性详解：Radius 与 Spread

阴影的视觉表现主要由几个关键属性控制，其中 radius 和 spread 是最容易混淆但至关重要的两个参数。它们虽然都能影响阴影的“大小”，但作用机制截然不同。

Radius：控制模糊程度

radius 是一个浮点型数值，用于定义阴影的模糊半径。它决定了阴影边缘的柔和程度。数值越大，阴影的边缘越模糊，扩散范围越广；数值越小，阴影边缘越锐利。当 radius 设为 0 时，阴影将呈现为没有任何模糊效果的实心形状。

this.radius = 50f

2.gif

在实际应用中，radius 模拟了光源的非点状特性以及空气散射效果。较大的 radius 值通常用于营造柔和、远处的阴影感，适合卡片式布局；较小的 radius 值则用于营造紧凑、近处的阴影感，适合按钮或图标。

Spread：控制扩张范围

spread 属性用于改变阴影的初始尺寸。正值会使阴影在原始形状的基础上向外扩张，负值则会使阴影向内收缩。与 radius 不同，spread 不会改变阴影的模糊程度，它只是单纯地调整阴影几何体的大小。

this.radius = 0f
this.spread = 20f

3.gif

为了直观展示 spread 的效果，上述代码将 radius 设置为 0f。此时，阴影没有模糊边缘，呈现为一个纯色的实心块。可以看到，随着 spread 值的增加，这个实心块的面积明显增大。这在需要创建发光效果（Glow）或强调边框时非常有用，例如通过设置较大的 spread 和较小的 radius，可以模拟出霓虹灯般的辉光效果。

Radius 与 Spread 的本质区别

总结来说，spread 改变的是阴影的实体几何大小，类似于将阴影图层进行缩放；而 radius 改变的是阴影的边缘羽化程度，类似于高斯模糊滤镜。在实际设计中，通常需要结合使用这两个属性：先通过 spread 确定阴影的基础覆盖范围，再通过 radius 调整边缘的自然过渡效果，从而达到逼真的光影表现。

位置与透明度：Offset 与 Alpha

除了形状和模糊，阴影的位置和可见度也是影响视觉效果的重要因素。offset 和 alpha 属性分别控制了这两方面。

Offset：阴影偏移量

offset 属性接受一个 Offset 对象，包含 x 和 y 两个方向的位移值。它决定了阴影相对于源对象的偏移距离。正值的 x 表示向右偏移，正值的 y 表示向下偏移。通过调整 offset，可以模拟不同角度的光源照射效果。

this.offset = Offset(10f, 20f)

6.gif

在 Material Design 规范中，不同的海拔高度（Elevation）通常对应不同的阴影偏移量。例如，较低的组件可能只有轻微的向下偏移，而悬浮的操作按钮（FAB）则可能有更明显的偏移，以增强其“浮起”的视觉暗示。合理设置 offset 能够引导用户的视觉焦点，并强化界面的层级结构。

Alpha：阴影不透明度

alpha 属性控制阴影的不透明度，取值范围为 0.0（完全透明）到 1.0（完全不透明）。默认情况下，阴影具有一定的透明度，以模拟真实世界中光线穿透和散射的效果。

this.alpha = .5f

7.gif

降低 alpha 值可以使阴影变得更加轻盈、自然，避免在浅色背景上显得过于突兀。相反，在深色模式或高对比度场景中，可能需要适当提高 alpha 值以确保阴影的可见性。动态调整 alpha 还可以用于实现交互反馈，例如当用户按下按钮时，通过减小阴影的 alpha 和 offset 来模拟按钮被按下的物理效果。

色彩与混合模式：Color、Brush 与 BlendMode

传统的阴影通常是黑色或灰色的，但现代 UI 设计越来越倾向于使用彩色阴影或渐变阴影来增强品牌识别度和视觉吸引力。Compose 的新 API 为此提供了强大的支持。

Color：自定义阴影颜色

默认情况下，阴影颜色为黑色。通过 color 属性，开发者可以将阴影设置为任意颜色。这在创建品牌化 UI 或特殊视觉效果时非常有用。

this.color = Color.Green

7.png

例如，对于一个绿色的成功状态提示框，使用绿色阴影比黑色阴影更能保持视觉的一致性和和谐感。彩色阴影能够更好地融入整体配色方案，减少视觉冲突。

Brush：渐变阴影

除了纯色，brush 属性允许为阴影应用渐变效果。这对于创建具有深度感或动态感的阴影非常有效。

this.brush = Brush.verticalGradient(
    colors = listOf(Transparent, Color.Red)
)

8.png

在上述示例中，使用垂直渐变从透明到红色，可以模拟出一种从上到下逐渐增强的红光反射效果。这种技术常用于游戏 UI、音乐播放器或任何需要强烈视觉冲击力的场景。需要注意的是，brush 和 color 通常互斥，设置 brush 会覆盖 color 的设置。

BlendMode：混合模式增强真实感

在现实世界中，阴影并不是简单的半透明黑色覆盖，它会与背景颜色发生相互作用，呈现出背景色的加深版本。blendMode 属性允许开发者指定阴影与下方内容的混合方式，从而获得更逼真的视觉效果。

this.blendMode = BlendMode.Overlay

9.gif

例如，当阴影落在高饱和度的彩色背景上时，使用 BlendMode.Overlay（叠加）或 BlendMode.Multiply（正片叠底）可以使阴影自然地变暗，而不是简单地覆盖一层灰色。这种处理方式避免了“脏兮兮”的视觉效果，使阴影看起来像是真正融入了背景环境中。对于追求极致细节的高端 UI 设计，合理使用混合模式是提升质感的关键一步。

API 重载与性能优化策略

在深入实战之前，我们需要厘清 innerShadow 提供的两种重载形式及其背后的性能考量。第一种方式直接接收一个预定义的 Shadow 对象，其参数如 radius、spread 和 offset 均采用 dp 单位，这种声明式写法简洁明了，非常适合那些在生命周期内保持静止不变的静态阴影场景。然而，在涉及复杂交互动画或频繁状态变更的场景中，直接传递对象可能导致不必要的重组开销，因为每次状态变化都可能触发整个阴影配置的重新计算。相比之下，第二种基于 InnerShadowScope 的 Lambda 表达式写法则提供了更细粒度的控制能力，允许我们在作用域内直接修改阴影属性。这种方式的核心优势在于它利用了 Compose 的快照机制，仅在真正读取的状态发生变化时才触发重绘，从而显著降低了重组频率。因此，对于追求高性能流畅动画的应用，推荐优先使用 block 参数形式，以避免在每一帧渲染时都进行大量的状态读取与对象分配。

fun Modifier.innerShadow(shape: Shape, shadow: Shadow): Modifier =
    this then SimpleInnerShadowElement(shape, shadow)

@Stable
fun Modifier.innerShadow(shape: Shape, block: InnerShadowScope.() -> Unit): Modifier =
    this then BlockInnerShadowElement(shape, block)

> 代码解析：上述代码展示了两个核心重载函数。第一个函数 SimpleInnerShadowElement 适用于静态配置，直接封装了阴影数据；第二个函数 BlockInnerShadowElement 则通过 @Stable 注解确保稳定性，并利用 Lambda 作用域实现延迟求值，这是提升动画性能的关键所在。

视觉增强：打造霓虹发光效果

在新 API 出现之前，开发者往往受限于传统 shadow 修饰符的单一样式，难以还原设计稿中那些极具张力的光影效果。如今，借助 dropShadow 与 innerShadow 的组合，我们可以轻松突破这一限制，创造出具有强烈视觉冲击力的发光效果。其核心原理在于利用阴影的 color 属性，将其设置为高饱和度的明亮色彩，而非传统的黑色或灰色半透明色。通过同时叠加外阴影和内阴影，并配合适当的模糊半径（radius），可以模拟出光线从物体边缘向外扩散以及向内渗透的物理现象。为了进一步增强真实感，我们还可以引入 Brush 渐变画笔，让阴影颜色随位置变化而产生细腻的过渡，从而营造出类似霓虹灯管或能量护盾般的立体感。这种技术特别适用于游戏 UI、音乐播放器封面或任何需要强调焦点的交互组件。

Box(
    modifier = Modifier
        .size(220.dp)
        // 外层发光：模拟光线向外扩散
        .dropShadow(shape = glowShape) {
            this.radius = 60f
            this.color = Color(0xFFEF4444)
            // 使用垂直渐变增加光影层次
            this.brush = Brush.verticalGradient(
                colors = listOf(Color(0xFF4ADE80), Color(0xFF38BDF8)),
            )
        }
        // 边框辅助：强化边缘轮廓
        .border(
            width = 1.dp,
            shape = glowShape,
            brush = Brush.verticalGradient(
                colors = listOf(Color(0xFFFEF08A), Color(0xFF38BDF8)),
            ),
        )
        // 背景底色：提供对比基础
        .background(color = Zinc950, shape = glowShape)
        // 内层发光：模拟光线向内渗透，增加体积感
        .innerShadow(shape = glowShape) {
            this.radius = 90f
            this.color = Color(0xFFDC2626)
            this.brush = Brush.verticalGradient(
                colors = listOf(Color(0xFF4ADE80), Color(0xFF38BDF8)),
            )
            this.alpha = 0.4f // 调整透明度以融合背景
        }
)

> 代码解析：此示例通过链式调用组合了外阴影、边框和内阴影。关键在于 dropShadow 和 innerShadow 中均使用了非黑色的 color 以及 Brush.verticalGradient，这种多层次的色彩叠加是产生“发光”质感的核心，而 alpha 的调整则确保了视觉效果的自然融合。

风格复刻：新拟态设计的完美还原

新拟态（Neumorphism）设计风格因其柔和的凸起感和精致的光影细节而备受青睐，但其实现难点在于对高光与阴影位置的精确控制。利用 Compose 1.9 的新特性，我们可以通过巧妙的 Brush 渐变配置来模拟光源照射下的物理反射。具体而言，外阴影部分可以使用从白色到半透明深色的线性渐变，来表现物体受光面的高光溢出；而内阴影则反向操作，通过深色渐变来表现背光面的凹陷感。这种“外凸内凹”或“外亮内暗”的组合，能够极大地增强 UI 元素的立体感和触感反馈。此外，配合圆角形状（RoundedCornerShape）和柔和的背景色，可以轻松复刻出类似苹果设计风格中那种细腻、温润的质感。这种方法不仅代码量少，而且完全由矢量绘制生成，避免了图片资源带来的包体积增加问题，是现代化 UI 开发的理想选择。

Box(
    modifier = Modifier
        .size(220.dp)
        // 外阴影：模拟顶部光源造成的高光溢出
        .dropShadow(shape = neoShape) {
            this.radius = 50f
            // 从上至下的白到半透明黑渐变，模拟受光面
            brush = Brush.verticalGradient(
                colors = listOf(Color.White, Color.White, Zinc950.copy(alpha = 0.2f)),
            )
        }
        // 边框：进一步强化边缘的光影转折
        .border(
            width = 2.dp,
            shape = neoShape,
            brush = Brush.verticalGradient(
                colors = listOf(Color.White, Zinc950.copy(alpha = 0.3f)),
            ),
        )
        // 背景：使用中性灰作为基底，凸显光影
        .background(color = Zinc300, shape = neoShape)
        // 内阴影：模拟底部背光面的凹陷阴影
        .innerShadow(shape = neoShape) {
            this.radius = 90f
            // 同样使用渐变，但方向或颜色权重不同以营造凹陷感
            brush = Brush.verticalGradient(
                colors = listOf(Color.White, Zinc950.copy(alpha = 0.2f)),
            )
        }
) {
    Text("Apple", color = Color.White, fontSize = 48.sp, modifier = Modifier.align(Alignment.Center))
}

> 代码解析：该示例展示了如何通过 Brush.verticalGradient 在阴影中引入方向性光照。dropShadow 中的白色起始色模拟了顶光下的高光，而 innerShadow 则通过类似的渐变逻辑增强了内部的深度感，共同构建了新拟态特有的“软浮雕”效果。

技术选型与团队协作思考

Compose 1.9.0 引入的 dropShadow 和 innerShadow 无疑补齐了原生 UI 开发在精细化视觉表现上的最后一块短板。它不仅终结了以往开发者需要嵌套多层 Box 或编写自定义 DrawScope 才能实现复杂投影的历史，更通过基于状态的 block 优化机制，为动态交互提供了坚实的性能保障。无论是追求潮流的新拟态、炫酷的霓虹发光，还是严格遵循设计规范的常规投影，这套 API 都能以优雅且高效的方式胜任。然而，技术的先进性并不直接等同于工程实践的最优解，团队在落地时仍需权衡“代码实现”与“资源切图”之间的利弊。代码实现的优势在于极致的灵活性、较小的包体积以及对动态主题的良好支持，但这也要求开发人员具备较高的审美敏感度，且修改视觉效果需要重新编译部署。相反，设计师直接导出阴影图片虽然责任边界清晰、调整便捷，却牺牲了运行时性能和适配灵活性。因此，建议团队根据项目类型（如强交互应用偏向代码，静态展示页偏向切图）建立明确的协作规范，在还原度与维护成本之间找到最佳平衡点。