使用按钮单击生成文本字段小部件并保存文本输入颤动

Posted 2023-02-23

【中文标题】使用按钮单击生成文本字段小部件并保存文本输入颤动

【英文标题】：Generate TextFeild widget with on Button Click and save text inputs flutter

【发布时间】：2022-01-14 09:11:57

【问题描述】：

我想在按钮单击时从用户生成文本字段，我想将文本保存在列表中输入的所有字段，默认情况下 2 个字段是必需的

生成字段工作已完成，但 现在的问题是我无法从字段中获取文本输入的值

class Add_Url extends StatefulWidget 
const Add_Url(Key? key) : super(key: key);

@override
_Add_UrlState createState() => _Add_UrlState();


class _Add_UrlState extends State<Add_Url> 

var controller = TextEditingController();

List fields = [0,1];


@override
Widget build(BuildContext context) 

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    centerTitle: true,
    title: const Text(
      "PDF", style: TextStyle(color: Colors.black),),
    iconTheme: IconThemeData(color: Colors.black),
  ),
  body: Padding(
    padding: const EdgeInsets.all(10.0),
    child: Column(
      children: [


        Padding(
          padding: const EdgeInsets.all(10.0),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Add Urls", style: TextStyle(fontSize: 20.sp),),
                SizedBox(width: 1.h,),
                InkWell(
                    onTap:()

                      setState(()
                        fields.add(fields.length + 1);
                       print(fields);
                      );

                    ,
                    child: Icon(Icons.add_circle, color: Colors.blue, size: 25.sp,))
              ],
            ),
          ),
        ),
        SizedBox(height: 2.h,),
        Expanded(
          child: Container(
                child: ListView.builder(
                  itemCount: fields.length,
                  itemBuilder: (BuildContext context, int index)
                    
                    return Padding(
                      padding: const EdgeInsets.all(10),
                      child: Row(
                        children: [
                          Expanded(child:
                          Container(
                            child: TextFormField(
                              controller: controller,
                              decoration: InputDecoration(
                                hintText: "https://yourfile.pdf",
                                hintStyle: TextStyle(
                                    color: const Color(0XFF1D3D9A), fontSize: 14.sp),
                                contentPadding: EdgeInsets.all(8),
                                fillColor: Colors.white70,
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(15.0),
                                  borderSide: BorderSide(
                                    color: Colors.black,
                                  ),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(15.0),
                                  borderSide: BorderSide(
                                    color: Colors.black,
                                    width: 1.0,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          ),
                          SizedBox(width: 1.w,),
                          InkWell(
                            onTap: ()


                                if(fields.contains(fields[index]))
                                  setState(() 
                                    fields.removeWhere((val) => val == fields[index]);
                                  );
                                  print(fields);
                                


                          ,
                            child: (fields.length >2 )? Container(
                              child: Icon(
                                Icons.remove_circle,
                                color: Colors.blue,
                                // feilds.contains(feilds[index])? Colors.blue : Colors.grey,
                                size: 22.sp,),
                            ) : Container()
                          ),

                        ],
                      )



                    );
                  ,
                )),
        ),
        SizedBox(height: 3.h,),
        ElevatedButton(
          onPressed: ()  

            print(controller.text);


          ,
          child: Text("Done"),
          style: ElevatedButton.styleFrom(
              minimumSize: Size(30.w, 5.h),
              primary: Colors.blue,
              // const Color(0xFF5963FF),
              textStyle: const TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.bold,
                  )),
                     ),


                   ],
                 ),
               ),
           );
         
          

我想获取列表中的每个新文本字段值 请任何人帮助我 谢谢你

【参考方案1】：

先做一个这样的模型类

    class TextFieldClass
      TextEditingController controller = new TextEditingController();
      var hint;
    
      TextFieldClass(this.controller,this.hint);
    

然后你只需要制作一个列表视图并在任何你想要的地方调用一个小部件函数，就像这样

      List<TextFieldClass> textFields = [];
    
      Widget list()
        return Container(
          padding:EdgeInsets.symmetric(vertical: 10),
          
          child: ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: textFields.length,
              itemBuilder: (context,index)
                return Padding(
                    padding: EdgeInsets.symmetric(vertical: 5),
    
                    child:TextFormField(
                      controller: textFields[index].controller,
                      decoration: InputDecoration(
                        hintText:textFields[index].hint,
                      ),
                    )
                );
              ),
        );
      

现在你只需要在列表中添加项目的最后一部分 例如，您制作一个添加按钮，并在添加按钮的 onTap 函数中编写

 textFields.add(TextFieldClass(
  controller: newController,
  hint: 'new field'
));

您的价值将在这里 ====> textFields[anyIndex].controller

【讨论】：

在最后一部分当在列表中添加项目时->（控制器：newController）给出错误

请告诉我我用 newController 替换了哪个值

您可以将 newController 替换为 TextEditingController()，并且每次添加文本字段时，它都会添加到列表中，您可以通过索引获取 textcontroller 值，或者您可以输入 if 条件，例如您将“name”放入提示，以便您可以在提示中搜索“名称”，并在该特定索引上找到您的值

就像 if(textfield[index].hint == name) var value = textfield[index].controller;