Flutter长列表随机颜色异常：滚动后颜色变更及重复色解决

一、滚动后屏幕外条目颜色变更的解决 #

问题根源 #

ListView.builder 和 ListView.custom 采用懒加载+组件复用机制，如果你在 itemBuilder 回调里实时生成随机颜色，当条目滚出屏幕被复用时，会重新执行颜色生成逻辑，导致颜色无故改变。

解决方法 #

提前维护一个与条目一一对应的固定颜色列表，每个条目直接使用列表中对应索引的颜色，无论组件是否被复用，颜色都保持固定。

二、新添加条目不与最后一个重复的解决 #

之前方法的问题 #

用 .toSet().toList() 去重的逻辑存在缺陷：它会移除列表中所有重复颜色，但无法保证新生成的颜色与最后一个条目颜色不同，还可能打乱原有列表顺序、丢失历史条目。

正确做法 #

生成新颜色时，循环判断是否与列表最后一个颜色重复，直到生成不同的颜色再加入列表。

完整代码示例 #

import 'dart:math';
import 'package:flutter/material.dart';

class ColorListView extends StatefulWidget {
  const ColorListView({super.key});

  @override
  State<ColorListView> createState() => _ColorListViewState();
}

class _ColorListViewState extends State<ColorListView> {
  final List<Color> _colorList = [];
  final Random _random = Random();

  @override
  void initState() {
    super.initState();
    // 初始化生成15个不连续重复的颜色
    for (int i = 0; i < 15; i++) {
      if (i == 0) {
        _colorList.add(_generateRandomColor());
      } else {
        _colorList.add(_generateUniqueColor());
      }
    }
  }

  // 生成基础随机颜色
  Color _generateRandomColor() {
    return Color.fromRGBO(
      _random.nextInt(256),
      _random.nextInt(256),
      _random.nextInt(256),
      1.0,
    );
  }

  // 生成与最后一个颜色不同的随机色
  Color _generateUniqueColor() {
    Color newColor;
    do {
      newColor = _generateRandomColor();
    } while (newColor == _colorList.last);
    return newColor;
  }

  // 添加新条目
  void _addNewItem() {
    setState(() {
      _colorList.add(_generateUniqueColor());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Color List')),
      body: ListView.builder(
        itemCount: _colorList.length,
        itemBuilder: (context, index) {
          return Container(
            height: 60,
            color: _colorList[index], // 使用固定列表中的颜色
            alignment: Alignment.center,
            child: Text(
              'Item $index',
              style: const TextStyle(color: Colors.white, fontSize: 16),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addNewItem,
        child: const Icon(Icons.add),
      ),
    );
  }
}

关键说明 #

1. 固定颜色列表：所有条目颜色提前生成并存储，itemBuilder 直接取用对应索引的颜色，彻底解决滚动复用导致的颜色变更问题。
2. 颜色唯一性校验：_generateUniqueColor 方法通过循环生成，确保新颜色与最后一个条目颜色绝对不重复，避免连续重复的情况。

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