如何在Jetpack Compose中实现类似CSS的带角度与色标的线性渐变？

原始 CSS 渐变代码 #

background: var(--Gradient, linear-gradient(96deg, #FAF354 -11.84%, #00CA69 71.35%));

问题描述 #

在Jetpack Compose中已配置渐变颜色，但无法对应实现CSS中的96deg渐变角度以及**-11.84%、71.35%色标位置**，现有代码如下：

BoxWithConstraints(modifier = Modifier.size(100.dp)) {
    val size = with(LocalDensity.current) { maxHeight.toPx() }
    Box(
        Modifier
            .fillMaxSize()
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(
                        Color(0xFFFAF354),
                        Color(0xFF00CA69)
                    ),
                    start = Offset(...,...)
                    end = Offset(...,...)
                ),
            )
    )
}

色标位置实现 #

色标百分比可直接转换为0-1区间的浮点数（负数按比例转换），通过colorStops参数配置：

colorStops = arrayOf(
    Pair(-0.1184f /*对应-11.84%*/, Color(0xFFFAF354)),
    Pair(0.7135f /*对应71.35%*/, Color(0xFF00CA69))
),

渐变角度实现 #

CSS的linear-gradient(角度)以顶部为基准顺时针旋转，而Jetpack Compose通过start和end偏移量定义渐变方向，需将角度转换为对应偏移：

1. 将角度转为弧度：val angleRadians = Math.toRadians(96.0).toFloat()
2. 根据组件宽高计算偏移点（以正方形为例，矩形需适配宽高比）：
3. 完整代码：

BoxWithConstraints(modifier = Modifier.size(100.dp)) {
    val width = maxWidth.toPx()
    val height = maxHeight.toPx()
    val angleRadians = Math.toRadians(96.0).toFloat()
    
    // 计算渐变起始/结束偏移，匹配CSS 96deg角度
    val startX = (width / 2) - (height / 2) * kotlin.math.tan(angleRadians)
    val startY = 0f
    val endX = (width / 2) + (height / 2) * kotlin.math.tan(angleRadians)
    val endY = height

    Box(
        Modifier
            .fillMaxSize()
            .background(
                brush = Brush.linearGradient(
                    colorStops = arrayOf(
                        Pair(-0.1184f, Color(0xFFFAF354)),
                        Pair(0.7135f, Color(0xFF00CA69))
                    ),
                    start = Offset(startX, startY),
                    end = Offset(endX, endY)
                )
            )
    )
}

注意事项 #

• CSS角度0deg对应从下到上的渐变，顺时针旋转角度；Compose通过两点连线确定方向，需通过三角函数完成转换。
• 若组件为矩形，需调整计算逻辑，确保渐变角度与CSS完全匹配。

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