android compose shadow 阴影 使用
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)) } } } }