android Jetpack构成内部阴影

wsewodh2  于 2024-01-04  发布在  Android
关注(0)|答案(3)|浏览(167)

如何使用Jetpack Compose创建内部阴影?渐变应该从外部的黑色到内部的透明。Modifier.shadow()仅用于外部阴影。使用负仰角不起作用。

kh212irz

kh212irz1#


的数据

  1. fun Modifier.innerShadow(
  2. color: Color = Color.Black,
  3. cornersRadius: Dp = 0.dp,
  4. spread: Dp = 0.dp,
  5. blur: Dp = 0.dp,
  6. offsetY: Dp = 0.dp,
  7. offsetX: Dp = 0.dp
  8. ) = drawWithContent {
  9. drawContent()
  10. val rect = Rect(Offset.Zero, size)
  11. val paint = Paint()
  12. drawIntoCanvas {
  13. paint.color = color
  14. paint.isAntiAlias = true
  15. it.saveLayer(rect, paint)
  16. it.drawRoundRect(
  17. left = rect.left,
  18. top = rect.top,
  19. right = rect.right,
  20. bottom = rect.bottom,
  21. cornersRadius.toPx(),
  22. cornersRadius.toPx(),
  23. paint
  24. )
  25. val frameworkPaint = paint.asFrameworkPaint()
  26. frameworkPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
  27. if (blur.toPx() > 0) {
  28. frameworkPaint.maskFilter = BlurMaskFilter(blur.toPx(), BlurMaskFilter.Blur.NORMAL)
  29. }
  30. val left = if (offsetX > 0.dp) {
  31. rect.left + offsetX.toPx()
  32. } else {
  33. rect.left
  34. }
  35. val top = if (offsetY > 0.dp) {
  36. rect.top + offsetY.toPx()
  37. } else {
  38. rect.top
  39. }
  40. val right = if (offsetX < 0.dp) {
  41. rect.right + offsetX.toPx()
  42. } else {
  43. rect.right
  44. }
  45. val bottom = if (offsetY < 0.dp) {
  46. rect.bottom + offsetY.toPx()
  47. } else {
  48. rect.bottom
  49. }
  50. paint.color = Color.Black
  51. it.drawRoundRect(
  52. left = left + spread.toPx() / 2,
  53. top = top + spread.toPx() / 2,
  54. right = right - spread.toPx() / 2,
  55. bottom = bottom - spread.toPx() / 2,
  56. cornersRadius.toPx(),
  57. cornersRadius.toPx(),
  58. paint
  59. )
  60. frameworkPaint.xfermode = null
  61. frameworkPaint.maskFilter = null
  62. }
  63. }

字符串

用法:

  1. Box(
  2. modifier = Modifier
  3. .width(240.dp)
  4. .height(180.dp)
  5. .outerShadow(
  6. color = Color(0xff000000),
  7. alpha = 0.5f,
  8. cornersRadius = 20.dp,
  9. shadowBlurRadius = 30.dp,
  10. offsetX = 0.dp,
  11. offsetY = 15.dp
  12. )
  13. .clip(RoundedCornerShape(20.dp))
  14. .background(Color(0xFF282A2F))
  15. .innerShadow(
  16. blur = 1.dp,
  17. color = Color(0xff00FFFF),
  18. cornersRadius = 20.dp,
  19. offsetX = (-40.5).dp,
  20. offsetY = (-10.5).dp
  21. )
  22. .innerShadow(
  23. blur = 20.dp,
  24. color = Color(0xffff0000),
  25. cornersRadius = 20.dp,
  26. offsetX = 0.5.dp,
  27. offsetY = 0.5.dp
  28. )
  29. .padding(14.dp),
  30. contentAlignment = Alignment.Center
  31. ) {
  32. Text(
  33. text = stringResource(id = R.string.notification_service),
  34. modifier = Modifier,
  35. color = Color.White
  36. )
  37. }


outerShadow也是自定义修改器,从其他网站复制。

展开查看全部
p1tboqfb

p1tboqfb2#

