Flutter JSON 重复索引答案

【问题标题】：Flutter JSON duplicate indexFlutter JSON 重复索引
【发布时间】：2019-02-16 17:20:19
【问题描述】：

我有一个从 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);
}

这是在列表中显示用户的类。

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 尾部的索引号是重复的，我确实需要索引号才能继续。

我该如何解决这个问题？

非常感谢任何帮助。

【问题讨论】：

标签： json dart flutter

【解决方案1】：

您在此处创建 2 个列表，您正在重新创建一个 Column，其中包含项目构建中的整个列表，ListView.builder 已经在使用 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());
                  },
                ),
              );
}

【讨论】：

一个简单的答案和一个正确的答案。非常感谢，Hadrien。

【解决方案2】：

看起来您在 JSON 对象中只有 2 个项目，但您显示的是 4 个。

我想你的意思是只显示 2？如果是这样，在您的 itemBuilder 函数中，您应该这样做：

return new ListView.builder(
    shrinkWrap: true,
    itemCount: fifthList.length,
    itemBuilder: (context, index) {
      var f = fifthList[index];
      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());
          },
        ),
      );
    });

您使用的是.map()，它在每个项目上再次遍历列表。你有 2 个项目，所以你最终有 4 个。如果你有 3 个，它将显示 6 个项目，依此类推。

【讨论】：