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 : maoning20080808@163.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() = tween<T>(
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))
}
}
}
}