14.6 过滤面板 - 颜色

14.6 过滤面板 - 颜色

img

实现步骤：

第 1 步：控制器

lib/pages/search/search_filter/controller.dart

1
2
// 颜色列表
List<KeyValueModel<AttributeModel>> colors = [];
1
2
// 选中颜色列表
List<String> colorKeys = [];
1
2
3
4
5
6
7
8
9
10
11
12
13
// 读取缓存
void _loadCache() async {

  // 颜色列表
  {
    String result =
        Storage().getString(Constants.storageProductsAttributesColors);
    colors = jsonDecode(result).map<KeyValueModel<AttributeModel>>((item) {
      var arrt = AttributeModel.fromJson(item);
      return KeyValueModel(key: "${arrt.name}", value: arrt);
    }).toList();
  }
}
1
2
3
4
5
// 颜色选中
void onColorTap(List<String> keys) {
  colorKeys = keys;
  update(["filter_colors"]);
}

第 2 步：FilterView 视图

lib/pages/search/search_filter/widgets/filter_view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 颜色选择
Widget _buildColors() {
  return GetBuilder<SearchFilterController>(
    id: "filter_colors",
    builder: (_) {
      return ColorsListWidget(
        onTap: controller.onColorTap,
        itemList: controller.colors,
        keys: controller.colorKeys,
        size: 24,
      ).paddingBottom(AppSpace.listRow * 2);
    },
  );
}
1
2
3
4
5
6
Widget _buildView() {
  return <Widget>[
    ...
    // 颜色
    _buildTitle(LocaleKeys.searchFilterColor.tr),
    _buildColors(),

提交代码到 git