Flutter中如何为动态生成的多组ListView独立管理选中项状态

解决方案 #

你目前的问题核心是所有分组共用同一个isSelectedIndex全局变量，导致不同分组同索引的选项选中状态同步，只需要把选中状态的存储结构换成按分组维度存储的Map即可，修改步骤如下：

1. 替换State类中的选中状态变量
   删除原来的isSelectedIndex、isSelectedIndexForListView两个变量，新增如下状态：

// key为属性分组名（如Color、Ram），value为该分组选中的项索引，未选中为null
Map<String, int?> selectedVariations = {};

如果需要默认选中每个分组的第一个项，可以在initState中初始化：

@override
void initState() {
  super.initState();
  for (var key in widget.controller.variationMap.keys) {
    selectedVariations[key] = 0;
  }
}

2. 修改选项点击事件的逻辑
   把原来GestureDetector的onTap回调替换为：

onTap: () {
  setState(() {
    // 仅更新当前点击的分组的选中索引
    selectedVariations[key] = index;
  });
},

3. 修改选中状态的判断逻辑
   把边框颜色的判断条件替换为：

border: Border.all(
  color: selectedVariations[key] == index
      ? Colors.black
      : const Color(0xffe2e2e2),
  width: 1,
),

额外说明 #

后续需要获取用户选中的所有属性、匹配对应SKU的价格和库存时，直接遍历selectedVariations即可，示例：

// 获取选中的属性集合
Map<String, String> selectedAttrs = {};
selectedVariations.forEach((key, index) {
  if (index != null) {
    selectedAttrs[key] = widget.controller.variationMap[key]![index];
  }
});
// 用selectedAttrs去匹配productVariation数组里的对应SKU即可拿到价格、库存信息

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