Flutter 如何使用GridView从服务器中放入JSON数据——flatter

我参考了食谱

示例代码用于获取单个JSON数据

我试图从StatefulWidget获取以下多个JSON数据。 我想通过GridView显示每个网格中的季节数据

[
  {"id":1,"season_end":"1999/01","season_name":"First","season_start":"1999/08"}, 
  {"id":2,"season_end":"1999/07","season_name":"Second","season_start":"1999/02"}, 
  {"id":3,"season_end":"2000/01","season_name":"Third","season_start":"1999/08"}, 
  {"id":4,"season_end":"2000/07","season_name":"Forth","season_start":"2000/02"}
]

然而，我不知道如何编写更好的代码，如下所示

class _HomePageState extends State<HomePage> {
  Future<List<Season>> seasons;

  @override
  void initState(){
    super.initState();
    seasons = fetchSeasons();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            ...
          ),
          itemBuilder: (context, index){
            return seasons[index].toString();
          }
      )
    )
  }
}

---

有两种方法可以做到这一点，您可以这样做，在这种情况下，您不需要使用initstate或有状态小部件futurebuilder在屏幕上呈现时自动调用方法fetchSeasons，结果作为快照接收，可以如下访问

FutureBuilder<List<seasons>>(
future:fetchSeasons(),
builder:(BuildContext context,AsyncSnapshot <List<seasons>>snapshot){
          snapshot.hasData?
          return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            ...
          ),
          itemCount:snapshot.data.length,
          itemBuilder: (context, index){
            return Column(
             children: <Widget>[
                    Text('${snapshot.data[index]['id']}'),
                    Text('${snapshot.data[index]['season_name']}'),
                    Text('${snapshot.data[index]['season_end']}'),
                    Text('${snapshot.data[index]['season_start']}'),
                ]
               ):Center(child:CircularProgressIndicator());
          }
});

---

有两种方法可以做到这一点，您可以这样做，在这种情况下，您不需要使用initstate或有状态小部件futurebuilder在屏幕上呈现时自动调用方法fetchSeasons，结果作为快照接收，可以如下访问

FutureBuilder<List<seasons>>(
future:fetchSeasons(),
builder:(BuildContext context,AsyncSnapshot <List<seasons>>snapshot){
          snapshot.hasData?
          return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            ...
          ),
          itemCount:snapshot.data.length,
          itemBuilder: (context, index){
            return Column(
             children: <Widget>[
                    Text('${snapshot.data[index]['id']}'),
                    Text('${snapshot.data[index]['season_name']}'),
                    Text('${snapshot.data[index]['season_end']}'),
                    Text('${snapshot.data[index]['season_start']}'),
                ]
               ):Center(child:CircularProgressIndicator());
          }
});

问题是季节是一个未来，而不是一个列表，这就是为什么你不能像列表一样使用它

如果要访问该未来的列表，需要使用FutureBuilder，如下所示：

Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<List<Season>>(
      future: seasons,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return GridView.builder(
              itemCount: snapshot.data.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              ...
              ),
              itemBuilder: (context, index) {
                return Text("${snapshot.data[index].season_name}");
              }
          );
        } else if (snapshot.hasError) {
          return Text("Error");
        }
        return Text("Loading...");
      },
    ),
  );
}

问题是季节是一个未来，而不是一个列表，这就是为什么你不能像列表一样使用它

如果要访问该未来的列表，需要使用FutureBuilder，如下所示：

Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<List<Season>>(
      future: seasons,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return GridView.builder(
              itemCount: snapshot.data.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              ...
              ),
              itemBuilder: (context, index) {
                return Text("${snapshot.data[index].season_name}");
              }
          );
        } else if (snapshot.hasError) {
          return Text("Error");
        }
        return Text("Loading...");
      },
    ),
  );
}

---

我不明白为什么网格的数量超过4个？它返回更多的网格，并且没有index.Ops。我忘了设置项目计数。抱歉。文本“${snapshot.data[index]['seasure_name']}”有错误。未为班级季节定义运算符[]。实际上是这样的。所以基本上看来fetchSeasons没有返回列表。我不明白为什么网格的数量超过4？它返回更多的网格，并且没有index.Ops。我忘了设置项目计数。抱歉。文本“${snapshot.data[index]['seasure_name']}”有错误。未为班级季节定义运算符[]。实际上是这样的，所以基本上fetchSeasons并没有返回一个列表