Flutter 循环创建输入框 TextField

需求：

　　根据接口返回的数据生成列表，列表内含有可编辑的字段

 

先初始化一个 TextEditingController 集合

Map<Object, TextEditingController> _numberControllers = Map();

 

拿到接口数据时进行绑定

listData.forEach((element) {
    _numberControllers[element] = TextEditingController();
});

 

在 TextField 绑定 controller

controller: _numberControllers[listData[index]],

TextField 完整代码

                TextField(
                    onSubmitted: (value) {
                      listData[index]['actualQuantity'] = _numberControllers[listData[index]].text;
                    },
                    onChanged: (value) {
                    },
                    cursorColor: Color(0xff999999),
                    keyboardType: TextInputType.number,
                    textInputAction: TextInputAction.done,
                    autofocus: false,
                    controller: _numberControllers[listData[index]],
                    onEditingComplete: () {
                      FocusScope.of(context).requestFocus(FocusNode());
                    },
                    style: TextStyle(
                      color: Color(0xff333333), fontSize: ScreenUtil().setSp(28)
                    ),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
                      hintText: "请输入数量",
                      hintStyle: new TextStyle(
                        fontSize: ScreenUtil().setSp(28),
                        color: Color(0xff666666)
                      ),
                    ),
                  ),    

View Code

 

设置值

listData.forEach((item) {
    if (_numberControllers[item].text.isNotEmpty) {
          item['actualQuantity'] = _numberControllers[item].text;
     }
 });

 

 

 

放不了图了，自行试一下好了。

标签：index,numberControllers,listData,text,输入框,item,TextField,Flutter
来源： https://www.cnblogs.com/wyhlightstar/p/16615009.html