如何使用颜色列表创建LinearGradient并以编程方式设置？

默认仅支持两色的LinearGradient可以通过自定义渐变停靠点（stops）的方式扩展为支持任意长度颜色列表的渐变效果，全程可通过代码完成配置，无需引入第三方库。

核心实现逻辑 #

线性渐变的多色效果本质是沿渐变方向给每个颜色分配对应的位置锚点，只要按传入的颜色列表长度自动计算锚点占比，就能实现均匀过渡的多色渐变：

• 当传入颜色列表长度为1时，直接返回纯色即可
• 当传入颜色列表长度≥2时，列表首尾颜色分别对应渐变起点（0%位置）和终点（100%位置），中间颜色按总长度均匀分配位置占比

可复用代码示例 #

Android Jetpack Compose 场景 #

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.geometry.Offset
import kotlin.math.cos
import kotlin.math.sin
import kotlin.math.toRadians

/**
 * 构造支持任意颜色数量的线性渐变笔刷
 * @param colorList 渐变颜色列表，长度无限制
 * @param angle 渐变角度，0°为从左到右，90°为从上到下，默认水平渐变
 */
fun createMultiColorLinearGradient(
    colorList: List<Color>,
    angle: Float = 0f
): Brush {
    require(colorList.isNotEmpty()) { "颜色列表不能为空" }
    if (colorList.size == 1) {
        return Brush.linearGradient(listOf(0f to colorList.first(), 1f to colorList.first()))
    }
    // 自动生成均匀分布的颜色停靠点
    val colorStops = Array(colorList.size) { index ->
        val stopRatio = index.toFloat() / (colorList.size - 1)
        stopRatio to colorList[index]
    }
    // 根据角度计算渐变起止坐标
    val radian = toRadians(angle.toDouble())
    val endX = cos(radian).toFloat()
    val endY = sin(radian).toFloat()

    return Brush.linearGradient(
        colorStops = colorStops,
        start = Offset.Zero,
        end = Offset(endX, endY)
    )
}

// 调用示例：支持2/3/5/任意数量颜色
val gradient5 = createMultiColorLinearGradient(
    colorList = listOf(Color(0xFFFF0000), Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF), Color(0xFF0000FF)),
    angle = 135f
)

前端Web/JS场景 #

/**
 * 生成多色线性渐变的CSS字符串
 * @param {string[]} colorList 渐变颜色列表，支持任意合法CSS颜色值
 * @param {number} angle 渐变角度，遵循CSS标准，0deg为从下到上，90deg为从左到右
 */
function createMultiColorLinearGradient(colorList, angle = 0) {
    if (!colorList.length) throw new Error("颜色列表不能为空");
    if (colorList.length === 1) return colorList[0];
    const stops = colorList.map((color, idx) => {
        const percent = (idx / (colorList.length - 1) * 100).toFixed(2);
        return `${color} ${percent}%`;
    }).join(', ');
    return `linear-gradient(${angle}deg, ${stops})`;
}

// 调用示例
const cssGradient = createMultiColorLinearGradient(
    ['#ff0000', '#ffff00', '#00ff00', '#00ffff'],
    90
);
// 输出值：linear-gradient(90deg, #ff0000 0.00%, #ffff00 33.33%, #00ff00 66.67%, #00ffff 100.00%)

自定义调整 #

如果不需要均匀过渡的渐变效果，跳过自动计算停靠点的逻辑，给每个颜色手动指定占比即可，比如要让第一个颜色占前30%的位置，直接把对应stop值设为0.3即可。

大部分UI框架的LinearGradient底层都支持多停靠点配置，只是对外封装的简易API只留了两色入参，直接调用带stops参数的底层重载方法就能实现多色效果，不用自己写颜色插值逻辑。

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