如何通过在 Flutter 中以 JSON_Serializable 方式遍历 JSON 数组来填充 GridView？

如何解决如何通过在 Flutter 中以 JSON_Serializable 方式遍历 JSON 数组来填充 GridView？

我正在尝试解析一组 JSON 对象以填充 Flutter 中的 GridView。 到目前为止，我只能得到一个对象，但不能遍历整个对象数组。

JSON 字符串：A list of Beef recipe objects within 'beef' array.

我的代码：

import 'dart:convert';

import 'package:Flutter/material.dart';
import 'package:http/http.dart' as http;

class SpecificCategoryPage extends StatefulWidget {
  late final String category;

  SpecificCategoryPage({Key? key,required this.category}) : super(key: key);

  @override
  _SpecificCategoryPageState createState() => _SpecificCategoryPageState();
}

class _SpecificCategoryPageState extends State<SpecificCategoryPage> {
  late Future<Meal> meals;
  late List<Widget> mealCards;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Meal>(
        builder: (context,snapshot) {
          if (snapshot.hasData) {
            return Text(
                'Truest\nId: ${snapshot.data!.id}. ${snapshot.data!.meal}');
          } else {
            return Text('${snapshot.error}');
          }
          // Be default,show a loading spinner.
          return CircularProgressIndicator();
        },future: meals,),);
  }

  @override
  void initState() {
    super.initState();
    meals = _fetchMeals();
  }

  Future<Meal> _fetchMeals() async {
    final http.Response mealsData = await http.get(
        Uri.parse('https://www.themealdb.com/api/json/v1/1/filter.PHP?c=Beef'));
        if (mealsData.statusCode == 200)
          return Meal.fromJson(jsonDecode(mealsData.body));
        else
          throw Exception('Failed to load meals');
    }

class Meal {
  final String? id,meal;

  Meal({required this.id,required this.meal});

  factory Meal.fromJson(Map<String,dynamic> json) {
    return Meal(
        id: json['meals'][0]['idMeal'],meal: json['meals'][0]['strMeal']);
  }
}

示例对象遍历路径：

{"meals":[{"strMeal":"Beef and Mustard Pie","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/sytuqu1511553755.jpg","idMeal":"52874"},{object1},{object2}]}

我得到了什么：

{"strMeal":"牛肉和芥末 Pie","strMealThumb":"https://www.themealdb.com/images/media/meals/sytuqu1511553755.jpg","idMeal":"52874"}

如何获取数组中的所有对象并扩充 GridView 小部件？

解决方法

import 'dart:convert';

// First you should create a model to represent a meal
class Meal {
  
  // Place all the meal properties here
  final String strMeal;
  final String strMealThumb;
  final String idMeal;

  // Create a constructor that accepts all properties. They can be required or not
  Meal({
    required this.strMeal,required this.strMealThumb,required this.idMeal,});

  // Create a method (or factory constructor to populate the object based on a json input)
  factory Meal.fromJson(Map<String,dynamic> json) => Meal(
        strMeal: json['strMeal'],strMealThumb: json['strMealThumb'],idMeal: json['idMeal'],);
  
  String toString() {
    return 'strMeal: $strMeal,strMealThumb: $strMealThumb,idMeal: $idMeal';
  }
}

/// Then you should create another object to represent your response
/// It holds a list of meals that'll be populated by your API response

class YourAPIResponse {
  final List<Meal> meals;

  YourAPIResponse({required this.meals});

  factory YourAPIResponse.fromJson(Map<String,dynamic> json) =>
      YourAPIResponse(
        meals: List<Meal>.from(
          json['meals'].map((meal) => Meal.fromJson(meal)),),);
}

void main() {
  // Test data: This will be your API response
  String jsonString = '{"meals": [{"strMeal": "Beef and Mustard Pie","strMealThumb": "https://www.themealdb.com/images/media/meals/sytuqu1511553755.jpg","idMeal": "52874"}]}';
  
  final apiResponse = YourAPIResponse.fromJson(json.decode(jsonString));
  
  // Your meals list
  // You can use this to populate the gridview
  print(apiResponse.meals);
}

,

尝试类似：

...
   return jsonDecode(mealsData.body)['meals'].map((meal) => Meal.fromJson(meal)).toList();
...

class Meal {
  final String? id,meal;

  Meal({required this.id,required this.meal});

  factory Meal.fromJson(Map<String,dynamic> json) {
    return Meal(
        id: json['idMeal'],meal: json['strMeal']);
  }
}

这会迭代响应正文中的膳食并将它们映射到 Meal 列表。