如何根据json文件中的项目数生成卡列表

Question

我使用以下代码在不改变的颤动屏幕上生成10个预定义的卡：

    List cards = new List.generate(10, (i)=>new QuestionCard()).toList();
      @override
      Widget build(BuildContext context) {
          return new Scaffold(
                appBar: new AppBar(
                  title: new Text('My First App'),
                  backgroundColor:new Color(0xFF673AB7),
                ),
                body: new Container(
                  child: new ListView(
                    children: cards,
                  )

                )

            );

        }
    }

class QuestionCard extends StatefulWidget {
  @override
  _QuestionCardState createState() => _QuestionCardState();
}

class _QuestionCardState extends State<QuestionCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Card(
        borderOnForeground: true,
        color: Colors.green,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              trailing: Icon(Icons.album),
              title: Text('Q1'),
              subtitle: Text('What is the name of this location?'),
            ),
            new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Answer Question",
                        fillColor: Colors.white,
                        border: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(25.0),
                          borderSide: new BorderSide(
                          ),
                        ),
                        //fillColor: Colors.green
                      ),
                      validator: (val) {
                        if(val.length==0) {
                          return "Type your answer here";
                        }else{
                          return null;
                        }
                      },
                      keyboardType: TextInputType.text,
                      style: new TextStyle(
                        fontFamily: "Poppins",
                      ),
                    ),
            ButtonBar(
              children: <Widget>[
                FlatButton(
                  child: const Text('Save'),
                  onPressed: () {/* ... */},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

我的json很简单（questions.json）：

{
    "Questions":
    [
        {
            "id" : 1,
            "quest" : ["question one"]
        },
        {
            "id" : 2,
            "quest" : ["question two", "question three"]
        },
        {
            "id" : 3,
            "quest" : ["question four"]
        },
        {
            "id" : 4,
            "quest" : ["question five", "question six", "question seven"]
        }
    ]
}

所以我有两个问题需要解决：1.如果我有多个问题，则需要在回答中添加一个额外的文本框，为此我将使用不同的卡片类型（最大2、3、4），我需要定义一次。 >

2. 但是我真正的问题是：如何根据json响应生成列表：

   未来_loadQuestionAssets（）异步{返回等待rootBundle.loadString（'assets / questions.json'）;}

     Future loadQuestion() async{
       String jsonString = await _loadQuestionAssets();
       final jsonResponse = json.decode(jsonString);
       Questions question = new Questions.fromJson(jsonResponse);
       //List cards = new List.generate(length, generator)
     }
   

我使用下面的代码在不改变的颤动屏幕上生成10个预定义的卡：列表卡= new List.generate（10，（i）=> new QuestionCard（））。toList（）; @override ...

Answer 1

尝试一下：