Flutter：添加动态 TextFormField 以将数据上传到列表

Posted 2023-02-23

【中文标题】Flutter：添加动态 TextFormField 以将数据上传到列表

【英文标题】：Flutter: Adding a dynamic TextFormField to upload data to a list

【发布时间】：2020-12-31 03:01:05

【问题描述】：

我有一个电子商务应用，我想让用户在发布产品时能够添加自定义选项。我已经构建了选项表单，并且我有为附加“选项”添加新 TextFormField 的逻辑，但我无法显示“添加/删除”按钮，以便他们可以添加新字段。

这是 TextFieldForm 所在的代码：

ListTile(
            title: Container(
              width: 250.0,
              child: TextField(
                style: TextStyle(color: Colors.white),
                controller: brandTextEditingController,
                decoration: InputDecoration(
                  enabledBorder: const OutlineInputBorder(
                    borderSide:
                        const BorderSide(color: Colors.white, width: 1.0),
                  ),
                  hintText: "Type Brand here...",
                  hintStyle: TextStyle(color: Colors.white),
//                  border: InputBorder.none,
                ),
              ),
            ),
          ),
          Divider(),
          ListTile(
            title: Container(
              width: 250.0,
              child: Column(
                  children: getOptions(),
              ),
            ),
          ),

这是我必须动态添加字段的内容：

List<Widget> getOptions()
    List<Widget> optionsTextFields = [];
    for(int i=0; i<optionsList.length; i++) 
      optionsTextFields.add(
       OptionTextFields(i));
       SizedBox(width: 16,);
       _addRemoveButton(i == optionsList.length-1, i);
    
    return optionsTextFields;
  

  Widget _addRemoveButton(bool add, int index)
    return IconButton(
              icon: Icon((add) ? Icons.add : Icons.remove, color: Colors.white,),
              onPressed: ()
                if(add)
                  // add new text-fields
                  optionsList.insert(0, null);
                
                else optionsList.removeAt(index);
                setState(());
              ,
    );
  


  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) 
    return file == null ? displayUploadScreen() : displayUploadFormScreen();
  


class OptionTextFields extends StatefulWidget 
  final int index;
  OptionTextFields(this.index);
  @override
  _OptionTextFieldsState createState() => _OptionTextFieldsState();


class _OptionTextFieldsState extends State<OptionTextFields> 
  TextEditingController optionsTextEditingController;

  @override
  void initState() 
    super.initState();
    optionsTextEditingController = TextEditingController();
  

  @override
  void dispose() 
    optionsTextEditingController.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) 
      optionsTextEditingController.text = _UploadPageState.optionsList[widget.index] ?? '';
    );

    return TextField(
              style: TextStyle(color: Colors.white),
              controller: optionsTextEditingController,
              decoration: InputDecoration(
                enabledBorder: const OutlineInputBorder(
                  borderSide:
                  const BorderSide(color: Colors.white, width: 1.0),
                ),
                hintText: "Option...",
                hintStyle: TextStyle(color: Colors.white),
              ),
    );
  

如何让“添加/删除”按钮显示？

【参考方案1】：

我能够弄清楚如何让按钮工作。下面是代码：

这是主要的形式：

ListTile(
            key: _formKey,
            title: Container(
              width: 250.0,
              child: Column(
                  children: getOptions(),
              ),
            ),
          ),

这是 getOptions 的代码：

List<Widget> getOptions()
    List<Widget> optionsTextFields = [];
    for(int i=0; i<optionsList.length; i++) 
      optionsTextFields.add(
        Row(
          children: <Widget>[
            Expanded(
              flex: 8,
                child: OptionTextFields(i),
            ),
            Expanded(
              flex: 1,
              child: _addRemoveButton(i == optionsList.length-1, i),
             ),
          ],
        ),
        );

这是 TextFormField 的表单：

return TextField(
        style: TextStyle(color: Colors.white),
        controller: optionsTextEditingController,
        decoration: InputDecoration(
          enabledBorder: const OutlineInputBorder(
            borderSide:
            const BorderSide(color: Colors.white, width: 1.0),
          ),
          hintText: "Option...",
          hintStyle: TextStyle(color: Colors.white),
        ),
    );
  

这是按钮的代码：

Widget _addRemoveButton(bool add, int index)
    return IconButton(
        icon: Icon((add) ? Icons.add : Icons.remove, color: Colors.white,),
        onPressed: ()
          if(add)
            // add new text-fields
            optionsList.insert(0, null);
          
          else optionsList.removeAt(index);
          setState(());
        ,
    );
  

如您所见，我必须在列中放置一行，然后使用该行中的 Expanded 小部件来获得添加/删除按钮的位置。