背景

之前在B站上看见一个视频是使用swiftui实现的霓虹效果的文字，后来我用compose实现没有思路，然后我就问了问gpt，它给了我答案。

1.普通霓虹文字

代码很简单，BasicText里面的shadow设置一下。

@Composable
fun NeonText(text: String = "UIVERSE", color: Color = Color(0xFF00FF9A)) {
    BasicText(
        text = text, // The glowing text
        style = TextStyle(
            color = color, // Neon green
            fontSize = 48.sp,
            shadow = Shadow(
                color = color, // The glow color
                blurRadius = 8f
            )
        )
    )
}

2.动态霓虹文字

不能动的效果怎么会出现在我的文章里呢，把这个text绑定到textfield上，让文字动起来。。。但是如果只有文字显得呆板，把输入的光标加上，让效果更好看。

代码如下，不算很复杂：

@Composable
fun GlowingTextWithCursor() {
    // Infinite transition for blinking cursor
    var text by remember { mutableStateOf("") }
    val infiniteTransition = rememberInfiniteTransition()
    val alpha by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 0f,
        animationSpec = infiniteRepeatable(
            animation = tween(500), // Time for blinking
            repeatMode = RepeatMode.Reverse
        )
    )
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFF1A1A1A)), // Background color
        contentAlignment = Alignment.Center
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            BasicText(
                text = text, 
                style = TextStyle(
                    color = Color(0xFF00FF9A), // Neon green
                    fontSize = 48.sp,
                    shadow = Shadow(
                        color = Color(0xFF00FF9A), // The glow color
                        blurRadius = 8f
                    )
                )
            )
            Spacer(modifier = Modifier.width(4.dp)) // Space between text and cursor
            Box(
                modifier = Modifier
                    .height(48.dp)
                    .width(4.dp)
                    .background(Color(0xFF00FF9A).copy(alpha = alpha)) // Blinking cursor
            )
        }
        TextField(
            text, {
                text = it
            },
            modifier = Modifier
                .padding(top = 120.dp)
        )
    }
}