Jetpack Compose 中的霓虹灯（发光）按钮？

Question

我在 YouTube 上看到了一些关于如何在 flutter 中制作霓虹灯按钮的视频，但我找不到关于如何在 jetpack compose 中制作发光按钮的教程。

我们可以在jetpack compose中制作一个发光按钮吗？

类似以下按钮之一：

Answer 1

我知道我有点晚了，但是...... 基于 如何使用 Jetpack Compose Canvas 绘制带有描边和霓虹灯发光的正方形？ 我创建了以下扩展：

fun ContentDrawScope.drawNeonStroke(radius: Dp) {
this.drawIntoCanvas {
    val paint =
        Paint().apply {
            style = PaintingStyle.Stroke
            strokeWidth = 20f
        }

    val frameworkPaint =
        paint.asFrameworkPaint()

    val color = Color.Magenta

    this.drawIntoCanvas {
        frameworkPaint.color = color.copy(alpha = 0f).toArgb()
        frameworkPaint.setShadowLayer(
            radius.toPx(), 0f, 0f, color.copy(alpha = .5f).toArgb()
        )
        it.drawRoundRect(
            left = 0f,
            right = size.width,
            bottom = size.height,
            top = 0f,
            radiusY = radius.toPx(),
            radiusX = radius.toPx(),
            paint = paint
        )
        drawRoundRect(
            color = Color.Magenta,
            size = size,
            cornerRadius = CornerRadius(radius.toPx(), radius.toPx()),
            style = Stroke(width = 1.dp.toPx())
        )
      }
   }
}

我们在这里绘制一个纯色边框，第二个边框（更宽）具有径向渐变。

然后，我们需要做的就是将其绘制在按钮之上：

            CompositionLocalProvider(
                LocalMinimumTouchTargetEnforcement provides false,
            ) {
                OutlinedButton(
                    onClick = { },
                    modifier = Modifier.drawWithContent {
                        drawContent()
                        drawNeonStroke(radius = 8.dp)
                    },
                    border = BorderStroke(1.dp, Color.Transparent),
                ) {
                    Text(text = "OUTLINED BUTTON", color = Color.Magenta)
                }

                Spacer(modifier = Modifier.width(20.dp))

                Button(
                    onClick = { },
                    modifier = Modifier.drawWithContent {
                        drawContent()
                        //Draw neon glow on top of your button
                        drawNeonStroke(radius = 8.dp)
                    },
                    shape = RoundedCornerShape(8.dp),
                    colors = ButtonDefaults.buttonColors(containerColor = Color.Magenta)
                ) {
                    Text(text = "FILLED BUTTON", color = Color.Black)
                }
            }

上面的示例显示了在填充和轮廓按钮顶部绘制霓虹灯笔画。

CompositionLocalProvider

删除默认按钮填充。

colors = ButtonDefaults.buttonColors(containerColor = Color.Magenta)

更改按钮的背景颜色，如果您的按钮已经具有所需的颜色，则不需要此操作。