颤振列表 将JSON转换为Widget

Question

我有一个JSON文件，它位于assets文件夹中

States.json

{
  "name" : "State List",
  "states" : [
   "Johor",
    "Kedah",
    "Kelantan",
    "Kuala Lumpur",
    "Melaka",
    "Negeri Sembilan",
    "Pulau Pinang",
    "Perak",
    "Perlis",
    "Pahang",
    "Terengganu",
    "Sabah",
    "Sarawak",
    "Selangor",
    "Wilayah Persekutuan"
  ]
}

我为州建立了一个模型类：

state_model.dart

class States{

  String name;
  List<String> states;

  States({this.name, this.states});

  factory States.fromJson(Map<String, dynamic> json){

    var statesJson = json["states"];
    List<String> stateList = new List<String>.from(statesJson);

    return States(
      name: json["name"],
      states: stateList
    );
  }
}

这是main.dart文件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async' show Future;
import 'dart:convert';
import 'package:state_json/model/state_model.dart';

//get the assets
Future<String> loadAssets() async{
  return await rootBundle.loadString('assets/states.json');
}

//get the states from the assets
Future loadStates() async{
  String jsonState =  await loadAssets();
  final jsonResponse = json.decode(jsonState);

  States states = new States.fromJson(jsonResponse);
  print(states.states);
  return states.states;
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
              title: new Text("States JSON")
          ),
            body: new FutureBuilder(
                future: loadStates(),
                builder: (context, snapshot){
                  if(snapshot.hasData){
                    return new ListView.builder(
                        itemBuilder: (context, index){
                          new ListTile(
                            title: new Text("${snapshot.data}"),
                          );
                        });
                  }else{
                    return new Center(child: new CircularProgressIndicator());
                  }
                })
        )
    );
  }
}

我目前面临的问题是，我可以打印出终端中字符串的值就好了。

I/flutter (16482): [Johor, Kedah, Kelantan, Kuala Lumpur, Melaka, Negeri Sembilan, Pulau Pinang, Perak, Perlis, Pahang, Terengganu, Sabah, Sarawak, Selangor, Wilayah Persekutuan]

但我无法知道如何将值插入到FutureBuilder.builder中，后者转到ListView.builder，随后进入ListTile以显示状态列表。

很感谢任何形式的帮助。

Answer 1

这里可能有两个问题：

1. 在return中没有itemBuilder声明。所以它返回null。
2. loadStates()的返回类型是Future。我认为它应该是一个Future<List<String>>。

然后您可以通过索引访问数据：

return new ListView.builder(
  itemBuilder: (context, index){
    if(index >= snapshot?.data?.length ?? 0) return null;

    return new ListTile(
      title: new Text("${snapshot.data[index]}"),
    );
});

注意：我没有测试代码。

Answer 2

为了简化@ Letsar的答案：

我们还可以将itemCount参数传递给ListView.builder以指定列表中的元素数，而不是返回null以将索引标记为不适用。示例如下：

return new ListView.builder(
    itemCount: snapshot?.data?.length,
    itemBuilder: (context, index) {
        return new ListTile(
          title: new Text("${snapshot.data[index]}"),
        );
    }
);