Flutter JSON重复索引 [英] Flutter JSON duplicate index

问题描述

我有从JSON中读取的用户列表.

I have a list of users that I am reading from JSON.

这是JSON文件:

{
"Dependents": [
    {
      "Name": "Kim",
      "Relationship": "Parent"
    },
    {
      "Name": "Tim",
      "Relationship": "Spouse"
    }
  ]
}

这是模型类:

new_fifth_model.dart

class NewFifthModel {

  String name;
  String relationship;

  NewFifthModel(this.name, this.relationship);
}

这是在列表中带出用户的类.

And this is the class to bring out the users in a list.

NewFifth.dart

import 'package:flutter/material.dart';
import 'package:emas_app/model/new_fifth_model.dart';
import 'dart:convert';
import 'dart:async' show Future;
import 'package:http/http.dart' as http;

final String url = "http://crm.emastpa.com.my/MemberInfo.json";
final int page = 5;

//Future to get list of dependent names
Future<List<NewFifthModel>> fetchUserInfo() async{

  var response = await http.get(url, headers: {"Accept": "application/json"});

  List data = json.decode(response.body)["Dependents"];
  var fifthmodel = <NewFifthModel>[];
  data.forEach((f) => fifthmodel.add(new NewFifthModel(f["Name"], f["Relationship"])));

  print(fifthmodel);

  return fifthmodel;
}

class NewFifth extends StatefulWidget {
  @override
  _FifthState createState() => _FifthState();
}

class _FifthState extends State<NewFifth> {

  List<NewFifthModel> fifthList;

  @override
  void initState() {
    super.initState();
    if (fifthList == null) {
      fetchUserInfo().then((data) {
        this.setState(() {
          fifthList = data;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {

    //body widget
    Widget _createBody() {

      if(fifthList == null){
        return new Center(
          child: new CircularProgressIndicator(),
        );
      }

      else{
        return new ListView.builder(
            shrinkWrap: true,
            itemCount: fifthList.length,
            itemBuilder: (context, index){
              return new Column(
                children: fifthList.map((f){
                   return new Card(
                    child: new ListTile(
                      title: new Text(f.name),
                      subtitle: new Text(f.relationship),
                      trailing: new Text(index.toString()),
                      onTap: (){
                        makeDialog(index.toString());
                      },
                    ),
                  );
                }).toList(),
              );
            });
      }
    }

    return new Scaffold(
      body: _createBody(),
    );
  }
}

这是屏幕上的输出.

我遇到的问题(如您在图片中看到的那样)是我放在ListTile尾部的索引号重复了，我真的需要索引号才能继续.

The problem I am having (as you can see in the picture) is that the index number I put in the trailing part of the ListTile is duplicating and I really need the index number in order to proceed.

如何纠正此问题?

非常感谢您的帮助.

推荐答案

您要在此处创建2个列表，您要重新创建一个 Column ，其中整个列表都位于项目内部，ListView.builder为已经在使用itemCount遍历列表.

you are creating 2 list here, you are recreating a Column with the entire list inside the item build, the ListView.builder is already taking care of iterating on your list using the itemCount.

itemBuilder: (context, index) {
          final f = fifthList[index];
          return Card(
                child: new ListTile(
                  title: new Text(f.name),
                  subtitle: new Text(f.relationship),
                  trailing: new Text(index.toString()),
                  onTap: (){
                    makeDialog(index.toString());
                  },
                ),
              );
}

这篇关于Flutter JSON重复索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！