基于Map键过滤JSON数据：Flutter中仅展示flag为1的商品

我来帮你解决这个问题，核心思路是对Future返回的商品列表做条件过滤，只保留flag为1的商品。

你的问题场景 #

你当前的代码可以正常展示所有商品，但需要筛选出flag字段值为1的商品，对应的JSON数据结构里每个商品对象都包含flag字段。

原代码 #

import 'package:ecommerce/data/HomePageTestData.dart';
import 'package:ecommerce/model/product_model.dart';
import 'package:ecommerce/services/product_services.dart';
import 'package:ecommerce/widgets/Home/SingleProduct.dart';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class NewesProdutBuilder extends StatelessWidget {
  HomePageTestData homePageTestData = HomePageTestData();
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: getProduct(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text("Error");
          }
          return GridView.builder(
            itemCount: snapshot.data.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemBuilder: (BuildContext contextd, int index) => SingleProduct(
              picture: snapshot.data[index].productImage,
              price: snapshot.data[index].salePrice,
              name: snapshot.data[index].productName,
              rating: snapshot.data[index].ratting,
            ),
          );
        } else
          return Center(
            child: CircularProgressIndicator(),
          );
      });
  }
}

JSON示例 #

{
  "message": "all product show",
  "product": [
    {
      "id": 12,
      "product_name": "nurullah",
      "product_description": "nurullah123",
      "category_id": 7,
      "color_id": 3,
      "size_id": 2,
      "regular_price": 123,
      "sale_price": 123,
      "quantity": 12,
      "ratting": 5,
      "product_image": "image/product/370313701.jpg",
      "flag": 0,
      "status": 1,
      "created_at": "2020-08-11 13:43:55",
      "updated_at": "2020-08-11 13:43:55"
    },
    ...（其余商品数据省略）
  ]
}

修改后的解决方案代码 #

import 'package:ecommerce/data/HomePageTestData.dart';
import 'package:ecommerce/model/product_model.dart';
import 'package:ecommerce/services/product_services.dart';
import 'package:ecommerce/widgets/Home/SingleProduct.dart';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class NewesProdutBuilder extends StatelessWidget {
  HomePageTestData homePageTestData = HomePageTestData();
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: getProduct(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text("Error");
          }
          // 核心过滤步骤：只保留flag为1的商品
          var _productList = snapshot.data.where((obj) => obj.flag == 1).toList();
          return GridView.builder(
            itemCount: _productList.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemBuilder: (BuildContext contextd, int index) => SingleProduct(
              picture: _productList[index].productImage,
              price: _productList[index].salePrice,
              name: _productList[index].productName,
              rating: _productList[index].ratting,
            ),
          );
        } else
          return Center(
            child: CircularProgressIndicator(),
          );
      });
  }
}

关键修改说明 #

1. 添加列表过滤逻辑：在获取到snapshot.data后，使用Dart的where方法筛选出flag == 1的商品，再通过toList()转换成可直接使用的List
2. 替换数据源：后续的GridView.builder的itemCount和itemBuilder都改用过滤后的_productList，不再使用原始的snapshot.data

这样就能实现只展示flag值为1的商品了。

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