Flutter 中商城 sku 選擇器

1、效果

sku 是商城類項目經常使用的功能，這裏展現一個 flutter 版的實現。

2、使用

dependencies:
 itwo_flutter_sku: ^0.0.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"}));
複製代碼

二、使用方式

在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
  }
複製代碼