代码之家 › 专栏 › 技术社区 › Darshan

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

flutter json

Darshan · 技术社区 · 7 年前

我从本地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
    );
  }
}

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

    )
    )
    )
    );
  }
}

电流输出:

1 回复 | 直到 7 年前

Chris Reynolds 7 年前

在构建器函数中,您可能打算使用items[索引]而不是item。

首先使用toList()将项目从iterable强制转换为列表,然后可以使用index。

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