如何在Jetpack Compose中移除Image组件的默认阴影效果？

首先明确：Jetpack Compose的Image组件本身没有内置默认阴影，你看到的阴影大概率是图片资源自身携带的，或是父容器、主题配置间接带来的效果，完全不需要重新制作图片资源，通过Compose的布局配置就能解决。

场景分析 #

你初始的Image代码仅加载资源并设置宽高，出现未手动添加的阴影，说明阴影是图片本身的一部分（比如图片边缘带有半透明阴影图层）。你通过自定义裁剪Shape的方式本质是裁掉了图片边缘的阴影区域，这种方法可行，但还有更简洁的实现方式。

更简洁的解决方案 #

方案1：直接裁剪到指定形状（无需自定义GenericShape） #

如果目标是圆形显示图片，直接用clip(CircleShape)即可，配合size控制显示区域，自动裁掉边缘阴影：

Image(
    painter = painterResource(id = if(sessionToken.isNotEmpty()) R.drawable.ic_disa_logo else R.drawable.ic_cepsa_logo),
    contentDescription = "login_logo",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .align(CenterHorizontally)
        .size(80.dp)
        .clip(CircleShape)
)

contentScale = ContentScale.Crop会确保图片填满裁剪区域，同时裁掉超出部分（包括自带阴影）。

方案2：精准裁剪边缘阴影 #

如果不需要圆形，仅需裁掉边缘阴影，可通过drawWithContent自定义绘制实现：

Image(
    painter = painterResource(id = if(sessionToken.isNotEmpty()) R.drawable.ic_disa_logo else R.drawable.ic_cepsa_logo),
    contentDescription = "login_logo",
    contentScale = ContentScale.FillBounds,
    modifier = Modifier
        .align(CenterHorizontally)
        .size(80.dp)
        .drawWithContent {
            val inset = 8.dp.toPx()
            clipRect(left = inset, top = inset, right = size.width - inset, bottom = size.height - inset) {
                drawContent()
            }
        }
)

方案3：排查主题/父容器的阴影配置 #

如果阴影并非图片自带，需检查父布局是否添加了shadow修饰符，或主题中的Shape是否默认带阴影：

// 若父布局有类似代码，会给子组件添加阴影，移除即可
Modifier.shadow(elevation = 4.dp)

现有解决方案的优化 #

你用GenericShape自定义圆形裁剪的思路正确，但可简化为CircleShape，配合background实现相同效果：

Image(
    painter = painterResource(id = if(sessionToken.isNotEmpty()) R.drawable.ic_disa_logo else R.drawable.ic_cepsa_logo),
    contentDescription = "login_logo",
    contentScale = ContentScale.FillBounds,
    modifier = Modifier
        .align(CenterHorizontally)
        .padding(10.dp)
        .size(80.dp)
        .background(Color.White, CircleShape)
        .clip(CircleShape)
)

内容的提问来源于stack exchange，提问作者Manuel Lucas