Modifier.shadow相对于Modifier.background的位置将阴影放置在组件内部。此外,您可以创建Modifier.drawWithContent和framework。

  1. Column(
  2. modifier = Modifier
  3. .fillMaxSize()
  4. .padding(20.dp)
  5. ) {
  6. ComponentWithInnerShadow()
  7. Spacer(modifier = Modifier.height(12.dp))
  8. ComponentWithOuterShadow()
  9. Spacer(modifier = Modifier.height(12.dp))
  10. ComponentWithCustomInnerShadow()
  11. }
  12. @Composable private fun ComponentWithInnerShadow() {
  13. Column(
  14. modifier = Modifier
  15. .clip(RoundedCornerShape(5.dp))
  16. .background(Color.Yellow)
  17. .shadow(2.dp, shape = RoundedCornerShape(5.dp))
  18. ) {
  19. Text(text = "Hello World", modifier = Modifier.padding(12.dp))
  20. } }
  21. @Composable
  22. private fun ComponentWithOuterShadow() {
  23. Column(
  24. modifier = Modifier
  25. .shadow(2.dp, shape = RoundedCornerShape(5.dp))
  26. .background(Color.Yellow)
  27. ) {
  28. Text(text = "Hello World", modifier = Modifier.padding(12.dp))
  29. }
  30. }
  31. @Composable
  32. private fun ComponentWithCustomInnerShadow() {
  33. Column(
  34. modifier = Modifier.innerShadow()
  35. ) {
  36. Text(text = "Hello World", modifier = Modifier.padding(12.dp))
  37. }
  38. }

字符串
我没有设置参数,只是设置任意的数字,你可以设置自己的参数,如果你想设置颜色。这个看起来比标准的内部阴影更好。你需要为前景和形状提供颜色。我设置颜色并画了圆角矩形来演示。

  1. fun Modifier.innerShadow() = composed(
  2. inspectorInfo = {
  3. },
  4. factory = {
  5. val paint = remember() {
  6. Paint()
  7. }
  8. val foregroundPaint = remember() {
  9. Paint().apply {
  10. color = Color.Yellow
  11. }
  12. }
  13. val frameworkPaint = remember {
  14. paint.asFrameworkPaint()
  15. }
  16. Modifier.drawWithContent {
  17. this.drawIntoCanvas {
  18. val color = Color.LightGray
  19. val radius = 2.dp.toPx()
  20. val shadowColor = color
  21. .copy(alpha = .7f)
  22. .toArgb()
  23. val transparent = color
  24. .copy(alpha = 0f)
  25. .toArgb()
  26. frameworkPaint.color = transparent
  27. frameworkPaint.setShadowLayer(
  28. radius,
  29. 0f,
  30. 0f,
  31. shadowColor
  32. )
  33. val shadowRadius = 4.dp.toPx()
  34. it.drawRoundRect(
  35. left = 0f,
  36. top = 0f,
  37. right = this.size.width,
  38. bottom = this.size.height,
  39. radiusX = 5.dp.toPx(),
  40. radiusY = 5.dp.toPx(),
  41. paint = foregroundPaint
  42. )
  43. it.drawRoundRect(
  44. left = 0f,
  45. top = 0f,
  46. right = this.size.width,
  47. bottom = this.size.height,
  48. radiusX = 5.dp.toPx(),
  49. radiusY = 5.dp.toPx(),
  50. paint = paint
  51. )
  52. it.drawRoundRect(
  53. left = shadowRadius,
  54. top = shadowRadius,
  55. right = this.size.width - shadowRadius,
  56. bottom = this.size.height - shadowRadius,
  57. radiusX = 5.dp.toPx(),
  58. radiusY = 5.dp.toPx(),
  59. paint = foregroundPaint
  60. )
  61. drawContent()
  62. }
  63. }
  64. }
  65. )


的数据

展开查看全部
waxmsbnn

waxmsbnn3#

这是不支持的,但你有替代选项:
1.使用带有渐变画笔的边框修饰符
1.使用Android Canvas
1.使用渐变和Modifier.drawBehind在内容下面绘制插入阴影
Source

相关问题