Flutter：向 Column 添加了一个额外的 TextFormField 但显示没有变化

Question

I am making a Form which takes a table as its child. There is a button to add additional Column and another button to add additional TextFormField. The buttons are implemented the _MyHomePageState.

So, the setup is like the one in the link below.

https://flutter.dev/docs/development/ui/interactive#the-parent-widget-manages-the-widgets-state

When the addTextFormField method is invoked, a new TextFormField is added to List _textFormFields. The List _columns takes _textFormFields as children. Therefore, _columns is also changed. _columns is then passed to FormA constructor through build.

At this moment, there is 1 Column Widget in _columns and 2 TextFormFields in the Column Widget. However, it only displays 1 TextFormField.

Then when I press addColumn button, an additional Column with two TextFormFields will appear.

Why there are not 2 TextFormFields when I press addTextFormField?

main.dart

    class _MyHomePageState extends State<MyHomePage> {

      List<Widget> _columns;
      List<Widget> _textFormFields;

      @override
      void initState(){
        super.initState();
          _columns = List<Widget>();
          _textFormFields = List<Widget>();

          _addTextFormField();
          _addColumn();
      }

      void _addTextFormField() async {
          _textFormFields.add(TextFormField(
                        decoration: InputDecoration(
                        hintText: _textFormFields.length.toString()),
                        ),
                      );

          for(Column column in _columns){
            print('from _addTextFormField ' + column.children.length.toString()); 
           // press addTextFormField button once, it prints  2

            print('from _addTextFormField ' + column.children.toString()); 
           //press addTextFormField button once, it prints [TextFormField, TextFormField]
          }

          setState((){

          });
      }

      void _addColumn() async {

          print('from addColumn   no. of textFormFields ' + _textFormFields.length.toString());
          _columns.add(Column(
                      children: _textFormFields,),
                      );

          for(Column column in _columns){
            print('from addColumn   no. of widget in a column ' + column.children.length.toString());
          }

          setState((){
          });
      }

      @override
      Widget build(BuildContext context) {

        print('rebuild');
        // press addTextFormField button once, it prints rebuild
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FormA (columns : _columns),
              ],
            ),
          ),

          floatingActionButton: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
                FloatingActionButton(
                  onPressed: _addColumn,
                  tooltip: '+C',
                  child: Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: _addTextFormField,
                  tooltip: '+R',
                  child: Icon(Icons.add),
                ),
            ],
          ),


        );
      }
    }

formA.dart

class FormA extends StatelessWidget{

  FormA({Key key, this.columns})
      : super(key: key);

  List<Widget> columns;

  @override
  Widget build(BuildContext context) {

      for(Column column in columns){
        print('from FormA   no. of widget in a column ' + column.children.length.toString());
       // press addTextFormField button once, it prints 2
        print('from FormA ' + column.children.toString());
       // press addTextFormField button once, it prints [TextFormField, TextFormField]
      }

    return Form(
      child: Table(
        children: [TableRow(
          children: columns,
        ),],
      ),
    );
  }
}

Answer 1

You code in its current form will not work as you expect because the _columns list even though has the reference to _textFormFields , the Column widget you initially built has its children already built and will not change if you change it MyhomePage widget because it will not have its reference.

In its current form you code works like this.

All you need to do is reassign the _columns field in the setState of _addTextFormField method which will rebuild the whole list of columns like this.

void _addTextFormField() {
    _textFormFields.add(
      TextFormField(
        decoration:
            InputDecoration(hintText: _textFormFields.length.toString()),
      ),
    );

    for (Column column in _columns) {
      print('from _addTextFormField ' + column.children.length.toString());
      // press addTextFormField button once, it prints  2

      print('from _addTextFormField ' + column.children.toString());
      //press addTextFormField button once, it prints [TextFormField, TextFormField]

    }

    setState(() {
      _columns = List<Column>.generate(
          _columns.length, (index) => Column(children: _textFormFields));
    });
  }

After this change it will look like this.

Here is a live code pen with the solution.

https://codepen.io/abhilas-csc/pen/dyYRVrL

Answer 2

Then when I press addColumn button, an additional Column with two TextFormFields will appear.

Why there are not 2 TextFormFields when I press addTextFormField?

Not really, When the widget initializes, you have exactly one Column and exactly one TextFormField in each List. Now you press addColumn so one more Column is added. So you have two Column s but still one TextFormField .

I hope that helps.