ListView.builder中的TextFields消失了

如何解决ListView.builder中的TextFields消失了

要执行库存控制，我要从Firebase数据（“ Alimentos”的列表）构建一个ListView，并使用TextField编辑每个“ Alimento”的数量。

当我的屏幕少于“ Alimentos”时，它工作正常，但是当我有一些“ Alimentos”页面时，我的文本字段消失了。我知道发生这种情况是因为ListView.builder仅会构建视口内或附近的项目（滚动时），但我不知道如何解决。

我读了Textfield in ListView.builder Post，其中@Ashton Thomas建议在每行添加一个自定义小部件，但我不知道该如何获得。

这是我的ListView.Builder ...

  Widget _crearListado(BuildContext context,AlimentoBloc alimentoBloc) {

    final _size = MediaQuery.of(context).size;

    return Container(
      height: _size.height * 0.5,child: StreamBuilder(
          stream: alimentoBloc.alimentoStream,builder: (BuildContext context,AsyncSnapshot<List<AlimentoModel>> snapshot){
            if (snapshot.hasData) {
              List<AlimentoModel> alimentos = snapshot.data;
              alimentos.sort((a,b) => a.proteina.compareto(b.proteina));
              return Stack(
                children: <Widget>[
                  ListView.builder(
                    itemCount: alimentos.length,itemBuilder: (context,i) { //Esta variable es gráfica,sólo se crea para lo que se está viendo
                      _controlList.add(new ControlInventarioModel());
                      return _crearItem(context,alimentoBloc,alimentos[i],i);
                    },padding: EdgeInsets.only(left: 10.0,right: 10.0,top: 0.0,bottom: 20.0),),],);
            } else {
              return Center (child: Image(image: Assetimage('assets/Aplians-fish-Preloader.gif'),height: 200.0,));
            }
          },);
  }

每行的末尾（_cajaNum）都有一个项目（_CrearItem）和一个TextField，如下所示：

  Widget _crearItem(BuildContext context,AlimentoBloc alimentoBloc,AlimentoModel alimento,int i) {

      return Card(
        color: Colors.grey[200],//color de la tarjeta
        elevation: 0.0,//sin sombra
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),child: ListTile(
            title: Text('${alimento.nombre}',style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 18.0)),subtitle: Text ('${alimento.fabricante}'),//refLoteActual
            onTap: () {},leading: Icon(FontAwesomeIcons.shoppingBag,color: Theme.of(context).accentColor),trailing: _cajaNum(context,i,alimento.idalimento),// nuevoControlador),);
  }

  Widget _cajaNum(BuildContext context,int i,String idalimento){    
    return Container(
      width: 100.0,height: 40.0,decoration: Boxdecoration(
        color: Colors.white,borderRadius: BorderRadius.circular(10.0),child: TextField(
        style: TextStyle(fontSize: 20.0),textAlign: TextAlign.center,keyboardType: TextInputType.numberWithOptions(),//decimal:false,signed: false),inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.allow(RegExp(r'^(\d+)?\.?\d{0,2}')),FilteringTextInputFormatter.singleLineFormatter,maxLength: 5,onChanged: (value) {
                if(utils.isNumeric(value) && double.parse(value)>=0) {
                  _controlList[i].cantControl = double.parse(value);
                } 
                else {
                  _controlList[i].cantControl = null;
                }
                },onEditingComplete: () {
          FocusScope.of(context).unfocus();
        },onSubmitted: (value) {
        },); 
  }

如果ListView不断滚动地重建，如何保持TextFields的值？

更新

我包括显示文本字段“消失”的屏幕截图...

解决方法

添加属性TextFormField：initialValue。它对我有用，我也经历了同样的事情。

像这样

TextField(
    style: TextStyle(fontSize: 20.0),initialValue: _controlList[i].cantControll ?? '0',onChanged: (value) {
            if(utils.isNumeric(value) && double.parse(value)>=0) {
              _controlList[i].cantControl = double.parse(value);
            } 
            else {
              _controlList[i].cantControl = null;
            }
            },onEditingComplete: () {
      FocusScope.of(context).unfocus();
    },onSubmitted: (value) {
    },),

因为，滚动并输入下一个texfield时，文本字段将重建。但您的数据已经存储在_controlList[i].cantControl中。