dart - 基于列表创建小部件

Question

我有一个参数 n，我必须创建 n 个文本字段并监听它们，并捕获所有这些字段的值。假设我必须对它们进行计算。我如何实现这一目标？我尝试将循环与小部件结合使用，但出现了很多错误。

当我使用一个单独的函数为列的子属性返回一个小部件列表时，它会抛出一个错误，指出 type int is not a subtype of type string of source。

Answer 1

从您的 d 参数生成一个列表，然后从该列表生成一个文本字段和文本编辑 Controller 的列表

createTexttextfields (int d){
    var textEditingControllers = <TextEditingController>[];

    var textFields = <TextField>[];
    var list = new List<int>.generate(d, (i) =>i + 1 );
    print(list);

    list.forEach((i) {
      var textEditingController = new TextEditingController(text: "test $i");
      textEditingControllers.add(textEditingController);
      return textFields.add(new TextField(controller: textEditingController));
    });
    return textFields;
}

然后在你的小部件的子属性中使用这个函数，例如列小部件

return new Scaffold(
  appBar: new AppBar(),
  body: new Column(
  children: createTexttextfields(6),
  ),
);

但是如果你想访问它们，你不能通过函数来​​访问它们，你必须将它们创建为变量

Widget build(BuildContext context) {
    var d=5;//the number of text fields 
    var textEditingControllers = <TextEditingController>[];
    var textFields = <TextField>[];
    var list = new List<int>.generate(d, (i) =>i + 1 );
    list.forEach((i) {
      var textEditingController = new TextEditingController(text: "test $i");
      textEditingControllers.add(textEditingController);
      return textFields.add(new TextField(controller: textEditingController));
    });

    return new Scaffold(
      appBar: new AppBar(),
      body: new Column(
      children: textFields),
      floatingActionButton: new FloatingActionButton(
        onPressed: (){
          //clear the text in the second TextEditingController
          textEditingControllers[1].clear(); 
        } ,
      ),
    );
  }
} 

Full Example