将单个API响应转换为地图列表，以转换为扑动中的卡片

Question

为了将单个地图转换为卡片，我使用了颤振菜谱来创建未来。但是我想用一个地图列表来做这件事。我知道我需要创建一个列表，然后使用futurebuilder返回列表视图，但我不确定如何添加到apitest（）方法以将每个Map添加到列表然后进行转换。任何帮助深表感谢。

这是main.dart：

import 'package:flutter/material.dart';

import './viewviews.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'API TEST',
      theme: new ThemeData(
        primarySwatch: Colors.purple,
        backgroundColor: Colors.black,
      ),
      home: CardPage(),
    );
  }
}

这是我构建对象的类：

import 'package:flutter/material.dart';

class Post {
  final String appName;
  final String brandName;
  final int views;

  Post(
      {@required this.appName, @required this.brandName, @required this.views});

  factory Post.fromJson(Map<String, dynamic> json) {
    return (Post(
        views: json['Views'],
        brandName: json['brandname'],
        appName: json['appname']));
  }
}

最后我用来进行api调用并使用futurebuilder的代码：

import 'dart:async';

//final List<Post> cardslist = [];

class CardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('API TEST')),
        body: ListView.builder(
          itemBuilder: cardbuilder,
          itemCount: 1,
        ));
  }
}

Future<Post> testapi() async {
  final apiresponse =
      await http.get('https://myriadapp-55adf.firebaseio.com/Views.json');
  print(apiresponse.body);
  return Post.fromJson(json.decode(apiresponse.body));
}

Widget cardbuilder(BuildContext context, int index) {
  return Container(
      margin: EdgeInsets.all(20.0),
      child: FutureBuilder<Post>(
          future: testapi(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data.appName);
            } else if (snapshot.hasError) {
              return Text(snapshot.hasError.toString());
            }
            return Center(child: CircularProgressIndicator());
          }));
}

我已经注释掉了创建列表的代码，但我知道我需要这个，我只需要解码json就可以向它添加一个Maps列表，然后使用Futurebuilder返回listview。谢谢。

Answer 1

你的json实际上并没有返回一个json数组，它实际上会返回一个包含任意键名的地图，比如View1，所以我们将迭代该地图。您需要将FutureBuilder提升到可以立即处理整个json的位置，因此在页面级别。所以CardPage变成了

class CardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('API TEST')),
      body: FutureBuilder<Map>(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final Map<String, dynamic> data = snapshot.data;
            final List<Container> cards = data.keys
                .map((String s) => makeCard(Post.fromJson(data[s])))
                .toList();
            return ListView(
              children: cards,
            );
          } else if (snapshot.hasError) {
            return Text(snapshot.hasError.toString());
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }

  Container makeCard(Post post) {
    return Container(
      margin: EdgeInsets.all(20.0),
      child: Text(post.appName),
    );
  }

  Future<Map> fetchData() async {
    final apiresponse =
        await http.get('https://myriadapp-55adf.firebaseio.com/Views.json');
    print(apiresponse.body);
    return json.decode(apiresponse.body);
  }
}