Dart Flutter中如何让ListView.builder或列表索引保持静态不偏移

问题根因 #

你当前的实现存在两个核心问题：

• 未给ListView.builder指定itemCount，默认会生成无限多的列表项，本身就不符合业务预期
• 直接在itemBuilder中判断数量为0就不返回组件，会导致ListView实际渲染的序列下标和原数组的下标完全错位：ListView的index参数是基于实际渲染的元素顺序生成，不是原数组的原生索引

解决方案 #

方案1：生成带原始索引的过滤列表（推荐，性能最优） #

先把原数组中数量大于0的项过滤出来，同时绑定对应原始索引，ListView基于过滤后的列表渲染，操作时取绑定的原始索引修改原数组即可，完全避免索引错位问题。
修改后的完整代码如下：

class _CheckoutScreenState extends State<CheckoutScreen>{
  List<int> quantity = [1, 2, 1, 6];

  // 生成只包含数量>0的项、且绑定原始索引的过滤列表
  List<Map<String, int>> get filteredQuantities {
    List<Map<String, int>> list = [];
    for (int i = 0; i < quantity.length; i++) {
      if (quantity[i] > 0) {
        list.add({'originalIndex': i, 'count': quantity[i]});
      }
    }
    return list;
  }

  void increment(int index){
    setState((){
      quantity[index] +=1;
    });
  }

  void decrement(int index){
    if(quantity[index] != 0){
      setState((){
        quantity[index] -=1;
      });
    }
  }

  @override
  Widget build(BuildContext context){
    final filteredList = filteredQuantities;
    return ListView.builder(
      itemCount: filteredList.length,
      itemBuilder: (BuildContext context, index) {
        final item = filteredList[index];
        final originalIndex = item['originalIndex']!;
        final count = item['count']!;
        return ListTile(
          leading: IconButton(
            icon: const Icon(Icons.remove),
            onPressed: () => decrement(originalIndex),
          ),
          trailing: IconButton(
            icon: const Icon(Icons.add),
            onPressed: () => increment(originalIndex),
          ),
          title: Text('$count products')
        );
      }
    );
  }
}

该方案适合数组长度较大的场景，不会额外渲染隐藏的组件，性能开销最低。

方案2：隐藏0数量项（改动最小，适合短列表） #

如果你的列表元素数量不多（<50项），可以直接用Visibility组件包裹列表项，将0数量的项设置为不可见，ListView的itemCount固定为原数组长度，保证索引完全和原数组对应：

@override
Widget build(BuildContext context){
  return ListView.builder(
    itemCount: quantity.length, // 固定为原数组长度，保证索引对应
    itemBuilder: (BuildContext context, index) {
      return Visibility(
        visible: quantity[index] != 0,
        maintainSize: false,
        maintainAnimation: false,
        maintainState: false,
        child: ListTile(
          leading: IconButton(
            icon: const Icon(Icons.remove),
            onPressed: () => decrement(index),
          ),
          trailing: IconButton(
            icon: const Icon(Icons.add),
            onPressed: () => increment(index),
          ),
          title: Text('${quantity[index]} products')
        ),
      );
    }
  );
}

该方案改动量最小，但是隐藏的0数量项依然会在Widget树中遍历，列表很长时会有性能损耗。

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