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

问题描述

我有一个电子商务应用程序，我想让用户在发布产品时可以添加自定义选项。我已经构建了选项表单，并且具有为其他“选项”添加新的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,hintText: "Option...",);
  }

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

解决方法

我能够弄清楚如何使按钮正常工作。这是下面的代码：

这是主要形式：

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小部件来获取“添加/删除”按钮的位置。