Android jetpack compose 创建新拟态风格控件

最新推荐文章于 2025-04-06 16:46:39 发布

酱小油

最新推荐文章于 2025-04-06 16:46:39 发布

阅读量1.7k

点赞数 4

分类专栏： Android compose 文章标签： android

本文链接：https://blog.youkuaiyun.com/m0_37508087/article/details/120119040

版权

本文介绍了如何在Android的Jetpack Compose中创建新拟态风格的UI，由于Compose官方API限制，作者通过自定义Modifier扩展，利用底层Canvas绘制阴影来模拟新拟态效果。详细阐述了实现原理、遇到的困难、解决思路及具体代码实现，展示了输入框的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天开发新程序的时候，选择了jetpack最新的组件compose来构建应用程序的界面。但是因为compose面世不久，网上基本找不到太多相关的资料，想找一个新拟态风格的控件库但是找不到，也就只能自己写一个。

效果图:

这里以输入框为例，其他的空间做成新拟态的原理是一样的。

其实新拟态的原理是很简单的，大致就是给控件加两个阴影，显示出光线明暗的变化，如上图所示，左上加的是白色的阴影，右下加的是灰色的阴影。

在compose里面，api实际上是进一步封装的，改变控件的modifier与阴影相关的api只有：

@Stable
public fun Modifier.shadow(
    elevation: Dp,
    shape: Shape,
    clip: Boolean
): Modifier

这样一个。

看到elevation这个单词，应该不会感到陌生，这种阴影效果就是在Android5.0，apiLevel 21引入material design时引入的效果。

这种阴影效果只会出现在控件的右下角，没办法在控件的任意位置添加阴影，而且这种阴影效果是没办法指定颜色的。比如下图中按键的阴影：