Jetpack Compose绘制渐变线条不符合预期的问题求助

你的代码问题出在渐变Brush的创建时机和方向设置错误：

• 提前在布局外部创建Brush时，无法获取当前组件的实际尺寸，导致渐变默认使用水平方向（左→右）。而你的线条是垂直的，同一x坐标上水平渐变的颜色完全一致，所以渐变效果无法呈现。
• 纯红色线条无需使用渐变Brush，直接用color参数更高效。

修改后的代码 #

@Preview(showBackground = true)
@Composable
fun DrawTimeLine() {
    Column(Modifier.fillMaxSize()) {
        val strokeWidth = 2.dp
        
        // 蓝红渐变竖线
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(75.dp)
                .drawBehind {
                    // 在drawBehind内创建Brush，基于当前组件尺寸设置垂直渐变
                    val verticalGradient = Brush.linearGradient(
                        colors = listOf(Color.Blue, Color.Red),
                        start = Offset(x = center.x, y = 0f),
                        end = Offset(x = center.x, y = size.height)
                    )
                    drawLine(
                        brush = verticalGradient,
                        start = Offset(center.x, 0f),
                        end = Offset(center.x, size.height),
                        strokeWidth = strokeWidth.toPx()
                    )
                }
        ) {}
        
        // 纯红色竖线
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(25.dp)
                .drawBehind {
                    drawLine(
                        color = Color.Red,
                        start = Offset(center.x, 0f),
                        end = Offset(center.x, size.height),
                        strokeWidth = strokeWidth.toPx()
                    )
                }
        ) {}
    }
}

关键调整点 #

1. 渐变方向适配：在drawBehind代码块内创建Brush，利用center和size将渐变方向设置为垂直（上→下），让颜色沿着竖线的长度方向过渡。
2. 简化纯颜色绘制：纯红色线条直接使用color参数替代渐变Brush，减少不必要的性能开销。

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