Jetpack Compose绘制带描边、阴影、渐变的可替换文本问题

一、渐变仅第一个字符生效的原因 #

你的代码中给每个字符单独设置SpanStyle(brush = Brush.linearGradient(...))，但线性渐变的坐标是基于单个字符的绘制区域，而非整个文本。单个字符宽度极小，渐变的两个色标（0.0f到0.2f）几乎重叠，导致后续字符看起来无渐变效果，仅第一个字符因视觉起始位置能看到细微差异。

二、优化实现方案（带渐变、描边、阴影+可替换文本） #

以下是一套完整实现，解决渐变、描边、阴影问题，同时支持文本替换：

1. 核心思路 #

• 用drawBehind绘制文本的阴影与描边
• 直接给整个文本设置渐变，无需拆分字符
• 封装为可复用Composable，支持传入任意文本

2. 完整代码 #

import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun StyledText(
    text: String,
    modifier: Modifier = Modifier,
    fontSize: Float = 60f,
    gradientColors: List<Pair<Float, Color>> = listOf(
        0.0f to Color(0xffe2e145),
        0.2f to Color(0xff7ab624)
    ),
    strokeColor: Color = Color.Black,
    strokeWidth: Float = 4f,
    shadowColor: Color = Color.Gray.copy(alpha = 0.6f),
    shadowOffset: Offset = Offset(4f, 4f),
    shadowBlurRadius: Float = 8f
) {
    Text(
        text = text,
        style = TextStyle(
            fontSize = fontSize.sp,
            fontWeight = FontWeight.Bold,
            brush = Brush.linearGradient(
                colorStops = gradientColors.toTypedArray()
            )
        ),
        modifier = modifier.drawBehind {
            // 先绘制阴影
            drawTextWithShadow(
                text = text,
                style = TextStyle(
                    fontSize = fontSize.sp,
                    fontWeight = FontWeight.Bold
                ),
                shadowColor = shadowColor,
                shadowOffset = shadowOffset,
                shadowBlurRadius = shadowBlurRadius
            )
            // 再绘制描边
            drawTextWithStroke(
                text = text,
                style = TextStyle(
                    fontSize = fontSize.sp,
                    fontWeight = FontWeight.Bold
                ),
                strokeColor = strokeColor,
                strokeWidth = strokeWidth
            )
        }
    )
}

// 绘制带阴影的文本
private fun DrawScope.drawTextWithShadow(
    text: String,
    style: TextStyle,
    shadowColor: Color,
    shadowOffset: Offset,
    shadowBlurRadius: Float
) {
    drawIntoCanvas { canvas ->
        val paint = android.graphics.Paint().apply {
            this.asFrameworkPaint().apply {
                textSize = style.fontSize.toPx()
                typeface = style.fontWeight.toTypeface()
                color = shadowColor.toArgb()
                setShadowLayer(shadowBlurRadius, shadowOffset.x, shadowOffset.y, shadowColor.toArgb())
            }
        }
        canvas.nativeCanvas.drawText(
            text,
            0f,
            style.fontSize.toPx(),
            paint
        )
    }
}

// 绘制带描边的文本
private fun DrawScope.drawTextWithStroke(
    text: String,
    style: TextStyle,
    strokeColor: Color,
    strokeWidth: Float
) {
    drawIntoCanvas { canvas ->
        val paint = android.graphics.Paint().apply {
            this.asFrameworkPaint().apply {
                textSize = style.fontSize.toPx()
                typeface = style.fontWeight.toTypeface()
                color = strokeColor.toArgb()
                style = android.graphics.Paint.Style.STROKE
                strokeWidth = strokeWidth
                strokeJoin = android.graphics.Paint.Join.ROUND
                strokeCap = android.graphics.Paint.Cap.ROUND
            }
        }
        canvas.nativeCanvas.drawText(
            text,
            0f,
            style.fontSize.toPx(),
            paint
        )
    }
}

// 使用示例
@Composable
fun DemoScreen() {
    StyledText(
        text = "ANIMALS",
        modifier = Modifier.size(300.dp, 100.dp),
        fontSize = 60f
    )
    // 替换文本示例
    StyledText(text = "PLANTS")
}

三、Galaxy S10描边异常的解决 #

Galaxy S10这类老设备的Canvas渲染对Compose默认描边方式兼容性不佳，上述代码通过直接使用Android原生Paint绘制描边，并设置strokeJoin = ROUND和strokeCap = ROUND，可避免描边断裂或显示异常问题。

四、不推荐用AnnotatedString拆分字符加渐变的原因 #

• 单个字符渐变区域过小，视觉效果不明显
• 性能低于直接给整个文本设置渐变，多次Span会增加文本布局开销
• 渐变一致性难以保证，每个字符的渐变起点/终点都是独立的

内容的提问来源于stack exchange，提问作者ad1111