Flutter 中商城 sku 选择器

一、效果

sku 是商城类项目常用的功能，这里展示一个 flutter 版的实现。

二、使用

dependencies:
 itwo_flutter_sku: ^0.0.1
复制代码

1、数据处理

后端返回数据通常是，或者其他格式的数据。

[
    {
        "id":1,
        "stock":100,
        "skuName":"内存:16G|CPU:I5"
    },
    {
        "id":2,
        "stock":100,
        "skuName":"内存:16G|CPU:I7"
    },
    {
        "id":3,
        "stock":100,
        "skuName":"内存:32G|CPU:I5"
    }
]
复制代码

把后端返回的数据遍历、切割，或者其他方式，总之转换成这种格式:

    List<ISkuBean> dataList = List<ISkuBean>()
      ..add(ISkuBean(iSkuBeanId: 1, iSkuStock: 100, skuTagMap: {"内存": "16G", "CPU": "I5"}))
      ..add(ISkuBean(iSkuBeanId: 2, iSkuStock: 100, skuTagMap: {"内存": "16G", "CPU": "I7"}))
      ..add(ISkuBean(iSkuBeanId: 3, iSkuStock: 100, skuTagMap: {"内存": "32G", "CPU": "I5"}));
复制代码

2、使用方式

在widget中使用

    Container(
      padding: EdgeInsets.all(20),
      child: Sku(
        skuBeanList: dataList,
        zeroStockSelectEnable: false,
        onSelected: (sku) => print('${sku.toString()}'),
      ),
    ),
复制代码

当正确选择了 sku 后，会在onSelected中返回选择的 sku
在构造函数提供的可选、已选、不可选的三种tag的构造方法，方便自定义效果

  Sku({
    Key? key,
    required this.skuBeanList,
    required this.onSelected,
    this.zeroStockSelectEnable = true,//0库存的sku是否可选
    this.normalItemBuild,// 可选的tag
    this.selectedItemBuild,//已选的tag
    this.disableItemBuild,//不可用的tag
  }
复制代码