Flutter 如何获取 JSON 结果长度答案

【问题标题】：Flutter How to Get JSON Result LengthFlutter 如何获取 JSON 结果长度
【发布时间】：2018-10-12 16:53:01
【问题描述】：

我是 Flutter 的新手，我一直在使用 carousel flutter swiper。我需要帮助如何获取 json 结果的长度以与循环 image.network 一起使用。

这是我的代码：

iklan.dart（序列化）：

import 'package:json_annotation/json_annotation.dart';

part 'iklan.g.dart';

@JsonSerializable()
class Iklan {
  final int success;
  final String message;
  final int length;
  final List<DataIklan> data;

  Iklan({this.success, this.message, this.length, this.data});
  factory Iklan.fromJson(Map<String, dynamic> json) => _$IklanFromJson(json);
}

@JsonSerializable()
class DataIklan{
  final String id_iklan;
  final String judul_iklan;
  final String gambar_iklan;
  final String tanggal_mulai;
  final String tanggal_berakhir;

  DataIklan({this.id_iklan, this.judul_iklan, this.gambar_iklan, this.tanggal_mulai, this.tanggal_berakhir});
  factory DataIklan.fromJson(Map<String, dynamic> json) => _$DataIklanFromJson(json);
}

home.dart

    class _HomeState extends State<Home> {

  Future<Iklan> getData() async {
    final response = await http
        .get("http://mysite.go.id/android/user/getactivead.php");

    if (response.statusCode == 200) {
      return Iklan.fromJson(json.decode(response.body));
    } else {
      throw Exception('failed');
    }
  }

  @override
  void initState() {
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new ConstrainedBox(
          child: new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new FutureBuilder<Iklan>(
                    future: getData(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return new Image.network(
                            "http://mysite.go.id/wp/gambar_iklan/" +
                                snapshot.data.data[index].gambar_iklan,
                            fit: BoxFit.fitWidth);
                      } else {
                        new CircularProgressIndicator();
                      }
                    });
              },
              itemCount: 4 (????????), //HOW TO GET THIS?
              viewportFraction: 0.8,
              autoplay: true,
              scale: 0.9,
              itemHeight: MediaQuery.of(context).size.width / 6),
          constraints: new BoxConstraints.loose(
              new Size(MediaQuery.of(context).size.width, 170.0)),
        ),
      ],
    );
  }
}

json:

{
"success": 1,
"message": "Berhasil",
"length": 4,
"data": [
{
"id_iklan": "1",
"judul_iklan": "IMAGE 1",
"gambar_iklan": "1_ersz8s46pg.png",
"tanggal_mulai": "2018-09-04",
"tanggal_berakhir": "2018-10-31"
},
{
"id_iklan": "6",
"judul_iklan": "IMAGE 2",
"gambar_iklan": "6_83trb3x9k4.png",
"tanggal_mulai": "2018-09-05",
"tanggal_berakhir": "2018-10-31"
},
{
"id_iklan": "7",
"judul_iklan": "IMAGE 3",
"gambar_iklan": "7_bba7h9dt8h.png",
"tanggal_mulai": "2018-09-01",
"tanggal_berakhir": "2018-10-31"
},
{
"id_iklan": "8",
"judul_iklan": "IMAGE 4",
"gambar_iklan": "merakyat.jpg",
"tanggal_mulai": "2018-10-03",
"tanggal_berakhir": "2018-10-31"
}
]
}

感谢您的帮助。我已经在 Google 上搜索，但没有针对我的具体问题的示例。我喜欢这种用于混合应用的编程语言，我想重点关注这里。

【问题讨论】：

标签： android dart flutter

【解决方案1】：

需要在build()方法中交换Swiper和FutureBuilder的顺序：

  @override
  Widget build(BuildContext context) {
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new ConstrainedBox(
          child: FutureBuilder<Map<String, dynamic>>(
            future: getData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return new Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return new Image.network(
                        "http://mysite.go.id/wp/gambar_iklan/" +
                            snapshot.data.data[index].gambar_iklan,
                        fit: BoxFit.fitWidth,
                      );
                    },
                    itemCount: snapshot.data.length,
                    viewportFraction: 0.8,
                    autoplay: true,
                    scale: 0.9,
                    itemHeight: MediaQuery.of(context).size.width / 6);
              } else {
                return new CircularProgressIndicator();
              }
            },
          ),
          constraints: new BoxConstraints.loose(
              new Size(MediaQuery.of(context).size.width, 170.0)),
        ),
      ],
    );
  }

【讨论】：