如何使用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 }}
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(),
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()
rect.top
val right = if (offsetX < 0.dp) {
rect.right + offsetX.toPx()
rect.right
val bottom = if (offsetY < 0.dp) {
rect.bottom + offsetY.toPx()
rect.bottom
paint.color = Color.Black
left = left + spread.toPx() / 2,
top = top + spread.toPx() / 2,
right = right - spread.toPx() / 2,
bottom = bottom - spread.toPx() / 2,
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 )}
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),
offsetX = (-40.5).dp,
offsetY = (-10.5).dp
blur = 20.dp,
color = Color(0xffff0000),
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)) } }@Composableprivate fun ComponentWithOuterShadow() { Column( modifier = Modifier .shadow(2.dp, shape = RoundedCornerShape(5.dp)) .background(Color.Yellow) ) { Text(text = "Hello World", modifier = Modifier.padding(12.dp)) }}@Composableprivate fun ComponentWithCustomInnerShadow() { Column( modifier = Modifier.innerShadow() ) { Text(text = "Hello World", modifier = Modifier.padding(12.dp)) }}
Column(
.fillMaxSize()
.padding(20.dp)
ComponentWithInnerShadow()
Spacer(modifier = Modifier.height(12.dp))
ComponentWithOuterShadow()
ComponentWithCustomInnerShadow()
@Composable private fun ComponentWithInnerShadow() {
.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() {
private fun ComponentWithCustomInnerShadow() {
modifier = Modifier.innerShadow()
字符串我没有设置参数,只是设置任意的数字,你可以设置自己的参数,如果你想设置颜色。这个看起来比标准的内部阴影更好。你需要为前景和形状提供颜色。我设置颜色并画了圆角矩形来演示。
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() } } })
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)
frameworkPaint.color = transparent
frameworkPaint.setShadowLayer(
radius,
0f,
shadowColor
val shadowRadius = 4.dp.toPx()
left = 0f,
top = 0f,
right = this.size.width,
bottom = this.size.height,
radiusX = 5.dp.toPx(),
radiusY = 5.dp.toPx(),
paint = foregroundPaint
paint = paint
left = shadowRadius,
top = shadowRadius,
right = this.size.width - shadowRadius,
bottom = this.size.height - shadowRadius,
型
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