Question

我正在从本地json提取数据，并希望在listView中显示它，但是尽管print(data)正确地提取了所有值，但目前仅显示一个值。我想显示列表中的所有值。不知道我在想什么。以下是json示例，模型和代码：

Json模型：

class Categories {
  String category;
  String categoryDesc;
  int id;
  String autocompleteterm;
  String desc;

  Categories({
    this.category,
    this.categoryDesc,
    this.id,
    this.autocompleteterm,
    this.desc
  });

  factory Categories.fromJson(Map<String, dynamic> parsedJson) {
    return Categories(
        category:parsedJson['serviceCategory'] as String,
        categoryDesc: parsedJson['serviceCategoryDesc'] as String,
        id: parsedJson['serviceCategoryId'],
        autocompleteterm: parsedJson['autocompleteTerm'] as String,
        desc: parsedJson['description'] as String
    );
  }
}

要获取并显示在listView中的代码：

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
            child: new Center(
              // Use future builder and DefaultAssetBundle to load the local JSON file
                child: new FutureBuilder(
                  future: DefaultAssetBundle
                      .of(context)
                      .loadString('assets/services.json'),
                  builder: (context, snapshot) {
                    // Decode the JSON
                    Map data = json.decode(snapshot.data
                        .toString());
                    final items = (data['data'] as List).map((i) => new Categories.fromJson(i));
                    for (final item in items) {
                      print(item.category);

                      return new ListView.builder(

                        itemBuilder: (BuildContext context, int index) {
                          return new Card(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                new Text('Service Category: ' +
                                    item.category),
                                  new Text('Auto complete term: ' + item.autocompleteterm),
                                  new Text('Desc: ' + item.desc),
                                  new Text('Category desc: ' + item.categoryDesc)
                              ],
                            ),
                          );
                        },
                      );
                    }
                  }

    )
    )
    )
    );
  }
}

电流输出：

Answer 1

在构建器函数中，您可能打算使用项[index]而不是项。

首先使用toList（）将项目从可迭代对象投射到列表，然后可以使用索引。

                  final List<Categories> items = (data['data'] as List).map((i) => new Categories.fromJson(i)).toList();
                  for (final item in items) {
                    print(item.category);

                    return new ListView.builder(

                      itemBuilder: (BuildContext context, int index) {
                        return new Card(
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              new Text('Service Category: ' +
                                  items[index].category),
                              new Text('Auto complete term: ' + items[index].autocompleteterm),
                              new Text('Desc: ' + items[index].desc),
                              new Text('Category desc: ' + items[index].categoryDesc)
                            ],
                          ),
                        );
                      },
                    );
                  }
                }

从本地json读取仅重复显示一个值

1 个答案: