Flutter List<String> JSON 到 Widget

Question

我在资产文件夹中有一个 JSON 文件

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

这是 ma​​in.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

为了简化@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]}"),
        );
    }
);

Answer 2

这里可能有两个问题：

1. itemBuilder 中没有 return 语句。所以它返回 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]}"),
    );
});

注意：我没有测试代码。