Flutter动态嵌套列表项选择：电商商品动态多属性选择实现方案咨询

整体工作流程 #

• 接口拉取动态属性数据：后端返回完整的属性列表、每个属性对应的可选值列表，无需提前约定属性数量、名称
• 前端初始化状态：创建已选属性映射表，默认所有属性均为未选中状态
• 动态渲染选择区：按属性列表逐行渲染属性名称，对应属性值以标签/按钮形式平铺展示
• 监听用户选择操作：用户点击某个属性值时更新对应属性的选中状态，可按需同步更新无库存组合的禁用状态
• 全选校验：判断所有属性是否均已选中，全部选中后匹配对应SKU，更新价格、库存等商品信息

具体实现方案 #

1. 定义通用数据结构 #

// 商品属性组模型
class ProductAttribute {
  final String attrId;
  final String attrName; // 例如"袖长""领口""设计风格"
  final List<AttributeValue> valueList;

  ProductAttribute({required this.attrId, required this.attrName, required this.valueList});
}

// 单个属性值模型
class AttributeValue {
  final String valueId;
  final String valueName; // 例如"长袖""V领""复古风"
  final bool isDisabled; // 标记当前组合下是否可选（无库存时禁用）

  AttributeValue({required this.valueId, required this.valueName, this.isDisabled = false});
}

// 已选状态存储容器，key为属性ID，value为选中的属性值ID
Map<String, String> selectedAttrMap = {};

2. 动态属性区渲染实现 #

无需提前适配属性数量，自动适配后端返回的任意数量属性：

ListView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  itemCount: attributeList.length, // attributeList为后端返回的属性组列表
  itemBuilder: (context, index) {
    final currentAttr = attributeList[index];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 属性名称展示
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: Text(currentAttr.attrName, style: const TextStyle(fontWeight: FontWeight.w500)),
        ),
        // 属性值标签组
        Wrap(
          spacing: 8,
          runSpacing: 8,
          children: currentAttr.valueList.map((value) {
            final isSelected = selectedAttrMap[currentAttr.attrId] == value.valueId;
            return GestureDetector(
              onTap: value.isDisabled ? null : () {
                // 更新选中状态
                selectedAttrMap[currentAttr.attrId] = value.valueId;
                // *按需实现：调用方法更新无库存属性值的禁用状态
                updateDisabledAttrs();
                setState(() {});
                // 校验是否所有属性已选
                checkAllSelected();
              },
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blue : (value.isDisabled ? Colors.grey.shade200 : Colors.white),
                  border: Border.all(color: isSelected ? Colors.blue : (value.isDisabled ? Colors.grey.shade300 : Colors.grey)),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Text(
                  value.valueName,
                  style: TextStyle(color: isSelected ? Colors.white : (value.isDisabled ? Colors.grey : Colors.black87)),
                ),
              ),
            );
          }).toList(),
        )
      ],
    );
  },
)

3. 核心逻辑说明 #

• 全选校验：判断selectedAttrMap的长度和attributeList的长度是否相等，相等则说明所有属性均已选中，此时可匹配SKU信息、启用下单/加购按钮
• 库存互斥逻辑*（按需实现）*：如果后端返回了所有可用SKU的属性组合列表，每次用户选中属性值后，遍历所有SKU，将不符合当前已选组合的属性值标记为isDisabled = true，避免用户选中无库存的无效组合

4. 边界处理 #

• 切换商品时清空selectedAttrMap，避免上一个商品的选中状态残留
• 属性列表为空时隐藏属性选择区，直接展示SKU信息
• 未全选属性时，下单/加购按钮置灰不可点击

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