如何使用Jetpack Compose创建内部阴影?渐变应该从外部的黑色到内部的透明。Modifier.shadow()仅用于外部阴影。使用负仰角不起作用。
Modifier.shadow()
kh212irz1#
的数据
fun Modifier.innerShadow( color: Color = Color.Black, cornersRadius: Dp = 0.dp, spread: Dp = 0.dp, blur: Dp = 0.dp, offsetY: Dp = 0.dp, offsetX: Dp = 0.dp ) = drawWithContent { drawContent() val rect = Rect(Offset.Zero, size) val paint = Paint() drawIntoCanvas { paint.color = color paint.isAntiAlias = true it.saveLayer(rect, paint) it.drawRoundRect( left = rect.left, top = rect.top, right = rect.right, bottom = rect.bottom, cornersRadius.toPx(), cornersRadius.toPx(), paint ) val frameworkPaint = paint.asFrameworkPaint() frameworkPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT) if (blur.toPx() > 0) { frameworkPaint.maskFilter = BlurMaskFilter(blur.toPx(), BlurMaskFilter.Blur.NORMAL) } val left = if (offsetX > 0.dp) { rect.left + offsetX.toPx() } else { rect.left } val top = if (offsetY > 0.dp) { rect.top + offsetY.toPx() } else { rect.top } val right = if (offsetX < 0.dp) { rect.right + offsetX.toPx() } else { rect.right } val bottom = if (offsetY < 0.dp) { rect.bottom + offsetY.toPx() } else { rect.bottom } paint.color = Color.Black it.drawRoundRect( left = left + spread.toPx() / 2, top = top + spread.toPx() / 2, right = right - spread.toPx() / 2, bottom = bottom - spread.toPx() / 2, cornersRadius.toPx(), cornersRadius.toPx(), paint ) frameworkPaint.xfermode = null frameworkPaint.maskFilter = null } }
字符串
用法:
Box( modifier = Modifier .width(240.dp) .height(180.dp) .outerShadow( color = Color(0xff000000), alpha = 0.5f, cornersRadius = 20.dp, shadowBlurRadius = 30.dp, offsetX = 0.dp, offsetY = 15.dp ) .clip(RoundedCornerShape(20.dp)) .background(Color(0xFF282A2F)) .innerShadow( blur = 1.dp, color = Color(0xff00FFFF), cornersRadius = 20.dp, offsetX = (-40.5).dp, offsetY = (-10.5).dp ) .innerShadow( blur = 20.dp, color = Color(0xffff0000), cornersRadius = 20.dp, offsetX = 0.5.dp, offsetY = 0.5.dp ) .padding(14.dp), contentAlignment = Alignment.Center ) { Text( text = stringResource(id = R.string.notification_service), modifier = Modifier, color = Color.White ) }
型outerShadow也是自定义修改器,从其他网站复制。
outerShadow
p1tboqfb2#
Modifier.shadow相对于Modifier.background的位置将阴影放置在组件内部。此外,您可以创建Modifier.drawWithContent和framework。
Modifier.shadow
Column( modifier = Modifier .fillMaxSize() .padding(20.dp) ) { ComponentWithInnerShadow() Spacer(modifier = Modifier.height(12.dp)) ComponentWithOuterShadow() Spacer(modifier = Modifier.height(12.dp)) ComponentWithCustomInnerShadow() } @Composable private fun ComponentWithInnerShadow() { Column( modifier = Modifier .clip(RoundedCornerShape(5.dp)) .background(Color.Yellow) .shadow(2.dp, shape = RoundedCornerShape(5.dp)) ) { Text(text = "Hello World", modifier = Modifier.padding(12.dp)) } } @Composable private fun ComponentWithOuterShadow() { Column( modifier = Modifier .shadow(2.dp, shape = RoundedCornerShape(5.dp)) .background(Color.Yellow) ) { Text(text = "Hello World", modifier = Modifier.padding(12.dp)) } } @Composable private fun ComponentWithCustomInnerShadow() { Column( modifier = Modifier.innerShadow() ) { Text(text = "Hello World", modifier = Modifier.padding(12.dp)) } }
字符串我没有设置参数,只是设置任意的数字,你可以设置自己的参数,如果你想设置颜色。这个看起来比标准的内部阴影更好。你需要为前景和形状提供颜色。我设置颜色并画了圆角矩形来演示。
fun Modifier.innerShadow() = composed( inspectorInfo = { }, factory = { val paint = remember() { Paint() } val foregroundPaint = remember() { Paint().apply { color = Color.Yellow } } val frameworkPaint = remember { paint.asFrameworkPaint() } Modifier.drawWithContent { this.drawIntoCanvas { val color = Color.LightGray val radius = 2.dp.toPx() val shadowColor = color .copy(alpha = .7f) .toArgb() val transparent = color .copy(alpha = 0f) .toArgb() frameworkPaint.color = transparent frameworkPaint.setShadowLayer( radius, 0f, 0f, shadowColor ) val shadowRadius = 4.dp.toPx() it.drawRoundRect( left = 0f, top = 0f, right = this.size.width, bottom = this.size.height, radiusX = 5.dp.toPx(), radiusY = 5.dp.toPx(), paint = foregroundPaint ) it.drawRoundRect( left = 0f, top = 0f, right = this.size.width, bottom = this.size.height, radiusX = 5.dp.toPx(), radiusY = 5.dp.toPx(), paint = paint ) it.drawRoundRect( left = shadowRadius, top = shadowRadius, right = this.size.width - shadowRadius, bottom = this.size.height - shadowRadius, radiusX = 5.dp.toPx(), radiusY = 5.dp.toPx(), paint = foregroundPaint ) drawContent() } } } )
型
waxmsbnn3#
这是不支持的,但你有替代选项:1.使用带有渐变画笔的边框修饰符1.使用Android Canvas1.使用渐变和Modifier.drawBehind在内容下面绘制插入阴影Source
Modifier.drawBehind
3条答案
按热度按时间kh212irz1#
的数据
字符串
用法:
型
outerShadow
也是自定义修改器,从其他网站复制。p1tboqfb2#
Modifier.shadow
相对于Modifier.background的位置将阴影放置在组件内部。此外,您可以创建Modifier.drawWithContent和framework。字符串
我没有设置参数,只是设置任意的数字,你可以设置自己的参数,如果你想设置颜色。这个看起来比标准的内部阴影更好。你需要为前景和形状提供颜色。我设置颜色并画了圆角矩形来演示。
型
的数据
waxmsbnn3#
这是不支持的,但你有替代选项:
1.使用带有渐变画笔的边框修饰符
1.使用Android Canvas
1.使用渐变和
Modifier.drawBehind
在内容下面绘制插入阴影Source