Flutter中如何循环复用颜色列表为ListView组件分配背景色

问题场景 #

我在Flutter开发过程中，尝试为ListView生成的每个列表组件设置不同的背景色，实现效果可参考示例截图：

当前实现代码如下：

ListView.separated(
  physics: const BouncingScrollPhysics(),
  shrinkWrap: true,
  itemCount: docList.length,
  scrollDirection: Axis.horizontal,
  itemBuilder: (BuildContext context, int index) {
    final data = docList[index];
    return Row(
      children: [
        DocLIstCard(
          // 此处为每个生成的组件传入对应背景色
          backgroundColor: AppColors.gradientIndex[index], 
          category: data.sectionName,
          docImage: data.image,
          docName: data.name,
        ),
      ],
    );
  },
  separatorBuilder: (BuildContext context, int index) {
    return const SizedBox(width: 20);
  },
)

代码中引用的AppColors.gradientIndex变量定义如下：

static const gradientIndex = [
  LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Color(0xFF111A8A), Color(0xFFB1008A)],
  ),
  LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Color(0xFFE97000), Color(0xFFB1008A)],
  ),
  LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Color(0xFF111A8A), Color(0xFFB1008A)],
  ),
  LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Color(0xFFE97000), Color(0xFFB1008A)],
  ),
];

现有实现的弊端非常明显：如果列表项数量达到上千个，就需要手动在gradientIndex数组中编写上千个渐变色配置，维护成本极高。需要通过逻辑复用有限的颜色配置，无需手动逐个定义即可为任意数量的列表项分配对应背景色。

解决方案 #

直接用取模（余数）运算就能实现固定渐变色集合的循环复用，完全不需要手动扩充数组，不管列表长度是多少都能自动分配预设颜色：

• 运算逻辑：当前列表项index % 预设渐变色数组的长度，得到的结果永远落在0到数组长度减1的区间内，是数组的合法下标，刚好对应数组里存储的渐变色配置
• 原有gradientIndex的定义完全不需要改动，只需要修改传入backgroundColor的取值逻辑即可

修改后的列表项构建代码：

itemBuilder: (BuildContext context, int index) {
  final data = docList[index];
  // 计算当前项循环复用的渐变色下标
  final colorPos = index % AppColors.gradientIndex.length;
  return Row(
    children: [
      DocLIstCard(
        backgroundColor: AppColors.gradientIndex[colorPos], 
        category: data.sectionName,
        docImage: data.image,
        docName: data.name,
      ),
    ],
  );
}

如果觉得现有渐变数量太少、循环重复感太强，只需要往gradientIndex数组里添加更多预设渐变样式即可，不需要跟着列表长度做等量扩充。

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