android compose shadow 阴影 使用阴影可在视觉上提升界面向用户指示互动性并针对用户操作提供即时反馈。Compose 提供了多种将阴影纳入应用的方法Modifier.shadow()在符合 Material Design 指南的可组合项后面创建基于高度的阴影。Modifier.dropShadow()创建显示在可组合项后面的可自定义阴影使其看起来具有立体感。Modifier.innerShadow()在可组合项的边框内创建阴影使其看起来像压入其后面的表面。实现阴影使用 dropShadow() 修饰符可在内容后面绘制精确的阴影使元素看起来具有立体感。您可以通过其Shadow参数控制以下关键方面radius定义模糊效果的柔和度和扩散度。color定义色调的颜色。offset沿 x 轴和 y 轴定位阴影的几何图形。spread控制阴影几何图形的扩展或收缩。package com.wn.androidcomposedemo1.basegoogleimage import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.animateColor import androidx.compose.animation.core.EaseInOut import androidx.compose.animation.core.animateFloat import androidx.compose.animation.core.tween import androidx.compose.animation.core.updateTransition import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import androidx.compose.ui.draw.dropShadow import androidx.compose.ui.draw.innerShadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.shadow.Shadow import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.sp import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme /** * Author : wn * Email : maoning20080808163.com * Date : 2026/7/4 13:11 * Description : 阴影 */ class ShadowActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AndroidComposeDemo1Theme() { Surface( modifier Modifier.fillMaxSize(), color MaterialTheme.colorScheme.background ) { ShadowExample() } } } } Composable fun ShadowExample(){ Column( horizontalAlignment Alignment.CenterHorizontally ) { Spacer(Modifier.height(20.dp)) Text(shadow阴影效果, fontSize 30.sp, color Color.Red) Spacer(Modifier.height(20.dp)) SimpleDropShadowUsage() Spacer(Modifier.height(20.dp)) AnimatedColoredShadows() } } Composable fun SimpleDropShadowUsage(){ Box(Modifier.fillMaxWidth()){ Box( Modifier.width(200.dp) .height(200.dp) .dropShadow( shape RoundedCornerShape(20.dp), shadow Shadow( radius 10.dp, spread 6.dp, color Color.Yellow, offset DpOffset(x 4.dp, 4.dp) ) ) .align (Alignment.Center) .background( color Color.White, shape RoundedCornerShape(20.dp) ) ){ Text(Drop Shadow, modifier Modifier.align(Alignment.Center), fontSize 32.sp) } } } //按下阴影动画效果 Composable fun AnimatedColoredShadows(){ Box(Modifier.fillMaxWidth()){ val innerShadowColor1 Color(0xFF00AAFF) val innerShadowColor2 Color(0xFFADD8E6) val interactionSource remember { MutableInteractionSource() } val isPressed by interactionSource.collectIsPressedAsState() val transition updateTransition( targetState isPressed, label button_press_transition ) fun T buttonPressAnimation() tweenT( durationMillis 400, easing EaseInOut ) val shadowAlpha by transition.animateFloat( label shadow_alpha, transitionSpec {buttonPressAnimation()} ) {pressed - if(pressed) 0f else 1f } val blueDropShadow by transition.animateColor( label shadow_color, transitionSpec {buttonPressAnimation()} ) {pressed - if(pressed) Color.Transparent else innerShadowColor1 } Box( Modifier.clickable( interactionSource, indication null ){ } .width(300.dp) .height(200.dp) .align(Alignment.Center) .dropShadow( shape RoundedCornerShape(70.dp), shadow Shadow( radius 10.dp, spread 0.dp, color blueDropShadow, offset DpOffset(x 0.dp, -(2).dp), alpha shadowAlpha ) ) .dropShadow( shape RoundedCornerShape(70.dp), shadow Shadow( radius 10.dp, spread 0.dp, color blueDropShadow, offset DpOffset(x 2.dp, 6.dp), alpha shadowAlpha ) ) .background( color Color(0xFFFFFFFF), shape RoundedCornerShape(70.dp) ) .innerShadow( shape RoundedCornerShape(70.dp), shadow Shadow( radius 8.dp, spread 4.dp, color innerShadowColor2, offset DpOffset(x 4.dp, 0.dp) ) ) .innerShadow( shape RoundedCornerShape(70.dp), shadow Shadow( radius 20.dp, spread 4.dp, color innerShadowColor1, offset DpOffset(x 4.dp, 0.dp), //alpha in ) ) ){ Text(按压动画阴影, modifier Modifier.align(Alignment.Center)) } } } }