Flutter：显示从服务接收到的嵌套数据：已编辑 #3答案

【问题标题】：Flutter : Showing nested data received from serve : Edited #3Flutter：显示从服务接收到的嵌套数据：已编辑 #3
【发布时间】：2020-12-25 01:08:58
【问题描述】：

我有一个应用程序在我打印数据的页面中从服务器接收嵌套数据，并且打印成功：

课程页面：

  final DateTime mDate;
  final List<Games> games;

class DatedMatchs {
  DatedMatchs(
    this.mDate,
    this.games,
  );
}
class Games {
  Games(
    this.id,this.sId,this.wId,this.leagueName,this.homeTeam,this.awayTeam,this.homeGoals,this.awayGoals,this.mHour,this.homeEx,this.awayEx,
  );
  final String id;
  final String sId;
  final String wId;
  final String leagueName;
  final String homeTeam;
  final String awayTeam;
  final String homeGoals;
  final String awayGoals;
  final String mHour;
  final String homeEx;
  final String awayEx;
}

我要显示数据的页面：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'package:intl/intl.dart';
import '../models/dated_matchs.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    List matchs = [];
    Future<List> getmatchs() async {
      var url =
          'xxx/api/controller/matchs/dated_matchs.php?s_id=1';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      print(data);
    }
    return FutureBuilder(
        future: getmatchs(),
        builder: (ctx, snapshot) {
          return Container();
        });
  }
}

现在我不知道如何将接收到的数据添加到列表中，然后在列表视图中显示

我在 future 函数中使用了这种方式，但有问题：

Future<List> getmatchs() async {
  var url =
      'xxx/api/controller/matchs/dated_matchs.php?s_id=1';
  var response = await http.get(url);
  var data = jsonDecode(response.body);
  for (var x in data) {
    for (var y in x['games']) {
      cont1.add(TextEditingController());
      cont2.add(TextEditingController());
      Games newmatch = Games(
          y['id'],
          y['s_id'],
          y['w_id'],
          y['league_name'],
          y['home_team'],
          y['away_team'],
          y['home_goals'],
          y['away_goals'],
          y['m_hour'],
          y['home_ex'],
          y['away_ex']);
      matchs.add(newmatch);
    }
    DatedMatchs newdated = DatedMatchs(x['m_date'], x['matchs']);
    datedmatchs.add(newdated);
  }
  return datedmatchs;
}

没有东西打印

【问题讨论】：

标签： json list flutter dart

【解决方案1】：

您的一些数据以地图而不是列表的形式返回。您需要调试并查看哪些数据是 Map，然后您可以从 Map 中打印出来。

另外，我不会在您的 UI 中调用 api。最好使用状态管理库，例如 Bloc、Provider 或 RxDart。

【讨论】：

非常感谢，我改变了获取数据的方式，如果你能帮助我，我会编辑我的问题，非常感谢
您的数据将显示为地图。访问地图的方式是遍历键。
在方法中打印正确的数据吗？打印（数据）
您的游戏模型使用命名参数，但您在 getmatchs() 方法中实例化模型时并没有命名它们。您是否遇到编译错误？
我更改了命名参数

【解决方案2】：

我解决了它，并在未来的方法下正确地获取了我的数据列表：

    List<Games> games = [];                       // I added type of List
    List<DatedMatchs> datedmatchs = [];       // I added type of List
    Future<List> getmatchs() async {
      var url =
          'xxx/api/controller/matchs/dated_matchs.php?s_id=1';
      var response = await http.get(url);
      var data = await jsonDecode(response.body);
      for (var x in data) {
        for (var y in x['games']) {
          cont1.add(TextEditingController());
          cont2.add(TextEditingController());
          Games newmatch = Games(
              y['id'],
              y['s_id'],
              y['w_id'],
              y['league_name'],
              y['home_team'],
              y['away_team'],
              y['home_goals'],
              y['away_goals'],
              y['m_hour'],
              y['home_ex'],
              x['away_ex']);
          games.add(newmatch);
        }
        DatedMatchs newdated = DatedMatchs(x['m_date'], games); // add name of list
        datedmatchs.add(newdated);
      }
      return datedmatchs;
    }

【讨论】：