Flutter如何获取JSON结果长度 [英] Flutter How to Get JSON Result Length

问题描述

我是扑扑的新手，但我仍然使用轮播扑拍器卡住.我需要帮助，如何获取要与循环image.network一起使用的json结果的长度.

I'm new to flutter and I'm stuck using the carousel flutter swiper. I need help how to get the length of the json results to use with looping image.network.

这是我的代码:

iklan.dart(序列化):

iklan.dart (serialize):

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

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上进行搜索，但是没有针对我的具体问题的示例.我喜欢这种用于混合应用程序的编程语言，我想在这里重点介绍.

Thanks for your help. I'm already searching on Google, but there are no examples for my specific problem. I like this programming language for hybrid apps, and I want to focus here.

推荐答案

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

You need to exchange the order of Swiper and FutureBuilder in the build() method:

  @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)),
        ),
      ],
    );
  }

这篇关于Flutter如何获取JSON结果长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！