Flutter电商商品变体选择器开发遇RangeError(index)问题求助

嘿，我看了你遇到的问题，这个RangeError的根源很明确——你在生成尺寸选项列表的时候，用了所有去重尺寸的长度，但实际过滤后的可用尺寸列表长度更短，导致索引超出了有效范围。

问题分析 #

在SelectSizeWidget的List.generate中，你写了：

List.generate((model.sizeColour.isNotEmpty) ? model.ss.length : model.size.length , (index) { ... })

这里的model.ss是所有尺寸的去重集合（比如有2个尺寸），但当你选中某个颜色后，过滤出的_res可能只有1个对应的尺寸。这时候用model.ss.length作为生成长度，就会去访问_res[1]，但_res只有_res[0]，自然就触发了索引越界错误。

另外还有个小bug：model.selectedColour != null || model.selectedColour != ""这个判断逻辑不对，应该用&&——如果selectedColour是空字符串，!= null为true，||会让条件依然成立，导致错误的分支执行。

修复方案 #

修改SelectSizeWidget的builder部分，让列表生成的长度和过滤后的实际可用尺寸列表长度一致，同时修正条件判断：

@override
Widget build(BuildContext context) {
  return Consumer<ProductController>(
    builder: (_, model, __) {
      List<Variant> availableSizes = [];

      if (model.sizeColour.isNotEmpty) {
        if (model.selectedColour != null && model.selectedColour!.isNotEmpty) {
          // 过滤当前选中颜色对应的尺寸
          availableSizes = model.sizeColour
              .where((element) => element.var2?.toUpperCase() == model.selectedColour?.toUpperCase())
              .toList();
        } else {
          // 未选中颜色时，展示所有size-colour变体的尺寸（如需去重可自行调整逻辑）
          availableSizes = model.sizeColour.toList();
        }
      } else if (model.size.isNotEmpty) {
        availableSizes = model.size;
      } else if (model.materialSize.isNotEmpty && model.selectedMaterial != null) {
        availableSizes = model.materialSize
            .where((element) => element.var1.toUpperCase() == model.selectedMaterial!.toUpperCase())
            .toList();
      }

      return Wrap(
        spacing: 8,
        runSpacing: 8,
        children: List.generate(availableSizes.length, (index) {
          return buildSize(availableSizes[index]);
        }),
      );
    },
  );
}

额外优化建议 #

1. 在ProductController的getProductDetails中，selectedColour的赋值可以更严谨，添加空值判断避免异常：

if(cc.isNotEmpty){
  if(product!.prdtVari.first.variation.toLowerCase() == "colour"){
    final selectedVariant = colour.firstWhere((element) => element.varId == selectedVariation!);
    selectedColour = selectedVariant.var1.toUpperCase();
  } else if(product!.prdtVari.first.variation.toLowerCase() == "size-colour") {
    final selectedVariant = sizeColour.firstWhere((element) => element.varId == selectedVariation!);
    selectedColour = selectedVariant.var2?.toUpperCase() ?? "";
  }
};

2. 给selectedColour设置默认值（比如空字符串），避免null带来的潜在问题。

这样修改后，列表生成的长度始终和实际可用的尺寸数量一致，就不会再出现索引越界的错误了，逻辑也更清晰易懂。

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